jquery - Return a List<E> from a view in view model -

this situation:

i have view model:

public class viewmodel {    public datetime somedate { get; set; }    public string somestring { get; set; }    public list<e> somelist { get; set; } } 

what have in view set date, write text , select list of e number of e. viewmodel returned in action must have date, text , contain list of selected items.

what need know how handle said list. how can add each selected item models' list. thinking on adding property public bool selected e , send items , filter selected ones on server, rather not send , forth data since list can quite large.

i using mvc3 razor , jquery ajax form posts.

if not making myself clear, please let me know.

thank you.

here's 1 technique use achieve this.

let's start view model:

public class viewmodel {     public datetime somedate { get; set; }     public string somestring { get; set; }     public list<e> somelist { get; set; } }  public class e {     public bool selected { get; set; }     public string foo { get; set; }     public string bar { get; set; } } 

then write controller handle rendering of view , ajax request:

public class homecontroller : controller {     public actionresult index()     {         var model = new viewmodel         {             somedate = datetime.now,             somestring = "some text",             somelist = enumerable.range(1, 7).select(x => new e             {                 foo = "foo " + x,                 bar = "bar " + x             }).tolist()         };         return view(model);     }      [httppost]     public actionresult index(viewmodel model)     {         // here our view model bound ,          // list contain items user         // has selected (see below...)          // todo: processing          return content("thanks submitting data", "text/plain");     } } 

then move on ~/views/home/index.cshtml view:

@model viewmodel  @using (html.beginform())  {     <div>         @html.labelfor(x => x.somedate)         @html.editorfor(x => x.somedate)     </div>      <div>         @html.labelfor(x => x.somestring)         @html.editorfor(x => x.somestring)     </div>      <table>         <thead>             <tr>                 <th></th>                 <th>foo</th>                 <th>bar</th>             </tr>         </thead>         <tbody>             @html.editorfor(x => x.somelist)         </tbody>     </table>      <input type="submit" value="send selected values server using ajax" /> } 

and define editor template e type (~/views/home/editortemplates/e.cshtml) rendered each element of collection:

@{     var index = guid.newguid().tostring();     var prefix = regex.replace(viewdata.templateinfo.htmlfieldprefix, @"\[\d+\]$", match =>     {         return string.format("[{0}]", index);     });     viewdata.templateinfo.htmlfieldprefix = prefix; } <input type="hidden" name="somelist.index" value="@index" /> <tr>     <td>         @html.displayfor(x => x.foo)         @html.hiddenfor(x => x.foo)     </td>     <td>         @html.displayfor(x => x.bar)         @html.hiddenfor(x => x.bar)     </td>     <td>         @html.checkboxfor(x => x.selected)     </td> </tr> 

ok, @ stage haven't yet written javascript part should behave normal html form , when submitted send values server.

and final piece ajaxify form , post records user selected in request. in separate javascript file:

$(function () {     $('form').submit(function () {         // clone original form ,         // filter out non-selected fields         var myform = $(this).clone(false, false);          $('tr', myform).each(function () {             var isselected = $(':checkbox', this).is(':checked');             if (!isselected) {                 $(this).remove();             }         });          $.ajax({             url: this.action,             type: this.method,             data: myform.serialize(),             success: function (result) {                 alert(result);             }         });          return false;     }); }); 

as article handling dynamic lists recommend following blog post.