ASP.NET MVC 5-Tutorials for beginners: Creating ASP.NET MVC 5 Application using Entity Framework 6 and Identity with CRUD Operations on visual studio 2015 Part-9

This is the part-9 of asp.net mvc 5 series using entity framework and identity from scratch.In this tutorial you will learn how to bind a drop-down list using jquery in asp.net mvc 5? How to bind new html on the change of drop-down list item using jquery? So there is a complete step by step process of making patient registration form, if you have any query regarding this tutorial, please comment right below and your query will be answered as soon as possible. Other part of series:

Patient Registration form:

we have created a patient registration form step by step from scratch in the previous parts, in patient registration form there is country drop-down list that is loaded initially when the patient registration form is loaded.So, now when you select the country or change the country name then there should be change in province drop-down list according to country change because there is a parent and child relation ship.There is a same procedure for province and district drop-down list.Means there is a hierarchical structure, each country has its own provinces list, each province has its own districts list and also each district has its own cities list.I hope you will understand the basic idea behind it. Our patient form is:

Binding Drop-down List Using Jquery

First of all write a function / action method that will fetch the province list from database.Function provinceList(int countryId) i already have created in RegistrationMethod class in previous parts.Now i'm just calling that method in controller by creating a action method, which return the province list against the country in json format.Let's create a action method in controller, open Registration controller and write the GetProvinceList(int countryId) action method in the controller.e.g

Action Method GetProvinceList(int countryId):
public ActionResult GetProvinceList(int countryId)
{
  try
{
  RegistrationMethods methods = new RegistrationMethods();
  var provinceList = methods.provinceList(countryId);
  var data = JsonConvert.SerializeObject(provinceList);
  return Json(data, JsonRequestBehavior.AllowGet);
}
  catch
{
  return Json("Exception", JsonRequestBehavior.AllowGet);
}
}
Now writing a jquery Change function on the country drop-down id.Run the application and in the patient registration form right click on the country drop-down and go to Inspect.Select the id attribute and copy it.e.g
Write a jquery change function and make ajax call for province list.e.g

Change Function:
$('#patient_CountryId').change(function (e) {
var countryId = $(this).val();
  try{
$.ajax({
url: "/Registration/GetProvinceList",
type: "GET",
data: { countryId: countryId },
success: function (responce) {
  var ParseData = $.parseJSON(responce);
  console.log(ParseData);
}
});
}catch(err){
alert("Something went worng!");
}
});
By selecting the country from the country drop-down, you can see there is a province list against the country in console tab by right clicking in the country drop-down and go to inspect element. e.g
Now append the province list to province drop-down by writing a jquery append function.e.g
function AppendDropdownList(ElementId, Data) {
$(ElementId).empty();
$.each(Data, function (index, item) {
$(ElementId).append($('<option>', {
value: item.Value,
text: item.Text
}));
})
}

So the Complete Script look like this:
Run the application, you can see the province list/json list is bind with province drop-down by element id.Output in the browser will look like this:
There is a problem with the province drop-down list.Let's see, first you select the country name let's Pakistan, you can see the province list is loaded in the province drop-down.Now change the label from Pakistan to "--Select the country--" you can see there is no change in the province drop-down which is wrong. So the point is province drop-down should be empty and changed on the change of country name.By following the above steps , right click on the patient form and go to inspect element, select the console tab and see the following error.
To remove this just check the selected country value.Simply make a if condition, if selected country has a value then fetch the province list otherwise remove the province list.

Code:
<script>
$(document).ready(function (e) {
$('#patient_CountryId').change(function (e) {
  var countryId = $(this).val();
  if (countryId != "") {
  try{
$.ajax({
url: "/Registration/GetProvinceList",
type: "GET",
data: { countryId: countryId },
success: function (responce) {
  var ParseData = $.parseJSON(responce);
AppendDropdownList("#patient_ProvinceId", ParseData);
}

});
}catch(err){
alert("Something went worng!");
}
}
});
});
  function AppendDropdownList(ElementId, Data) {
$(ElementId).empty();
$.each(Data, function (index, item) {
$(ElementId).append($('<option>', {
value: item.Value,
text: item.Text
}));
})
}
</script>

Now you can write same province and district change function as discussed above.Run the application and see the output in the browser, province list is changed on the change of country name.If you have any query regarding this tutorial, please feel free and post a comment right below, your query will be answered ASAP.