Click here to Skip to main content
15,300,827 members
Articles / Web Development / HTML
Tip/Trick
Posted 21 Dec 2014

Stats

137.7K views
2.3K downloads
8 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
4.47/5 (12 votes)
21 Dec 2014CPOL1 min read
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

C#
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

C#
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

HTML
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:

C#
[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:

HTML
@{
                    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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Saswat Mohanty
Software Developer
India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 1354485823-Apr-18 19:24
MemberMember 1354485823-Apr-18 19:24 
QuestionExacly what i needed thanks Pin
Member 1279922918-Oct-16 3:16
MemberMember 1279922918-Oct-16 3:16 
QuestionThanks Pin
Member 113663928-May-16 0:21
MemberMember 113663928-May-16 0:21 
QuestionWhy It's too hard Pin
yearmix4-Mar-15 5:07
Memberyearmix4-Mar-15 5:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.