ASP.NET MVC pass multiple models from view to Controller

 

from the background to organize data is then passed to the page actually a matter of course very convenient, because it will be such a demand MVC itself built into this system. I just need to organize one in the background, a variable of type List or IEnumerable, you will need to pass the data model can be thrown to.

 

 

example, here we returned 5 product to view information pages on display, just return that simple.

 

 

 Then we

page effortlessly get backstage pass over the data model, and then can be displayed.

 

 

 

 

But the question is how to return multiple models in turn go back. A form generally only pass a model, we can serialize in JavaScript via ajax multiple models and then pass it back.

 

1. Firstly transformation page, assuming that there are many in the page input box for users to enter information about the model, and to engage in a button to submit.

 

  

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

 

 

 

 

 

 

2. then in JavaScript obtain these input values, and finally all the models into a models variable.

 

  

  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 }); 
    });

 

 

 

Of course, these are written in the button's click event.

 

so complete code should look like this.

 

  

<script type="text/javascript"> 
    $("#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 }); 
        }); 
    }); 
</script>

 

 

 

to where we can add a debugger test have successfully obtained a reception code into the input box value and organizational good model right.

 

press F12 to open the page developer tools, and then try to enter some value in the page, and finally click button.

 

 

 

 

we see that through all the input box, per unit acts as a Product model, pressed into the models variables. This time, models of all the information stored in the variable.

 

3. prepare backstage receive data Action. Of course, we are receiving more than one model, so the receiver type is List << span style = "color: # 2b91af;"> Product >

 

 

  

        public ActionResult ReceiveData(List<Product> products) 
        { 
            string result = products == null ? "Failed" : "Success"; 
            return Content(result); 
        }

 

 

 

4. the final step, the models sent to the background variables via Ajax

 

This step is the most critical, because no written background ajax format is unable to receive the correct data. After my mind consuming research finally come about following ajax code like this:

 

 

  

  $.ajax({ 
        url: '../../Home/ReceiveData', 
        data: JSON.stringify(models), 
        type: 'POST', 
        contentType: 'application/json; charset=utf-8', 
        success: function(msg) { 
            alert(msg); 
        } 
    });

 

 

 

complete front end 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', 
                data: JSON.stringify(models), 
                type: 'POST', 
                contentType: 'application/json; charset=utf-8', 
                success: function(msg) { 
                    alert(msg); 
                } 
            }); 
        }); 
    }) 
</script>

 

 

 

5. Debugging to see the results

 

 

 

results show that we pass over to the front desk to receive each data completed.