Populating dropdown with JSON result - Cascading DropDown using MVC3, JQuery, Ajax, JSON

Question

I\'ve got a cascading drop-drown using mvc. Something like, if you select a country in the first-dropdown, the states of that country in the second one should be populated a

Answer 1

Step 1:

• At very first, we need a model class that defines properties for storing data.

  public class ApplicationForm
  {
      public string Name { get; set; }
      public string State { get; set; }
      public string District { get; set; }
  }
  

  Step 2:

• Now, we need an initial controller that will return an Index view by packing list of states in ViewBag.StateName.

  public ActionResult Index()
  {
      List state = new List();
      state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
      state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
      ViewBag.StateName = new SelectList(state, "Value", "Text");
  
      return View();
  }
  

  In above controller we have a List containing states attached to ViewBag.StateName. We could get list of states form database using Linq query or something and pack it to ViewBag.StateName, well let’s go with in-memory data.

  Step 3:

• Once we have controller we can add its view and start creating a Razor form.

    @Html.ValidationSummary("Please correct the errors and try again.")
  
    @using (Html.BeginForm())
       {
       
  
      
  DropDownList
      @Html.Label("Name")
      @Html.TextBox("Name")
      @Html.ValidationMessage("Name", "*")
  
      @Html.Label("State")
      @Html.DropDownList("State", ViewBag.StateName as SelectList, "Select a State", new { id = "State" })
      @Html.ValidationMessage("State", "*")
  
      @Html.Label("District")
      
      @Html.ValidationMessage("District", "*")
  
      
  
          
      
  
  }
  

  You can see I have added proper labels and validation fields with each input controls (two DropDownList and one TextBox) and also a validation summery at the top. Notice, I have used which is HTML instead of Razor helper this is because when we make JSON call using jQuery will return HTML markup of pre-populated option tag. Now, let’s add jQuery code in the above view page.

  Step 4:

  Here is the jQuery code making JSON call to DDL named controller’s DistrictList method with a parameter (which is selected state name). DistrictList method will returns JSON data. With the returned JSON data we are building tag HTML markup and attaching this HTML markup to ‘District’ which is DOM control.

    @Scripts.Render("~/bundles/jquery")
      
  

  Please make sure you are using jQuery library references before the tag.

  Step 5:

• In above jQuery code we are making a JSON call to DDL named controller’s DistrictList method with a parameter. Here is the DistrictList method code which will return JSON data.

  public JsonResult DistrictList(string Id)
  {
      var district = from s in District.GetDistrict()
                      where s.StateName == Id
                      select s;
  
      return Json(new SelectList(district.ToArray(), "StateName", "DistrictName"), JsonRequestBehavior.AllowGet);
  }
  

  Please note, DistrictList method will accept an ‘Id’ (it should be 'Id' always) parameter of string type sent by the jQuery JSON call. Inside the method, I am using ‘Id’ parameter in linq query to get list of matching districts and conceptually, in the list of district data there should be a state field. Also note, in the linq query I am making a method call District.GetDistrict().

  Step 6:

  In above District.GetDistrict() method call, District is a model which has a GetDistrict() method. And I am using GetDistrict() method in linq query, so this method should be of type IQueryable. Here is the model code.

  public class District
  {
      public string StateName { get; set; }
      public string DistrictName { get; set; }
  
      public static IQueryable GetDistrict()
      {
          return new List
          {
              new District { StateName = "Bihar", DistrictName = "Motihari" },
              new District { StateName = "Bihar", DistrictName = "Muzaffarpur" },
              new District { StateName = "Bihar", DistrictName = "Patna" },
              new District { StateName = "Jharkhand", DistrictName = "Bokaro" },
              new District { StateName = "Jharkhand", DistrictName = "Ranchi" },
          }.AsQueryable();
      }
  }
  

  Step 7:

  You can run the application here because cascading dropdownlist is ready now. I am going to do some validation works when user clicks the submit button. So, I will add another action result of POST version.

  [HttpPost]
  public ActionResult Index(ApplicationForm formdata)
  {
      if (formdata.Name == null)
      {
          ModelState.AddModelError("Name", "Name is required field.");
      }
      if (formdata.State == null)
      {
          ModelState.AddModelError("State", "State is required field.");
      }
      if (formdata.District == null)
      {
          ModelState.AddModelError("District", "District is required field.");
      }
  
      if (!ModelState.IsValid)
      {
          //Populate the list again
          List state = new List();
          state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
          state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
          ViewBag.StateName = new SelectList(state, "Value", "Text");
  
          return View("Index");
      }
  
      //TODO: Database Insertion
  
      return RedirectToAction("Index", "Home");
  }