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.