Cascading DropDownList with HTML helper DropDownList using jQuery in ASP.Net MVC

Last Reply one day ago By dharmendr

Posted 5 days ago

How to create dependent Dropdownlist with helper dropdownlist(without using dropdownlistfor) using jquery in mvc


Posted one day ago

Hi rani,

I have created a sample that full-fill your requirement.

Refer the below sample code. You need to bind the record from database.

Models

State Model

namespace Cascading_DropDownList.Models
{
    public class State
    {
        public string StateName { get; set; }
        public string CountryName { get; set; }

        public static IQueryable<State> GetState()
        {
            return new List<State>
            {
                new State { CountryName = "USA", StateName = "Alabama" },
                new State { CountryName = "USA", StateName = "Arizona" },
                new State { CountryName = "USA", StateName = "Alaska" },
                new State { CountryName = "India", StateName = "Maharashtra" },
                new State { CountryName = "India", StateName = "Gujarat" },
                new State { CountryName = "India", StateName = "Goa" },
                new State { CountryName = "Canada", StateName = "Ontario" },
                new State { CountryName = "Canada", StateName = "Quebec" },
                new State { CountryName = "Canada", StateName = "Manitoba" }
            }.AsQueryable();
        }
    }
}

City Model

namespace Cascading_DropDownList.Models
{
    public class City
    {
        public string CityName { get; set; }
        public string StateName { get; set; }

        public static IQueryable<City> GetCity()
        {
            return new List<City>
            {
                new City { StateName = "Alabama", CityName = "Abbeville" },
                new City { StateName = "Alabama", CityName = "Argo" },
                new City { StateName = "Arizona", CityName = "Buckeye" },
                new City { StateName = "Arizona", CityName = "Carefree" },
                new City { StateName = "Alaska", CityName = "Juneau" },
                new City { StateName = "Alaska", CityName = "Sitka" },
                new City { StateName = "Maharashtra", CityName = "Mumbai" },
                new City { StateName = "Maharashtra", CityName = "Pune" },
                new City { StateName = "Gujarat", CityName = "Ahmedabad" },
                new City { StateName = "Gujarat", CityName = "Gandhinagar" },
                new City { StateName = "Goa", CityName = "Panjim" },
                new City { StateName = "Goa", CityName = "Vasco" },
                new City { StateName = "Ontario", CityName = "Ottawa" },
                new City { StateName = "Ontario", CityName = "Port Hope" },
                new City { StateName = "Quebec", CityName = "Chandler" },
                new City { StateName = "Quebec", CityName = "Princeville" },
                new City { StateName = "Manitoba", CityName = "Carman" },
                new City { StateName = "Manitoba", CityName = "Roblin" }
            }.AsQueryable();
        }
    }
}

Controllers

HomeController

namespace Cascading_DropDownList.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            List<SelectListItem> country = new List<SelectListItem>();
            country.Add(new SelectListItem { Text = "USA", Value = "USA" });
            country.Add(new SelectListItem { Text = "India", Value = "India" });
            country.Add(new SelectListItem { Text = "Canada", Value = "Canada" });
            ViewData["CountryName"] = new SelectList(country, "Value", "Text");
            return View();
        }

        public JsonResult StateList(string id)
        {
            var states = from s in State.GetState()
                         where s.CountryName == id
                         select s;
            return Json(new SelectList(states.ToArray(), "CountryName", "StateName"), JsonRequestBehavior.AllowGet);
        }

        public JsonResult CityList(string id)
        {
            var cities = from s in City.GetCity()
                         where s.StateName == id
                         select s;
            return Json(new SelectList(cities.ToArray(), "StateName", "CityName"), JsonRequestBehavior.AllowGet);
        }
    }
}

View -> Home

Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Cascading_DropDownList.Models.Cascading>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Cascading DropDownList</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/jscript">
        $(function () {
            $('#ddlCountry').change(function () {
                $.getJSON('/Home/StateList/' + $('#ddlCountry option:selected')[0].textContent, function (data) {
                    var items = '<option>Select State</option>';
                    $.each(data, function (i, state) {
                        items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
                    });
                    $('#ddlState').html(items);
                });
            });

            $('#ddlState').change(function () {
                $.getJSON('/Home/CityList/' + $('#ddlState option:selected')[0].textContent, function (data) {
                    var items = '<option>Select City</option>';
                    $.each(data, function (i, city) {
                        items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
                    });
                    $('#ddlCity').html(items);
                });
            });
        });
    </script>
</head>
<body>
    <% using (Html.BeginForm())
       { %>
    <fieldset style="width: 15%;">
        <legend>Cascading DropDownList</legend>
        <table>
            <tr>
                <td>
                    <%= Html.Label("Country : ")%>
                </td>
                <td>
                    <%= Html.DropDownList("Country", ViewData["CountryName"] as SelectList, "Select Country", new { id = "ddlCountry" })%>
                </td>
            </tr>
            <tr>
                <td>
                    <%= Html.Label("State : ")%>
                </td>
                <td>
                    <select id="ddlState" name="State">
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <%= Html.Label("City : ")%>
                </td>
                <td>
                    <select id="ddlCity" name="City">
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="Save" id="btnSave" />
                </td>
            </tr>
        </table>
    </fieldset>
    <% } %>
</body>
</html>

Screenshot

I agree, here is the link: http://e-iceblue.com/free-api