C# 在MVC表单中动态添加元素

我正在从事一个asp.NETMVC-5项目。我有以下c#模型：

公共类设置
{
公共int Id{get；set；}
公共字符串名称{get；set；}
公共字符串值{get；set；}
public int ParentId{get；set；}
公共列表子项{get；set；}
}

我正在razor视图上使用EditorTemplates渲染此模型，如前所述。现在我想动态添加删除设置节点，如：

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

---

应该添加的节点是这样一种方式，默认模型绑定器可以将其映射到正确的位置，是否有人可以向我解释如何执行此操作？

我建议您不要添加/删除节点，而是隐藏/显示它们

---

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

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

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

<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表单元素，如

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

看法

显然，更改

AddButton

和

SomeElement

选择器以满足您的需要。

---

您还需要确保用于创建现有设置的编辑器模板包括

Settings[].Index

属性。

但用户需要添加的技能有20项，您只需隐藏15项添加任何标记为已删除项的现有项仍会发回，以便不会在存储库中删除它们！

Luck

节点的name属性包含值

设置[1]。子设置[0]。子设置[0]。子设置[0]。子设置[0]。name

和您的虚拟节点仅包含一个级别的索引，我们如何确定节点的当前级别？这变得有点困难，尤其是如果它是一个永无止境的层次结构。我认为您实际上需要创建我在上面使用jquery基于当前层次结构级别硬编码的html元素。第一个想法是获取与

Add

按钮关联的

设置

元素，提取它们的名称属性-例如

var name=$（this.prev（）.attr（'name'））

-可能是

设置[2]。子设置[1]。名称

然后使用“.split（“.”）提取部分并构造一个新的名称属性，该属性可用于动态创建新元素Sunfair Dect-I compensated-下次如果发现这种情况，请类似地执行。

<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"/>

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