in this article, I will show you different ways to bind the dropdown list in asp.net mvc
model class :
public class Employee
{
public int EmployeeId { get; set; }
public string EmployeeName { get; set; }
}
controller :
public enum Department
{
Technical=1,
Sales=2
}
struct DepratmentEnum
{
public int Value { get; set; }
public string Text { get; set; }
}
public ActionResult Index()
{
//First Way:
var EmployeeList = new List<SelectListItem>();
EmployeeList.Add(new SelectListItem
{
Text = "Ajay",
Value = "1"
});
EmployeeList.Add(new SelectListItem
{
Text = "Ganesh",
Value = "2"
});
ViewBag.EmployeeList = new SelectList(EmployeeList, "Value", "Text");
//Second Way:
var EmployeeList2 = new List<SelectListItem>() {
new SelectListItem {
Text = "Ashish", Value = "3"
},
new SelectListItem {
Text = "Deep", Value = "4"
},
};
ViewData["EmployeeList2"] = EmployeeList2;
//Third Way:
//Manage View(.cshtml) Side Dropdown List , Some Static Data
//Forth Way:
var department = new List<DepratmentEnum>();
foreach (var item in Enum.GetValues(typeof(Department)))
{
department.Add(new DepratmentEnum
{
Value = (int)item,
Text = item.ToString()
});
}
ViewBag.DepartmentList = department;
//Fifth Way:
//Ajax Call Method GetEmployee
return View();
}
public JsonResult GetEmployee()
{
var employee = new List<Employee>()
{
new Employee
{
EmployeeId=1,
EmployeeName = "Hitesh"
},
new Employee
{
EmployeeId=2,
EmployeeName = "Janak"
},
};
return Json(employee,JsonRequestBehavior.AllowGet);
}
view :
@model DemoApp.Models.Employee
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<div class="row">
<h4>First Way:</h4>
<div class="col-md-3 col-sm-6 form-group">
<label>
Employee
</label>
@*@Html.DropDownListFor(model => model.EmployeeId, (IEnumerable<SelectListItem>)ViewBag.EmployeeList, "Select Employee", new { @class = "form-control "})*@
@Html.DropDownListFor(model => model.EmployeeId, ViewBag.EmployeeList as SelectList, "", new { @class = "form-control select2" })
</div>
<hr />
</div>
<div class="row">
<h4>Second Way:</h4>
<div class="col-md-3 col-sm-6 form-group">
<label>
Employee
</label>
@Html.DropDownList("EmployeeList2", (IEnumerable<SelectListItem>)ViewData["EmployeeList2"], "", new { @class = "form-control select2" })
</div>
</div>
<div class="row">
<h4>Third Way:</h4>
<div class="col-md-3 col-sm-6 form-group">
<label>
Employee
</label>
@Html.DropDownList("EmployeeList3", new []
{
new SelectListItem{ Text="Rahul", Value = "5" },
new SelectListItem{ Text="Neha", Value = "6" ,Selected=true},
},"", new { @class = "form-control select2" })
</div>
</div>
<div class="row">
<h4>Forth Way:</h4>
<div class="col-md-3 col-sm-6 form-group">
<label>
Employee
</label>
@Html.DropDownList("DepartmentList", new SelectList(ViewBag.DepartmentList, "Value", "Text"), new { @class = "form-control select2" })
</div>
</div>
<div class="row">
<h4>Fifth Way:</h4>
<div class="col-md-3 col-sm-6 form-group">
<label>
Employee
</label>
@Html.DropDownList("EmployeeList4", new SelectList(Enumerable.Empty<SelectListItem>()), new { @class = "form-control select2" })
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "/Home/GetEmployee",
type: "GET",
success: function (result) {
$(result).each(function () {
$("#EmployeeList4").append($("<option></option>").val(this.EmployeeId).html(this.EmployeeName));
});
},
error: function (data) { }
});
});
$(".select2").select2({
placeholder: "Select employee",
width:'100%'
});
</script>
0 Comments
if you have any doubts , please let me know