Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

MVC - Show Record using cascading Drop down list in MVC using jQuery and JSON

Article:
Viewed:  1123 
Posted On:  4/2/2016 4:17:36 AM 
Using jQuery, JSON, MVC ASP.NET Show record on selecting value from drop down list. 

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

1.png

Image 1.

2.png

Image 2.

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

3.png

Image 3.

Data in my table.

4.png

Image 4.

Now Add a ADO.NET Entity Data Model.

5.png

Image 5.

6.png

Image 6.

7.png

Image 7.

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

11.png

Image 11.

Now Right click on Model Folder-> Add New Class -> Employee.cs and do below code

12.png

Image 12.

Now add a new controller -> EmployeeController

13.png

Image 13.

14.png

Image 14.

15.png

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:

16.png

Image 16.

17.png

Image 17.

18.png

Image 18.

19.png

Image 19.

20.png

Image 20.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us