MVC - 将动态添加的控件绑定到模型中的 List<T>

Posted 2023-03-05

【中文标题】MVC - 将动态添加的控件绑定到模型中的 List<T>

【英文标题】：MVC - Binding dynamically added controls to a List<T> in a Model

【发布时间】：2016-11-04 00:31:28

【问题描述】：

将 MVC 5 与 Razor (.cshtml) 视图结合使用

模型中有一个值列表，需要最终从视图中的控件获取数据并将它们附加到列表中。

例如：

模型包含：public List<string> value get; set;

列表最多允许包含 70 个值，但可以包含更少。

在视图中有一个按钮可以动态添加@html.editorfor 字段，就像这样：

对于创建的每个新字段，其对应的值必须附加到List<string> value。所以在这个例子中，

用户点击“添加字段”，出现新的文本框，输入“第1行”

提交时，该字段将发布到值列表的第一个索引，如下所示：value[0] = "Line 1"

用户再次单击“添加字段”以添加另一个值 - 他输入“第 2 行”

提交后，该字段将发布到值列表的第二个索引，如下所示：value[1] = "Line 2"

用户最多可以添加 70 个字段（即他可以单击“添加字段”65 次以将 65 个值添加到值列表中）

以这种方式绑定数据的最快和最有效的方法是什么？

【问题讨论】：

在您的按钮.click() 事件中，只需将<input type="text" name="value" /> 动态添加到DOM。如果集合是 string（或任何其他简单值类型）的集合，则不需要索引器

【参考方案1】：

在您提交之前，请确保这些动态添加的输入具有正确的模型名称，您应该没问题。因此，在您的示例中，它将类似于以下内容：

   <input type="text" name="value[0]" value="Line 1"/>
   <input type="text" name="value[1]" value="Line 2"/>
   <input type="text" name="value[3]" value="Line 3"/>

模型绑定器将自动创建一个string 列表，其中包含这 3 个字符串（“Line 1”、“Line 2”、“Line 3”），并将其分配给相应的属性，在这种情况下， value.

编辑：这是您的 addField 函数的样子：

 function addField()
    var addedFieldCount=$('input.dynamic-field').length;
    if(addedFieldCount==70)//But you should check it on the server side too.
       alert('No more field allowed');
       return;
    
    $('#fieldContainer').append('<input name="value['+addedFieldCount+']"/>');
 

就是这样。如果你称之为硬编码，那就去调用它。

EDIT2：正如 Stephen Muecke 所指出的，当您处理 string 的集合时，您不需要索引器。 （我不知道:)）。所以你的功能变得更加简单：

 function addField()
    var addedFieldCount=$('input.dynamic-field').length;
    if(addedFieldCount==70)//But you should check it on the server side too.
       alert('No more field allowed');
       return;
    
    $('#fieldContainer').append('<input name="value"/>');
     

【讨论】：

另外你不知道用户想要输入多少字段，因此你不知道要在视图中放置多少<input type="text"/>

@Collat​​eral.dmg，当我发布我的答案时，OP 没有提供更多信息。他只需要将客户端的值绑定到模型。

此外，如果您希望内置模型绑定将 DOM 输入值与模型值匹配，您必须为您的请求提供具有相应模型名称的输入。确定如何填充这些输入是客户端的工作。为了限制它们，在这种情况下最多允许 70 个输入，您可以使用客户端或服务器端验证或这两者的组合。

请注意，您不需要附加索引器，因为该属性只是List<string>（最好不要添加它们，因为它还可以灵活地删除文本框）

我的模型值始终是null。我认为这是因为我的自定义输入没有属性value。默认情况下，输入元素不会自行创建属性value。我可以使用 js/jQuery API 获取值，但模型绑定不起作用。有吗？