MVC 3动态添加viewModel到View

Question

我有一些类似于以下的 viewModel：

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>
}

我想要一个按钮，可以将一些新的空白 ClientViewModel 添加到 ResturantViewModel.Clients 列表中，以便可以在视图中呈现并发布到餐厅/创建操作。

提前致谢

Answer 1

您可以查看 以下博客文章。它使用 WebForms 视图引擎，但可以很容易地适应 Razor。

Answer 2

您需要在视图中实现一个对象列表

  <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 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 是根据 Darin 提到的博客文章下载的 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

P.S.：接收值的 HttpPost 方法尚未修改，并且具有此签名

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

以表明resturantVM.Clients 接收所有值，无需添加 IList Clients 参数