asp.net-mvc - ASP.NET MVC 3 - 发布前从集合中添加/删除

Question

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

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

在 View 中，我想在提交之前使用 Javascript 从该列表中动态添加/删除。现在我有这个:

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

\
SomeProperty\
\

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

这有效，但它很丑。而且，如果我想为现有项目显示这些标签/文本框，也没有干净的方法可以做到这一点(不重复)。

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

Answer 1

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

为了消除上述问题(和您的)，我建议您执行以下操作:

$("#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');
  });
}

然后你的 View (或者更好的 EditorTemplate 对于 SubModel 类型)也可以生成如下代码:

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

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