Cascading Dropdown in MVC

Cascading Dropdown in MVC

Steps for creating cascading dropdown.

• ·         Add class to Models folder (District.cs)
•       Add controller to Controllers folder (CascadingDropdownController)

• ·         Class  District.cs should look like this.

using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ExportToExcel.Models
{
    public class District
    {
        public int DistrictID { get; set; }
        public string DistrictName { get; set; }
        public int ProvinceID { get; set; }
    }
}

•  Controller (CascadingDropdownController) should look like this.

 using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ExportToExcel.Models;
namespace ExportToExcel.Controllers
{
    public class CascadingDropdownController : Controller
    {
        // GET: CascadingDropdown
        public ActionResult casDropDown()
        {
            List<SelectListItem> lst =
                new List<SelectListItem>() 
            {
                new SelectListItem { Value="1",Text="Province 1" },
                new SelectListItem{Value="2",Text="Province 2"},    
                new SelectListItem{Value="3",Text="Province 3"},
                new SelectListItem{Value="4",Text="Provice 4"}
            };
            
            ViewBag.Province = lst;

            return View();
        }

        [HttpPost]
        public JsonResult getDistricts(int provinceid)
        {
            List<District> dist = new List<District>();
            District[] DistArrary = { new District { DistrictID = 1, DistrictName = "District 1", ProvinceID = 1 },                                   
                                     new District { DistrictID=3, DistrictName="District 2",ProvinceID=1 },
                                     new District { DistrictID=4, DistrictName="District 3",ProvinceID=2 },
                                     new District { DistrictID=5, DistrictName="District 4",ProvinceID=3 },
                                     new District { DistrictID=6, DistrictName="District 5",ProvinceID=3 },
                                     new District { DistrictID=7, DistrictName="District 6",ProvinceID=3 },
                                     new District { DistrictID=8, DistrictName="District 7",ProvinceID=4 },
                                     new District { DistrictID=9, DistrictName="District 8",ProvinceID=4 },
                                     new District { DistrictID=10, DistrictName="District 9",ProvinceID=4 },
                                     new District { DistrictID=2, DistrictName="District 10",ProvinceID=2 },
                                     new District { DistrictID=11, DistrictName="District 11",ProvinceID=1 }};

            District[] selDists = DistArrary.Where(p => p.ProvinceID == provinceid).ToArray();

            return Json(selDists, JsonRequestBehavior.AllowGet);
        }

    }
}

 

• ·         Add view to casDropDown() action Method
• 
• ·         The view should look like this

 @{

    ViewBag.Title = "cascading drop down";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

<h2>Cascading Dropdown</h2>
<script>
    $(function () {
        $('#Province').change(function () {
            var provinceid = $(this).val();
            $.ajax({
                type: "post",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url: "getDistricts",
                data: "{provinceid:'" + provinceid + "'}",
                success: function (data) {                   
                    $('#District').empty();
                    $('#District').append('<option selected="selected" value="">Select District</option>')
                    $.each(data, function (i, d) {
                        $('#District').append('<option value=' + d.DistrictID + '>' + d.DistrictName + '</option>');
                    });

                },
                failure: function (data) {
                    alert('error occured');
                }

            });
        });
    });
</script>
@using(Html.BeginForm())
{
    <hr />
  <div class="form-horizontal">
      <div class="form-group">
          <label class="col-md-2 control-label">Province</label>
          <div class="col-md-5">
             @Html.DropDownList("Province", null, htmlAttributes: new { @class = "form-control" })
          </div>
      </div>
      <div class="form-group">
          <label class="col-md-2 control-label">District</label>
          <div class="col-md-4">
              <select id="District" name="District" class="form-control"></select>
          </div>
      </div>
  </div>    
}

 
Note : don't forget to add jquery.js to Layout page or to (underlying view)