ASP.NET MVC 3 - 发布前从集合中添加/删除答案

【问题标题】：ASP.NET MVC 3 - Add/Remove from Collection Before PostingASP.NET MVC 3 - 发布前从集合中添加/删除
【发布时间】：2010-12-21 20:00:52
【问题描述】：

我有一个包含集合的模型，例如：

类 MyModel
{
    公共列表 子模型 { 获取；放; }
}

在视图中，我想在提交之前使用 Javascript 动态添加/删除此列表。现在我有这个：

$("#new-submodel").click(function () { var i = $("#submodels").children().size(); var html = '

\ SomeProperty\ \

' $("#submodels").append(html); });

这行得通，但它很难看。而且，如果我想为现有项目显示这些标签/文本框，也没有干净的方法可以做到这一点（不重复）。

我觉得我应该能够使用 Razor 助手或其他东西来做到这一点。有任何想法吗？帮助我保持干爽。

【问题讨论】：

标签： asp.net-mvc razor

【解决方案1】：

如果您在删除或添加 div 时，您的方法可能会导致意外错误。例如，您有 4 个项目，删除第一个项目，然后 $('#submodels').children().size() 将返回 3，但您最后插入的 div 的 name 属性值设置为 SubModels[3].SomeProperty，这会导致冲突。如果您发布的值包含SubModels[1] 但不包含SubModels[0]，则默认模型绑定器将无法绑定列表（它将绑定为空）。我必须以艰难的方式学习这一点......

为了消除上述（和你的）问题，我建议你这样做：

$("#addBtn").click(function() {
  var html = '<div class="submodel">\
                <label>SomeProperty</label>\
                <input type="textbox" />\
              </div>'; // you can convert this to a html helper!
  $("#submodels").append(html);
  refreshNames(); // trigger after html is inserted
});

$(refreshNames); // trigger on document ready, so the submodels generated by the server get inserted!

function refreshNames() {
  $("#submodels").find(".submodel").each(function(i) {
     $(this).find("label").attr('for', 'SubModels[' + i + '].SomeProperty');
     $(this).find("label").attr('input', 'SubModels[' + i + '].SomeProperty');
  });
}

然后您的视图（或者对于 SubModel 类型更好的是 EditorTemplate）也可以生成如下代码：

 <div class="submodel">
    @Html.LabelFor(x => x.SomeProperty);
    @Html.EditorFor(x => x.SomeProperty);
 </div>

也可以将代码生成转换为 html 帮助类，并在 EditorTemplate 和 JavaScript 代码中使用它

【讨论】：

【解决方案2】：

我建议你通过following blog post。

【讨论】：

这篇博文来自 Steve Sanderson，包含一个完整的工作演示。好的部分是它使用部分视图并允许您使用辅助方法来生成输入等。这意味着让客户端验证工作应该更容易。