ASP. NET MVC passes multiple models from view to controller

It is convenient to organize the data from the background and pass it on to the page, because MVC itself builds such a requirement into the system. I just need to organize a list or IEnumerable variable in the background and throw the data model that needs to be passed in.

Http://www.cnblogs.com/Wayou/p/pass_multi_modes_to_controller_in_MVC.html

For example, here we return 5 product information to the view to show on the page, just return it so simple.

Then on the page we have no difficulty in getting the background data model, and then display it.

But the question is, how can multiple models be sent back to the background. A form typically passes only one model, and we can serialize multiple models in JavaScript and then pass them back through Ajax.

1. First transform the page, assuming that the page has a lot of input boxes for the user to enter information about the model, and a button to submit.

<Table>@foreach (Product item in Model) {<TrId= "@item. ProductID "><Td><InputName= "ProductName"/></Td><Td><InputName= "SupplierID"/></Td><Td><input name= "CategoryID" /> </ td> </tr>}</table><button id= "Go" >go</button>      

2. Then get these input values in JavaScript, and finally consolidate all the models into one models variable.

  var models = [];    function(i, item) {        var ProductName = $ (item). FIND ("[Name=productname]"var SupplierID = $ (item). Find ("[Name=supplierid]"var CategoryID = $ (item). FIND ("[Name=categoryid]" Models.push ({ProductName: ProductName, Supplierid:supplierid, Categoryid:categoryid}); });

These are, of course, written into the Click event of the button.

So the complete code should look like this.

<script type= "Text/javascript" >    $ ("#go"). Click (function() {        var models = [];        functionvar ProductName = $ (item). FIND ("[Name=productname]"var SupplierID = $ (item). FIND ("[Name= SupplierID] "var CategoryID = $ (item). FIND (" [Name=categoryid] "). Val (); Models.push ({ProductName: ProductName, Supplierid:supplierid, Categoryid:categoryid}); }); });</script>         

Here we can add a debugger to test if there is a success in the foreground code to obtain the value of the input box and the organization of the model right.

Press F12 on the page to open the Developer tool, and then try to enter some values on the page, and then click the button.

We see that after all the input boxes have been traversed, they are pressed into the models variable as a product model per unit of behavior. At this time, all the information is saved in the models variable.

3. Prepare the action to receive data in the background. We are of course receiving multiple models, so the receive type is selected for List<Product>

        Public ActionResult Receivedata (list<product> products )        {            "Failed"Success  "return Content (result);}       

4. Last step, transfer the models variable via AJAX to the background

This step is the most critical, because the AJAX format does not write well in the background is not able to receive the correct data. The Ajax code that came out of my mind-racking study was probably the following:

  $.ajax ({        URL: '.. /.. /home/receivedata ',        json.stringify (models),        type: ' POST ',        contentType: ' Application/json ; Charset=utf-8 ',        function(msg) {alert (msg);}});     

The final full foreground code should probably look like this.

<script type= "Text/javascript" >$(function() {$ ("#go"). Click (function() {var models =[]; $.each ($ ("Table tr"),function (I, item) {var ProductName = $ (item). FIND ("[Name= ProductName] "). Val (); var SupplierID = $ (item). FIND ("[Name=supplierid]" ). Val (); var CategoryID = $ (item). FIND ("[Name=categoryid]" ). Val ();  Models.push ({productname:productname, Supplierid:supplierid, Categoryid:categoryid});}); $.ajax ({url: '.. /.. /home/receivedata '  json.stringify (models), type: ' POST '  , success: function             

5. Commissioning See results

The results showed that we received every data from the front desk and finished it.

ASP. NET MVC passes multiple models from view to controller