ASP.NET

MVC - Show Record Using Cascading Dropdown List In MVC Using jQuery And JSON

I got a request from one of my friends to write this requirement.

In this article, I am going to show how we can show records by selecting drop down list in ASP.NET MVC, jQuery, JSON.

Open Visual Studio, click File, then New Project,

new

mvc

Below is my data table from which I will fill my DropDown list with City Column value.

value

Data in my table.

table

Now add an ADO.NET Entity Data Model.

model

ef

efd

connection

dbo

table

properties

Now right click on Model Folder, Add New Class, then Employee.cs and write the following code,

code

Now add a new controller, then click EmployeeController

EmployeeController

EmployeeController

EmployeeController

Write the following code in EmployeeController:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using ShowListData_jQuery_JSON_MVC.Models;  
  7. namespace ShowListData_jQuery_JSON_MVC.Controllers  
  8. {  
  9.     public class EmployeeController: Controller  
  10.     {  
  11.         // GET: Employee  
  12.         public ActionResult Index()  
  13.         {  
  14.             CompanyDBEntities db = newCompanyDBEntities();  
  15.             Employee _model = newEmployee();  
  16.             var managerList = db.Emp_Information.GroupBy(x => x.City).Select(g => g.FirstOrDefault());  
  17.             _model.ManagerEmployeeList = (from d in managerList.Distinct() selectnewSelectListItem   
  18.             {  
  19.                 Value = d.City.ToString(),  
  20.                     Text = d.City  
  21.             }).ToList();  
  22.             ViewBag.EMPCity = _model.ManagerEmployeeList;  
  23.             return View();  
  24.         }  
  25.         public JsonResult GetEmployeeList(string city) {  
  26.             CompanyDBEntities obj = newCompanyDBEntities();  
  27.             var contacts = obj.Emp_Information.Where(rec => rec.City.Equals(city)).Select(x => new   
  28.             {  
  29.                 Id = x.EMP_ID,  
  30.                     Name = x.Name,  
  31.                     ProjectName = x.ProjectName,  
  32.                     ManagerName = x.ManagerName,  
  33.                     city = x.City  
  34.             }).ToList();  
  35.             return Json(contacts, JsonRequestBehavior.AllowGet);  
  36.         }  
  37.     }  
  38. }  

Add a new View with Index Action Method:

  1. @   
  2. {  
  3.     ViewBag.Title = "Showing Record with Cascading Drop Down List Using MVC jQuery JSON";  
  4. } < h1 > Showing Record with Cascading Drop Down List Using MVC jQuery JSON < /h1>  
  5. @using(Html.BeginForm("Index", "Employee", FormMethod.Get)) { < tablecellspacing = "2"  
  6.     cellpadding = "2" > < tr > < td > Select City To Get Employee List: < /td> < td > @Html.DropDownList("EMPCity", "Select City") < /td> < /tr> < /table> < br / > < div > < tableid = "tblEmpoyees"  
  7.     class = "tblEmpoyees"  
  8.     style = "width:100%" > < thead > < tr > < thalign = "left"  
  9.     class = "empTableTH" > Employee ID < /th> < thalign = "left"  
  10.     class = "empTableTH" > Name < /th> < thalign = "left"  
  11.     class = "empTableTH" > Project < /th> < thalign = "left"  
  12.     class = "empTableTH" > Manager Name < /th> < thalign = "left"  
  13.     class = "empTableTH" > City < /th> < /tr> < /thead> < tbody > < /tbody> < /table> < /div> < scriptsrc = "~/Scripts/jquery-1.10.2.min.js" > < /script> < scripttype = "text/javascript" > $(document).ready(function() {  
  14.         $("#EMPCity").change(function()  
  15.         {  
  16.             $("#tblEmpoyees tbody tr").remove();  
  17.             $.ajax({  
  18.                 type: 'POST',  
  19.                 url: '@Url.Action("GetEmployeeList")',  
  20.                 dataType: 'json',  
  21.                 data:  
  22.                 {  
  23.                     city: $("#EMPCity").val()  
  24.                 },  
  25.                 success: function(data)  
  26.               {  
  27.                     var items = '';  
  28.                     $.each(data, function(i, item)   
  29.                      {  
  30.                         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>";  
  31.                         $('#tblEmpoyees tbody').append(rows);  
  32.                     });  
  33.                 },  
  34.                 error: function(ex) {  
  35.                     var r = jQuery.parseJSON(response.responseText);  
  36.                     alert("Message: " + r.Message);  
  37.                 }  
  38.             });  
  39.             returnfalse;  
  40.         })  
  41.     }); < /script> < styletype = "text/css" > .tblEmpoyees {  
  42.         font - family: verdana, arial, sans - serif;  
  43.         font - size: 11 px;  
  44.         color: white;  
  45.         border - width: 1 px;  
  46.         border - color: #666666;  
  47.   
  48. border-collapse: collapse;  
  49.   
  50. }  
  51.   
  52. .empTableTH  
  53. {  
  54.   
  55. border-width: 1px;  
  56.   
  57. padding: 8px;  
  58.   
  59. border-style: solid;  
  60.   
  61. border-color: # 666666;  
  62.         background - color: #ff6a00;  
  63.     }.empTableTD {  
  64.         border - width: 1 px;  
  65.         padding: 8 px;  
  66.         border - style: solid;  
  67.         border - color: #666666;  
  68.   
  69. background-color: # 0094 ff;  
  70.     } < /style>  
  71. }  

Now Run your Application:

browser

browser

browser

browser

browser

Read more articles on MVC:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found