MVC 3 динамически добавляет viewModel в View

Question

У меня есть несколько моделей, похожих на эти:

public class ResturantViewModel
{
   public ResturantViewModel()
   {
       Clients.Add(new ClientViewModel());
   }
   public string MyProperty {get;set;}
   public IList<ClientViewModel> Clients = new List<ClientViewModel>();
}

public class ClientViewModel
{
   public string FirstName {get;set;}
   public string LastName {get;set;}
}

На мой взгляд, у меня есть что-то вроде:

@foreach(var client in Model.Clients)
{
   <tr>
      <td>First Name: @Html.EditorFor(item => client.FirstName)</td>
      <td>Last  Name: @Html.EditorFor(item => client.LastName)</td>
   </tr>
}

Мне нужна кнопка, которая может добавить несколько новых пустых ClientViewModels в список ResturantViewModel.Clients, чтобы его можно было отобразить в представлении и опубликовать в действии Resturant / Create.

Заранее спасибо

Answer 1

Вам нужно реализовать список объектов внутри вашего представления

  <input type="text" name='Clients[@index].FirstName' value='@c.FirstName' />
  <input type="text" name='Clients[@index].LastName'  value='@c.LastName' /> 

@index++;

после этого вам нужно клонировать эти поля со следующим значением индекса, поэтому вы должны получить следующие данные:

 <input type="text" name='Clients[0].FirstName' value='@c.FirstName' />
 <input type="text" name='Clients[0].LastName'  value='@c.LastName' /> 

 <input type="text" name='Clients[1].FirstName' value='@c.FirstName' />
 <input type="text" name='Clients[1].LastName'  value='@c.LastName' /> 
 <input type="text" name='Clients[2].FirstName' value='@c.FirstName' />
 <input type="text" name='Clients[2].LastName'  value='@c.LastName' /> 

В контроллере вы примете список следующих объектов:

List<Client> Clients

Answer 2

Вы можете взглянуть на следующую запись в блоге .Он использует механизм просмотра WebForms, но его очень легко адаптировать к Razor.

Answer 3

Хорошо, спасибо вам всем, что я сделал, чтобы решить.

сначала я создал новое частичное представление _ClientRow.cshtml:

@using Extensions.CollectionItemsHtmlExtension
@using ClientViewModel
@model ClientViewModel
<div class = "clientEditRow">
   @using(Html.BeginCollectionItem("Clients"))
   {
      @First Name: @Html.TextBoxFor(c=>c.FirstName)
      @Last Name: @Html.TextBoxFor(c=>c.LastName)
   }
</div>

Это частичное представление отображает новоелиния для клиента.BeginCollectionItem - это расширение HTML, загружаемое после сообщения в блоге, о котором упоминал Дарин.

Затем, на мой взгляд, я установил:

<legend>Clients</legend>
<fieldset>
    <div id="clientEditorRows">
        @foreach(var client in Model.Clients)
        {
           Html.RenderPartial("_ClientRow", client);
        }
    </div>
    @Html.ActionLink("New Client", "NewClientRow", null, new {id = "addItem"})
</fieldset>
...
<script type="text/javascript" scr="../Scripts/listEditor.js"></script>

foreach проходит по всем клиентам и отображает частичное представление для каждого клиента.,Затем в моем контроллере я написал этот метод:

public PartialViewResult NewClientRow()
{
   return PartialView("_ClientRow", new ClientViewModel())
}

Этот метод вызывается ActionLink и возвращает html для новой строки, добавляя его к предыдущим строкам.В конце концов я добавил этот код файла javascript из сообщения блога и изменил его в моем случае:

listEditor.js

$("#addItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#clientEditorRows").append(html); }
    });
    return false;
});

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

alex

PS: метод HttpPost, получающий значения, не был изменен и имеет эту подпись

[HttpPost]
public ActionResult Create(ResturantViewModel resturantVM)
{
   ...
}

дляобратите внимание, что resturantVM.Clients получает все значения, нет необходимости добавлять параметр IList Clients