Question

我正在开发一个asp.net mvc-5项目。我有以下c＃模型：

public class Settings
{
    public int Id { get; set; }

    public string Name { get; set; }

    public string Value { get; set; }

    public int ParentId { get; set; }

    public List<Settings> SubSettings { get; set; }
}

我使用EditorTemplates按照here解释，在剃刀视图上渲染此模型。现在我想动态添加删除设置节点，如：

enter image description here

当我们点击红色按钮时，元素应该被删除（这很简单，我已经实现了它）当我们点击绿色按钮时，节点应该被添加到适当的位置（这里我需要你的帮助）。

应该添加节点，默认模型绑定器可以将它映射到正确的位置，任何人都可以解释一下我该怎么做？

Answer 1

确保动态添加的元素正确回发以进行绑定的关键是使用索引器。一种方法是创建表示新对象的元素，为它们提供一个伪索引器（因此这个不会回发），然后克隆元素并更新索引。例如

查看

<div id="NewSetting" style="display:none">
  <tr>
    <td><input type="text" name="Settings[#].ID value /></td>
    <td><input type="text" name="Settings[#].Name value /></td>
    <td>.....</td> // more properties of Settings
    <td><input type="hidden" name="Settings[#].Index" value ="%"/></td>
  </tr>
</div>

请注意使用虚拟索引器来防止将其重新发布回来

脚本

$(AddButton).click(function() {
  var index = // assign a unique value
  var clone = $('#NewSetting').clone();
  // Update the index of the clone
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index  + '"'));
  $(SomeElement).append(clone);
}

显然可以更改AddButton和SomeElement选择器以满足您的需求。您还需要确保用于创建现有设置的编辑器模板包含Settings[].Index属性。

Answer 2

我建议你不要添加/删除节点，但要隐藏/显示它们。

在模型中包含所有可能的节点，并在单击按钮时使用jquery显示和隐藏。

Answer 3

您可以通过Javascript执行此操作。您可以使用jQuery克隆现有的dom元素，然后更改名称。或者您可以通过Ajax请求获取新HTML，请参阅此post以获取示例。

因此，HTML / View需要包含每个动态项的索引，例如

<input type="checkbox" name = "Foo[0].Skills" value="true"/>
<input type="checkbox" name = "Foo[1].Skills" value="true"/>
<input type="checkbox" name = "Foo[2].Skills" value="true"/>

或者，您可以使用JavaScript模板引擎动态创建新的HTML表单元素，例如http://handlebarsjs.com/

以MVC格式动态添加元素

3 个答案: