Добавление или удаление из отображаемого списка и повторного отображения списка в определенном div

Question

Для моего первого приложения ASP.NET MVC 3 у меня есть div в частичном представлении, которое отображает список предлагаемых названий для конкретного мороженого.Я использую, в качестве моей первой попытки, что-то вроде этого, чтобы отобразить предложенные имена:

@model ViewModels.IceCream.{ProposedNamesViewModel
<table>
  <tr>
    <th></th>
    <th>Proposed Names</th>
  </tr>
  @foreach (var item in Model.ProposedNames)
  {
    <tr>
      <td>
         @Html.ActionLink("Delete", "Delete", new { id=item.Id })
      </td>
      <td>
         @item.ProposedName
      </td>
    </tr>
  }
</table>

, и это работает достаточно хорошо для отображения этих имен.Эти предложенные имена являются всего лишь одной из нескольких частей информации о выбранном мороженом, и я хотел бы, чтобы пользователь мог добавить или удалить имя, а затем получить в результате одного из этих действийобновленные данные viewmodel повторно отображаются в этом div (то есть, оставляя все остальное как есть на странице и просто заменяя содержимое этого div новым содержимым.

Я могу просто написать действие удаления контроллера, и онообновит базовую БД, но тогда я не уверен, как вернуть эту PartialView обратно в конкретную div с моей обновленной моделью представления. Надеюсь, это имеет смысл.

Это (вероятно, веб-разработчик 101)Это та концепция, которую я еще не обманул, и я надеюсь, что кто-то может показать мне, как это сделать.

---

Обновление

Я ищупри использовании jquery для решения этой проблемы. У Стефана Продана (я полагаю, это его имя) есть пример здесь , где он обновляет список заметок, используя jquery.

Answer 1

JQuery - определенно хорошее направление для этого. Единственное изменение, которое я бы предложил для вашей таблицы для решения jQuery, - это добавить индекс к каждому тегу

(уникальный для каждой строки, предпочтительно один на основе элемента, отображаемого в строке). Тогда остальное - это JavaScript. Свяжите событие клика с опцией удаления, и при удалении одна строка jQuery выполнит вашу работу:

$("#" + rowID).remove()

Что касается добавления новых строк, просто сгенерируйте строку, представляющую это:

var newrow = "<tr id='newrowID'><td>Delete</td><td>proposedname</td></tr>

И (теперь я понимаю, что вы, возможно, захотите добавить идентификатор к вашему

Answer 2

Вы могли бы использовать помощников MVC Ajax, но я чувствую, что иногда они немного неуклюжи. Также кажется, что они предназначены для форм по сравнению с реализацией вашей таблицы. Если вы можете использовать что-то javascripty, такое как jQuery, вы можете дать себе гораздо больше гибкости, хотя и немного больше кода. Ниже я покажу вам, что я считаю Microsoft. Может быть, я попытаюсь изменить его, чтобы использовать jQuery, чтобы проиллюстрировать различия.

Помощники Ajax

Если вы используете MVC 3, обязательно используйте ссылки jQuery и jquery.unobtrusive-ajax для следующего примера, поскольку это, скорее всего, настроено в web.config

Вот основной вид

<div id="myTableContainer">
@{Html.RenderPartial("GetTable", new List<string>() { "1", "2", "3" });}
</div>

И мое строго типизированное (List<string>) частичное представление. Ваш будет напечатан в вашей модели просмотра

<table>
    @foreach (var item in Model) { 
        <tr>
        <td>@item</td>
        <td>@Ajax.ActionLink("Delete", "GetTable", new { id = item }, 
                new AjaxOptions { UpdateTargetId = "myTableContainer" })</td>
        </tr>
    }
</table>

И, наконец, действие контроллера, которое возвращает частичное представление

public ActionResult GetTable(string id)
{
    // you would obviously create your list of your ice cream objects here
    // get them from a service/repository and build a view model
    List<string> list = new List<string>() { "1", "2", "3" };

    if (!string.IsNullOrEmpty(id))
        list.Remove(id);

    return View("GetTable", list);
}

Это грубая демонстрация, но она должна дать представление о том, как работают помощники Ajax для повторного рендеринга представлений.