MVC - 将动态添加的控件绑定到 List<T>在模型中 [英] MVC - Binding dynamically added controls to a List&lt;T&gt; in a Model

问题描述

在 Razor (.cshtml) 视图中使用 MVC 5

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

You have a list of values in a model that needs to ultimately get data from a control in the view and append them to the list.

例如:

模型包含:public List;价值{得到;放;}

列表最多可以包含 70 个值，但可以包含更少.

The List is allowed to contain up to 70 values, but can contain less.

在视图中，您有一个按钮可以动态添加@Html.editorfor 字段，很像这样:

In the view you have a button that dynamically adds @Html.editorfor fields, much like this:

对于创建的每个新字段，必须将其对应的值附加到 List;价值.所以在这个例子中，

For each new field that is created, it's corresponding value must be appended to the List<string> value. So in this example,

用户点击Add Field"，出现新的文本框，输入Line 1"

The user clicks "Add Field", the new text box appears, and he enters "Line 1"

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

用户点击添加字段"；再次添加另一个值 - 他输入第 2 行"

The user clicks "Add Field" again to add another value - he enters "Line 2"

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

用户最多可以添加 70 个字段(即他可以单击添加字段"65 次以将 65 个值添加到值列表中)

The User can add UP TO 70 fields (i.e He can click "add field" 65 times to add 65 values to the value list)

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

What would be the quickest and most efficient way to bind the data in this manner?

推荐答案

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

Before you submit make sure those dynamically added inputs have correct model names and you should be fine. So in your example it would be something similar to this:

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

模型绑定器将自动创建一个包含这 3 个字符串(第 1 行"、第 2 行"、第 3 行")的 string 列表并将其分配给相应的属性，在本例中为 value.

And the model binder will automatically create a List of string with those 3 strings ("Line 1","Line 2","Line 3") in them and assign it to the corresponding property, in this case, value.

这是您的 addField 函数的样子:

Here's how your addField function could look like to do just that:

 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+']"/>');
 }

仅此而已.如果你称它为硬编码，那就去调用它.

That's all. If you call it hard coding then go call it.

正如 Stephen Muecke 所指出的，当您处理 string 的集合时，您不需要索引器.(我不知道这一点:)).所以你的函数变得更加简单:

As Stephen Muecke noted, you do not need indexer when you're dealing with a collection of string. (I was not aware of that :)). So your function becomes even simpler:

 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"/>');
 }    

这篇关于MVC - 将动态添加的控件绑定到 List<T>在模型中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！