Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

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

0.00/5 (No votes)
21 Dec 2014 3  
Model and list object post to controller in ASP.NET MVC

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here