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

问题描述

将MVC 5与Razor(.cshtml)视图一起使用

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

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<string> value { get; set; }

列表最多可以包含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<string> value.所以在这个例子中，

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

用户单击添加字段"，出现新的文本框，然后输入第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 you 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屋！