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

时间:2016-07-01 14:34:14

标签: c# html asp.net-mvc razor data-binding

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

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

例如:

模型包含:public List<string> value { get; set; }

列表最多可包含70个值,但可以包含更少的值。

视图中,您有一个动态添加@Html.editorfor字段的按钮,如下所示:enter image description here

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

用户点击&#34;添加字段&#34;,出现新文本框,然后他进入&#34;第1行&#34;

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

用户点击&#34;添加字段&#34;再次添加另一个值 - 他进入&#34;第2行&#34;

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

用户可以添加最多70个字段(即他可以点击&#34;添加字段&#34; 65次以将65个值添加到值列表中)

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

1 个答案:

答案 0 :(得分:5)

在您提交之前,请确保这些动态添加的输入具有正确的型号名称,您应该没问题。所以在你的例子中,它将类似于此:

   <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个字符串的string列表(&#34;第1行和第34行;&#34;第2行和第34行;&#34;第3行&## 34;)在其中并将其分配给相应的属性,在本例中为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"/>');
 }