以 MVC 形式动态添加元素答案

【问题标题】：Add element dynamically in MVC form以 MVC 形式动态添加元素
【发布时间】：2014-08-14 15:37:56
【问题描述】：

我正在做一个 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; }
}

按照here 的说明，我正在使用 EditorTemplates 在 razor 视图上渲染此模型。现在我想动态添加删除设置节点，例如：

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

应该添加的节点是默认模型绑定器可以将其映射到正确位置的方式，谁能解释我该怎么做？

【问题讨论】：

不公平的行为 - 我补偿 - 下次如果你发现这种情况，同样做。

标签： c# jquery asp.net-mvc

【解决方案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 属性。

【讨论】：

Luck节点的name属性包含值Settings[1].SubSettings[0].SubSettings[0].SubSettings[0].Name，而你的虚拟节点只包含一个级别的索引，我们如何确定节点的当前级别？
这有点困难，特别是如果它是一个永无止境的层次结构。我认为您实际上需要根据当前的层次结构使用 jquery 创建我在上面硬编码的 html 元素。
首先想到的是获取与Add 按钮关联的Setting 元素，提取它们的名称属性 - 例如var name=$(this).prev().attr('name') - 可能是 Settings[2].SubSettings[1].Name 然后使用 `.split('.') 提取部分并构造一个新的名称属性，该属性可用于动态创建新元素

【解决方案2】：

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

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

【讨论】：

但是用户有 20 种他们想要添加的技能，而你只隐藏了 15 个
添加任何标记为已删除的现有项目仍会发回，因此它们不会在存储库中被删除！

【解决方案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/

【讨论】：