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,

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

Data in my table.

Now add an ADO.NET Entity Data Model.

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

Now add a new controller, then click EmployeeController

Write the following 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 = newCompanyDBEntities();
            Employee _model = newEmployee();
            var managerList = db.Emp_Information.GroupBy(x => x.City).Select(g => g.FirstOrDefault());
            _model.ManagerEmployeeList = (from d in managerList.Distinct() selectnewSelectListItem
            {
                Value = d.City.ToString(),
                    Text = d.City
            }).ToList();
            ViewBag.EMPCity = _model.ManagerEmployeeList;
            return View();
        }
        public JsonResult GetEmployeeList(string city) {
            CompanyDBEntities obj = newCompanyDBEntities();
            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)) { < tablecellspacing = "2"
    cellpadding = "2" > < tr > < td > Select City To Get Employee List: < /td> < td > @Html.DropDownList("EMPCity", "Select City") < /td> < /tr> < /table> < br / > < div > < tableid = "tblEmpoyees"
    class = "tblEmpoyees"
    style = "width:100%" > < thead > < tr > < thalign = "left"
    class = "empTableTH" > Employee ID < /th> < thalign = "left"
    class = "empTableTH" > Name < /th> < thalign = "left"
    class = "empTableTH" > Project < /th> < thalign = "left"
    class = "empTableTH" > Manager Name < /th> < thalign = "left"
    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() {
        $("#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);
                }
            });
            returnfalse;
        })
    }); < /script> < styletype = "text/css" > .tblEmpoyees {
        font - family: verdana, arial, sans - serif;
        font - size: 11 px;
        color: white;
        border - width: 1 px;
        border - color: #666666;

border-collapse: collapse;

}

.empTableTH
{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: # 666666;
        background - color: #ff6a00;
    }.empTableTD {
        border - width: 1 px;
        padding: 8 px;
        border - style: solid;
        border - color: #666666;

background-color: # 0094 ff;
    } < /style>
}

Now Run your Application:

Read more articles on MVC:

• MVC Dynamic Bar And Line Chart Using WEB API, AngularJS And JQuery
• Paging And Sorting In jTable Using MVC