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 .