How to fill dropdown in ASP.NET MVC 3?

• Download demo - 622 KB
• Download demo - 664.1 KB

Q) How to fill dropdown in ASP.NET MVC 3?  

The DropDownList control is used to create a drop-down list. Each selectable item in a DropDownList control is defined by a ListItem element. SelectListItem consist of the text and value pair. Text is display on the dropdown list where each text is assigning with value that server is known. MVC 3 provide Html.DropDownList helper method that have overload DropDownList(String name, IEnumerable<SelectListItem> selectList) where name is the id of the dropdownlist and selectList is list items. 

Consider table name:- Students 

Column Name  

• Rollnumber [Primary Key] 
• Name
• Division

We are displaying student name in dropdown text and store rollnumber as value. When user select student name it's division will get display in textbox. As rollnumber is primary key two students having same name can be differentiate based on rollnumber. Let's start building our requirement. 

Let's create simple ViewModel class name student. Our view display drop down list which accept collection of SelectListItem let's create property for list of SelectListItem. 

namespace DropDownListDemo.ViewModel
{
    public class Student
    {
        public IList<SelectListItem> Drp_Names { get; set; }
    }
} 

I have use ADO.NET Entity data model [.edmx file] and created the context class of entities. Let's fetch rollnumber and name of student from student_db table and assign to property Drp_Names.

DemoEntities demoContext = new DemoEntities();
public ActionResult FillDropDwon()
{
    Student student=new Student();
    student.Drp_Names = (from s in demoContext.Student_db
                         select new SelectListItem()
                         {
                             Text = s.Name,
                             Value =SqlFunctions.StringConvert((double)s.RollNumber)
                         }).ToList<SelectListItem>();
    return View(student);
}

I have pass Student class object to view as model. Let's create strongly typed view of  Student Class.

@model DropDownListDemo.Bisiness.Student
@{
    ViewBag.Title = "FillDropDwon";
}

<h2>FillDropDwon</h2>
@Html.DropDownList("StudentsList", Model.Drp_Names, "Select", new {onchange="GetDiv()"})
<br />
Student Division:- @Html.TextBox("myTextBox") 

Now we have fill our dropdownlist with student name as text and rollnumber as value. On change of the text in dropdownlist we will display student division in the textbox. Let's write jQuery function GetDiv that will trigger on OnChange event of DropDownList.

<script>
    function GetDiv() {
        var rollNumber = $('#StudentsList').val();
        $.ajax(
        {
         type: "POST",
         url: "@Url.Action("GetDivOfStudent","Home")",
         dataType: 'text',
         data: { id: rollNumber },
         success: function (result) {
             $('#myTextBox').val(result);      
         },
        error: function (req, status, error) {
            alert("Coudn't load partial view"+error+req);
        }
});
}</script> 

jQuery function will make Ajax call to the action method GetDivOfStudent(int id). Action method GetDivOfStudent accept rollnumber as argument. Rollnumber is primary key, let's retrieved division based on rollnumber of student and return division of student to the Ajax call. On success of Ajax call let's assign division to the textbox.  

[HttpPost]
public ActionResult GetDivOfStudent(int id)
{
    var div = (from s in demoContext.Student_db
               where s.RollNumber == id
               select s.Div).FirstOrDefault();
    return Content(div);
} 

Please have a look at attached code for more clarity. Happy coding .