Altaf Khatri
Altaf Khatri



RSS feed for http://www.AltafKhatri.com website. Twitter account of http://www.AltafKhatri.com website.
∗Recently Added - How to take care of Betta fighter fish and increase life span?  10/30/2013


Find me on web

 LinkedIn

 Facebook

 Twitter

How to bind and get list of objects in ASP.NET MVC postback?

I love ASP.NET MVC and the ease and cleanliness that it offers makes it more adorable to me.

Recently, I was working on a project and was facing this situation where I wanted to bind the list of objects to the page and get the value of the list of modified or new objects of the list back to the server in postback.

This was quite challenging and after lots of patience I was able to figure out the intricacies of ASP.NET MVC with binding ILIST object to the ASP.NET MVC view and getting its value in postback.
An example of this scenario could be academic history of a student. Academic history will capture all the schools and colleges attended by a student. In our case, to make it simple I am considering collegeDetails object as the object containing college name and the year attended.

I have an object called as the coverobject that encapsulates all the objects of the view page. It includes the student name, age, year of birth and the list of college details. Also we have the action button value property field defined in the coverobject. Action button value property defines various actions that the postback needs to handle. Please note, I have all the submit buttons of the page assigned the same name.
CoverObject of the view page defines all the properties and logic grouped elements of the page encapsulated in one object. In the controller, the important thing is how you define the cover object. Remember to make the properties of the coverobject with get and set properties otherwise the values won't be assigned to it in postback.

In the view page, the important thing to look for is the naming convention of the controls. The name of the control maps to the model state object name. For the naming convention of the IList we need to have the index defined for each object in the list and the same index should be used for all the properties of that object.

Here is the sample of the controller of the page:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

using MvcApplication18.Controllers;

 

namespace MvcApplication18.Controllers

{

    public class CoverObject

    {

        public CoverObject()

        {

            List<string> years = new List<string>();

            years.Add("1982");

            years.Add("1983");

            years.Add("1984");

 

            ListOfYear = new SelectList(years);

 

            ListOfCollegeDetails = new List<CollegeDetails>();

          

            FormAction = string.Empty;

 

            this.CollegeDetails = new CollegeDetails();

            this.CollegeDetails.CollegeName = string.Empty;

            this.CollegeDetails.Year = null;

        }

 

        public string Name { get; set; }

        public int? Age { get; set; }

        public int YearOfBirth { get; set; }

        public SelectList ListOfYear { get; set; }

       

        //List of college details

        public List<CollegeDetails> ListOfCollegeDetails { get; set;}

 

        //Used to determine different functions on the page

        public string FormAction { get; set; }

       

        //Used for Add New functionality

        public CollegeDetails CollegeDetails { get; set; }

    }

 

    public class CollegeDetails

    {

        public string CollegeName { get; set; }

        public int? Year { get; set; }

    }

 

    public class ListInAObjectController : Controller

    {

        public ActionResult Create()

        {

            CoverObject coverObject = new CoverObject();

            coverObject.ListOfYear = new SelectList(coverObject.ListOfYear, "Text", "Text");           

            return View(coverObject);

        }

 

       

        // POST: /ListInAObject/Create

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Create(CoverObject coverObject)

        {

            if (coverObject.FormAction.Equals("AddNewCollegeDetail"))

            {

                CoverObject coverObjectNew = new CoverObject();

                coverObjectNew.ListOfCollegeDetails = coverObject.ListOfCollegeDetails;

                coverObjectNew.Name = coverObject.Name;

                coverObjectNew.Age = coverObject.Age;

                coverObjectNew.YearOfBirth = coverObject.YearOfBirth;

                coverObjectNew.ListOfYear = new SelectList(coverObjectNew.ListOfYear, "Text", "Text", coverObjectNew.YearOfBirth);

                

                if (!string.IsNullOrEmpty(coverObject.CollegeDetails.CollegeName))

                {

                    coverObjectNew.ListOfCollegeDetails.Add(coverObject.CollegeDetails);

                }

 

                return View(coverObjectNew);

            }

 

            //Perform someother action here

            return View(coverObject);

        }

    }

}

 

Here is the sample of the view of the page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication18.Controllers.CoverObject>" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

      Create

</asp:Content>

 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

 

    <h2>Create</h2>

 

    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

 

    <% using (Html.BeginForm()) {%>

 

        <fieldset>

            <legend>Fields</legend>

            <p>

                <label for="Name">Name:</label>

                <%= Html.TextBox("coverObject.Name", Model.Name)%>

                <%= Html.ValidationMessage("coverObject.Name", "*")%>

            </p>

            <p>

                <label for="Age">Age:</label>

                <%= Html.TextBox("coverObject.Age", Model.Age.ToString())%>

                <%= Html.ValidationMessage("coverObject.Age", "*")%>

            </p>

            <p>

                <label for="YearOfBirth">Year Of Birth:</label>

                <%= Html.DropDownList("coverObject.YearOfBirth",Model.ListOfYear)%>

            </p>

           

           

           

            <fieldset><legend>List Of College Details:</legend>

            <%int index = 0;

              foreach (var item in Model.ListOfCollegeDetails)

              {

            %>

                <input type="hidden" name="coverObject.ListOfCollegeDetails.Index" value="<%=index.ToString()%>" />    

                <input type="text" name="coverObject.ListOfCollegeDetails[<%=index.ToString() %>].CollegeName" value="<%=item.CollegeName %>" />

                <input type="text" name="coverObject.ListOfCollegeDetails[<%=index.ToString() %>].Year" value="<%=item.Year %>" />

            <%

                index++;

              } %>

             

             

              Add New College Details:<br />

              <p>

                  <input type="text" name="coverObject.CollegeDetails.CollegeName" value="<%=Model.CollegeDetails.CollegeName %>" />

                  <input type="text" name="coverObject.CollegeDetails.Year" value="<%=Model.CollegeDetails.Year %>" />

                  <input type="submit" name="coverObject.FormAction" value="AddNewCollegeDetail" />

              </p>

               

            </fieldset>

          

          

           

            <p>           

                <input type="submit" name="coverObject.FormAction" value="Create" />

            </p>

        </fieldset>

 

    <% } %>

 

    <div>

        <%=Html.ActionLink("Back to List", "Index") %>

    </div>

 

</asp:Content>

 

After understanding the naming convention of the controls in the view of the page, it looks simple to bind Ilist in ASP.NET MVC postback.

Sample Application

Attached is a sample application to show how to bind and get list of objects in ASP.NET MVC postback.
Sample application can be found at:Sample application about how to bind and get list of objects in ASP.NET MVC
View the webcast at:Webcast of the sample application

or read here for more details - The application uses a local SQL server database(included within the application). It creates a new course and inserts course details in the database. Course details contains of course name, course description, course created date and the list of objects in this course tags.

Insert values into course tag name and course tag value and click Add New course tag. Once you add course tag, it will get included in the list of course tags. You can add as many course tags as you want.

After you enter details click on Save and it will take you to the View Mode of the page. You can edit the course by clicking the Edit link.

Sample application can be found at:Sample application about how to bind and get list of objects in ASP.NET MVC
View the webcast at:Webcast of the sample application





SiteMap  |  Contact Me