I got a request from one of my friend to write this
requirement.
In this article I am going to show how we can show
records by selecting drop down list in MVC asp.net, jQuery, JSON.
Open Visual Studio -> File -> New Project
Image 1.
Image 2.
Below is my data table from which I will fill my drop
down list with City Column value.
Image 3.
Data in my table.
Image 4.
Now Add a ADO.NET Entity Data Model.
Image 5.
Image 6.
Image 7.
Image 8.
Image 9.
Image 10.
Image 11.
Now Right click on Model Folder-> Add New Class
-> Employee.cs and do below code
Image 12.
Now add a new controller -> EmployeeController
Image 13.
Image 14.
Image 15.
Do
below code in EmployeeController:
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
ShowListData_jQuery_JSON_MVC.Models;
namespace
ShowListData_jQuery_JSON_MVC.Controllers
{
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult Index()
{
CompanyDBEntities db = new CompanyDBEntities();
Employee _model = new Employee();
var managerList =
db.Emp_Information.GroupBy(x => x.City).Select(g=>g.FirstOrDefault());
_model.ManagerEmployeeList = (from d in
managerList.Distinct()
select new SelectListItem
{
Value = d.City.ToString(),
Text = d.City
}).ToList();
ViewBag.EMPCity =
_model.ManagerEmployeeList;
return View();
}
public JsonResult GetEmployeeList(string city)
{
CompanyDBEntities obj = new CompanyDBEntities();
var contacts = obj.Emp_Information.Where(rec
=> rec.City.Equals(city)).Select(x => new
{
Id = x.EMP_ID,
Name = x.Name,
ProjectName = x.ProjectName,
ManagerName = x.ManagerName,
city = x.City
}).ToList();
return Json(contacts, JsonRequestBehavior.AllowGet);
}
}
}
Add a new View with Index Action
Method:
@{
ViewBag.Title = "Showing
Record with Cascading Drop Down List Using MVC jQuery JSON";
}
<h1>
Showing Record with Cascading Drop Down
List Using MVC jQuery JSON
</h1>
@using (Html.BeginForm("Index", "Employee", FormMethod.Get))
{
<table cellspacing="2" cellpadding="2">
<tr>
<td>
Select City To Get Employee
List :
</td>
<td>
@Html.DropDownList("EMPCity", "Select
City")
</td>
</tr>
</table>
<br />
<div>
<table id="tblEmpoyees" class="tblEmpoyees" style="width:100%">
<thead>
<tr>
<th align="left" class="empTableTH">Employee ID</th>
<th align="left" class="empTableTH">Name</th>
<th align="left" class="empTableTH">Project</th>
<th align="left" class="empTableTH">Manager Name</th>
<th align="left" class="empTableTH">City</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#EMPCity").change(function () {
$("#tblEmpoyees
tbody tr").remove();
$.ajax({
type: 'POST',
url: '@Url.Action("GetEmployeeList")',
dataType: 'json',
data: { city: $("#EMPCity").val() },
success: function (data) {
var items = '';
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td
class='empTableTD'>" + item.Id + "</td>"
+ "<td
class='empTableTD'>" + item.Name + "</td>"
+ "<td
class='empTableTD'>" + item.ProjectName + "</td>"
+ "<td
class='empTableTD'>" + item.ManagerName + "</td>"
+ "<td
class='empTableTD'>" + item.city + "</td>"
+ "</tr>";
$('#tblEmpoyees
tbody').append(rows);
});
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message:
"
+ r.Message);
}
});
return false;
})
});
</script>
<style type="text/css">
.tblEmpoyees {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: white;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
.empTableTH {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ff6a00;
}
.empTableTD {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #0094ff;
}
</style>
}
Now
Run your Application:
Image 16.
Image 17.
Image 18.
Image 19.
Image 20.