Introduction

This article explains how to pass multiple Models from View to Controller, in MVC, using AJAX.

Background

In MVC application, we use multiple Models based on the requirement of our application. We can pass as many Models from Controller to View as we want. At the same time, we can pass many Model values from View to Model. This article explains how to pass multiple model values from View to Controller, using jQuery with the help of AJAX.

Steps for passing multiple Models -

Step 1 - Open Microsoft Visual Studio, open new project, and give project a name.

project

Step 2 - Select MVC project template and click OK.

project

Step 3 - Add a class file in Models folder. Add the classes and properties we need for our application, as shown below.
project
Step 4 - After adding class, add class properties, using the below code.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace PassingMultipleModel.Models {
  6. public class Customer {
  7. public int CustomerId {
  8. set;
  9. get;
  10. }
  11. public string CustomerName {
  12. set;
  13. get;
  14. }
  15. public string Address {
  16. set;
  17. get;
  18. }
  19. }
  20. public class Employee {
  21. public int EmployeIeId {
  22. set;
  23. get;
  24. }
  25. public string EmployeeName {
  26. set;
  27. get;
  28. }
  29. public string Address {
  30. set;
  31. get;
  32. }
  33. }
  34. public class Common {
  35. public Customer customer {
  36. set;
  37. get;
  38. }
  39. public Employee employee {
  40. set;
  41. get;
  42. }
  43. }
  44. }
Step 5 - There are three files in the class files. The first class is “Customer” and the second class is “Employee”. We cannot pass multiple classes from Controller to View separately, so we combine two classes using another class and send that to the View.

class

Step 6 - Add Controller, then add action methods in Controller. Add View for corresponding action methods and add the below code.
  1. @model PassingMultipleModel.Models.Common
  2. @ {
  3. ViewBag.Title = "Index";
  4. } <h2> Customer </h2>
  5. <table>
  6. <tr> <td> Customer Id </td><td>@Html.TextBoxFor(m=>m.customer.CustomerId)</td> </tr>
  7. <tr> <td> Customer Name </td><td>@Html.TextBoxFor(m => m.customer.CustomerName)</td> </tr>
  8. <tr> <td> Address < /td><td>@Html.TextBoxFor(m => m.customer.Address)</td> </tr>
  9. </table>
  10. <h2> Employee </h2>
  11. <table>
  12. <tr> <td> Employee Id < /td><td>@Html.TextBoxFor(m => m.employee.EmployeIeId)</td> </tr>
  13. <tr> <td> Employee Name </td><td>@Html.TextBoxFor(m => m.employee.EmployeeName)</td > </tr>
  14. <tr> <td> Address </td><td>@Html.TextBoxFor(m => m.employee.Address)</td> </tr>
  15. </table >
  16. <button type = "button" id = "btnSubmit">Submit</button>
Step 7 - Add JsonResult method in Controller. We are passing the values from View to this JsonResult method, using AJAX.
  1. using PassingMultipleModel.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7. namespace PassingMultipleModel.Controllers {
  8. public class DemoController: Controller {
  9. // GET: Demo
  10. public ActionResult Index() {
  11. return View();
  12. }
  13. public JsonResult Process(Common model) {
  14. return Json(JsonRequestBehavior.AllowGet);
  15. }
  16. }
  17. }
Step 8 - We can get nested class properties id in jQuery, using “@Html.IdFor()”. The following way, we can read nested class properties value.

var EmpId = $('#@Html.IdFor(m=>m.employee.EmployeeId)').val();
Step 9 - Add the below jQuery code in button click event, for passing multiple Models using AJAX, from View to Controller.
  1. <script>
  2. $("#btnClick").click(function() {
  3. var customer = {
  4. CustomerId: $('#@Html.IdFor(m=>m.customer.CustomerId)').val(),
  5. CustomerName: $('#@Html.IdFor(m=>m.customer.CustomerName)').val(),
  6. Address: $('#@Html.IdFor(m=>m.customer.Address)').val()
  7. }
  8. var employee = {
  9. EmployeIeId: $('#@Html.IdFor(m=>m.employee.EmployeeId)').val(),
  10. EmployeeName: $('#@Html.IdFor(m=>m.employee.EmployeeName)').val(),
  11. Address: $('#@Html.IdFor(m=>m.employee.Address)').val()
  12. }
  13. var model = {
  14. "customer": customer,
  15. "employee": employee
  16. }
  17. alert(model)
  18. $.ajax({
  19. type: "post",
  20. url: "/Demo/Process",
  21. data: model,
  22. datatype: "json",
  23. cache: false,
  24. success: function(data) {
  25. alert("You Multiple Data Passed Successfully");
  26. },
  27. error: function(xhr) {
  28. alert('No Valid Data');
  29. }
  30. });
  31. });
  32. </script>
Explanation

We create JSON object like the below one. Class object name and JSON variable name should be equal. Similarly, class properties and JSON properties should be equal.

We have created the customer class with the following code. Similarly, we created object for Customer class in another one class like Common.
  1. public class Customer {
  2. public int CustomerId {
  3. set;
  4. get;
  5. }
  6. public string CustomerName {
  7. set;
  8. get;
  9. }
  10. public string Address {
  11. set;
  12. get;
  13. }
  14. } {
  15. public int EmployeeId {
  16. set;
  17. get;
  18. }
  19. public string EmployeeName {
  20. set;
  21. get;
  22. }
  23. public string Address {
  24. set;
  25. get;
  26. }
  27. }
  28. public class Common {
  29. public Customer customer {
  30. set;
  31. get;
  32. }
  33. public Employee employee {
  34. set;
  35. get;
  36. }
  37. }
In jQuery, we can fetch and store the data in variable as JSON format, the values stored in class properties.
  1. var customer = {
  2. CustomerId: $('#@Html.IdFor(m=>m.customer.CustomerId)').val(),
  3. CustomerName: $('#@Html.IdFor(m=>m.customer.CustomerName)').val(),
  4. Address: $('#@Html.IdFor(m=>m.customer.Address)').val()
  5. }
  6. var employee = {
  7. EmployeIeId: $('#@Html.IdFor(m=>m.employee.EmployeeId)').val(),
  8. EmployeeName: $('#@Html.IdFor(m=>m.employee.EmployeeName)').val(),
  9. Address: $('#@Html.IdFor(m=>m.employee.Address)').val()
  10. }
  11. We can store multiple set of Json data store in single variable as like below code in JQuery.
  12. var model = {
  13. "customer": customer,
  14. "employee": employee
  15. }

properties
Step 10 - Now, build and run the solution. After running it, we can see the main page. Here, enter the value and click Submit button.

properties
Step 11 - Now, put break point and you can see the values that were entered in View, in Controller.

controller
controller

After successful processing, the success message appears.

Conclusion

Conclusion - I hope this article helps many developers and students to know how to pass multiple Models passing from View to Controller, using AJAX. If you have any query, please ask me.