Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
499 views
in Technique[技术] by (71.8m points)

c# - MVC - Binding dynamically added controls to a List<T> in a Model

Using MVC 5 with a Razor (.cshtml) view

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.

For example:

The model contains: public List<string> value { get; set; }

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

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

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

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

  • When submitted, this field will post to the first index of the value list like so: value[0] = "Line 1"

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

  • When submitted, this field will post to the second index of the value list like so: value[1] = "Line 2"

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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.

EDIT: 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.

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...