Click here to Skip to main content
14,028,577 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


21 bookmarked
Posted 29 Apr 2014
Licenced CPOL

List Model Binding in MVC

, 6 May 2014
Rate this:
Please Sign up or sign in to vote.
ASP.NET MVC List Model binding


I am new to MVC as I just started working on a project using it. I was stuck on this model binding thingy for a couple of days, so just want to share this experience. Hope it will be useful to other newbies like me.


I have this master-detail (one to many) relationship in one view and the detail is represented by HTML table in which user can add/remove the rows as they like. And I want the Add method in the controller to just accept the model as a parameter. Something like this:

I found this great article here which helped me a lot.

Using the Code

OK, just to make it simple, I will create 2 classes with master-detail relationship in the model class.

I name it AuthorModel:

public class Author
       public Author()
           Books = new List<Book>();
       public string Name { get; set; }
       public List<Book> Books { get; set; }

   public class Book
       public string Title { get; set; }
       public DateTime PublishedDate { get; set; }

Next, we add controller and view into the project:

Controller :

public class AuthorController : Controller
        // GET: /Author/

        public ActionResult Index()
            var model = new Author();
            return View(model);

View :

@using MvcModelBinding.Models
@model MvcModelBinding.Models.Author
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
@using (Html.BeginForm())

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
            <input id="btnAddBook" type="button" 

            onclick="addRow();" value="Add Book" />
                        Published Date
            <tbody id="tbBooks">
            <input type="submit" value="Create" />
    @Html.ActionLink("Back to List", "Index")

Since the idea is we can add/remove the books in the client side, then only submit it to the server after we are satisfied. The client script looks like this:

<script language="javascript" type="text/javascript">
        function addRow() {

                Model.Books.Add(new Book());

            var index = $("#tbBooks").children("tr").length;

            var indexCell = "<td style='display:none'><input name='Books.Index' 
            type='hidden' value='" + index + "' /></td>";
            var titleCell = "<td><input id='Books_" + index + "__Title' 
            name='Books[" + index + "].Title' type='text' value='' /></td>";
            var publishedCell = "<td><input id='Books_" + index + "__Title' 
            name='Books[" + index + "].PublishedDate' type='text' value='' /></td>";
            var removeCell = "<td><input id='btnAddBook' type='button' 
            value='Remove' onclick='removeRow(" + index + ");' /></td>";

            var newRow = "<tr id='trBook" + index + "'>" + 
            indexCell + titleCell + publishedCell + removeCell + "</tr>";

        function removeRow(id) {
            var controlToBeRemoved = "#trBook" + id;

Note that the hidden value part below is necessary to allow arbitrary indices.

var indexCell = "<td style='display:none'>
   <input name='Books.Index' type='hidden' value='" + index + "' /></td>";

If we didn't add this extra hidden input, removing n index in the collection will also remove the subsequent items; for example: if you have 3 items in the collection, removing item number 2 will also remove item number 3.

Now let us add code in the controller to display the result:

public string Index(Author author)
           var sb = new StringBuilder();
               sb.AppendFormat("Author : {0}", author.Name);
               sb.AppendLine("<br />");
               sb.AppendLine("<br />");
               foreach (var book in author.Books)
                   sb.AppendFormat("Title : {0} | Published Date : {1}", book.Title, book.PublishedDate);
                   sb.AppendLine("<br />");
           catch(Exception ex)
               throw ex;

           return sb.ToString();

Observe that the controller only accepts Author model as the parameter.

Here are some of the results:

Delete the second item:

That's it! Hope it helps.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Indonesia Indonesia
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionGreat Thanks Pin
Member 141410345-Feb-19 9:08
memberMember 141410345-Feb-19 9:08 
GeneralMy vote of 4 Pin
Assil14-Dec-15 14:19
professionalAssil14-Dec-15 14:19 
Questionalways getting null model on HttpPost method Pin
kittytaneja3-Sep-15 20:46
memberkittytaneja3-Sep-15 20:46 
QuestionError on removal Pin
Nwolisa8-Mar-15 21:47
memberNwolisa8-Mar-15 21:47 
AnswerRe: Error on removal Pin
atti.b18-Dec-15 5:13
memberatti.b18-Dec-15 5:13 
QuestionA bit more help if possible Pin
papirc13-Jan-15 3:24
memberpapirc13-Jan-15 3:24 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190419.4 | Last Updated 6 May 2014
Article Copyright 2014 by Marthayaputra
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid