List of Model Object Post to Controller in ASP.NET MVC

• Download source (RAR) - 3.3 MB
• Download source (ZIP) - 3.7 MB

Introduction

Several times, we want to post list of model object from view to controller while HttpPost. Many developers try to get the list of data through an array. But I'll tell you without using array also, we can get those list of model objects in a simpler way. Let's go step by step. Create an ASP.NET MVC 4 application. First, create two model classes, for example, EmployeeModelClass.cs and DepartmentModelClass.cs inside Model folder in solution.

Model

public class EmployeeModelClass
    {
        public string Name { get; set; }

        public string Address { get; set; }

        public string Contact { get; set; }

        public IEnumerable<DepartmentModelClass> DeptList { get; set; }                 
    }

    public class DepartmentModelClass
    {
        public string DepartmentCode { get; set; }
        public string DepartmentName { get; set; }
    }  

Controller

public class EmployeeController : Controller
    {
        //
        // GET: /Employee/

        public ActionResult Index()
        {
            return View(new EmployeeModelClass());
        }

        [HttpPost]
        public ActionResult Index(EmployeeModelClass emp, IEnumerable<DepartmentModelClass> dept)
        {
            emp.DeptList = dept;
            return View(emp);
        }
    }

View

Emp Name @Html.TextBox("Name",Model.Name)  <br/>
               Address @Html.TextBox("Address",Model.Address)  <br/>
               Contact @Html.TextBox("Contact",Model.Contact)  <br/>
               <table>
                   <tr>
                       <th>Dept Code</th>
                       <th>Dept Name</th>
                   </tr>
                   @{
                       for (int i = 0; i < 4; i++)
                       {
                           <tr>
                               <td> @Html.TextBox("["+ i +"].DepartmentCode") </td>
                               <td> @Html.TextBox("["+ i +"].DepartmentName")</td>
                           </tr>
                       }
                   }
               </table>

               <input type="submit" value="Submit"/>

Here, I want to get Employee details with list of department names which belong to that employee. The business logic is multiple departments should assign to a single employee.

I hope you understood what I am trying to do here. See the controller. In HttpPost Action, I am not using any array to get the Department list from view page while HttpPost. Simply, I am passing two parameters in HttpPost like below:

[HttpPost]
        public ActionResult Index(EmployeeModelClass emp, IEnumerable<DepartmentModelClass> dept)
        {
            emp.DeptList = dept;
            return View(emp);
        }

See those parameters, EmployeeModelClass emp and IEnumerable<DepartmentModelClass> dept. We can get the employee data from emp object and list of department data from dept object very easily here.

See the view section inside for loop I am putting DepartmentCode and Departmentname four times. This property name should be the same as the property in Model object.

To see the result in output, append the following lines in view page:

@{
                    if (Model.Name != null)
                    {
                        <div>
                    
                            Employee Name : @Model.Name <br/>
                            Address : @Model.Address <br/>
                            Contact : @Model.Contact <br/>
                            
                            @{
                                if (Model.DeptList != null)
                                {
                                  <table>
                                        <tr>
                                            <th>Dept code</th>
                                            <th>Dept Name</th>
                                        </tr>
                                    
                                    @{
                                        foreach (var dept in Model.DeptList)
                                        {
                                            <tr>
                                                <td>@dept.DepartmentCode</td>
                                                <td>@dept.DepartmentName</td>
                                            </tr>
                                        }
                                    }
                                </table>
                            }
                            }

                        </div>
                    }
                }

I have attached a demo source code for this. Thank you. Enjoy programming.