AJAX Call For Dropdown Lists In MVC

In today’s article, we will see how to populate a dropdown list in MVC, using AJAX call and on the basis of the selected value's first drop down, we will populate a second dropdown list.

What is AJAX call?

AJAX call is an asynchronous request initiated by the Browser to the Server with a Postback result, which will not result in a page transition or complete page refresh.

We can partially update the page without the entire page being reloaded through AJAX call. Here, we will first create two empty drop downs, which we will populate, according to our need.

Simple syntax of dropdown list is given below.

This will generate a simple dropdown list with the select option only.

We have provided this control with an Id, which we will be used to populate it, using AJAX call.

Hence, with HTML of both dropdowns, my cshtml page looks, as shown below.

I have added few CSS bootstrap classes and applied some design to make the form pretty. When we run this code, the preview will be, as shown below.

Hence, country and state are the dropdowns, which are both empty. We will now populate them, using AJAX call. Now, we will write our methods in controller, which will provide us the data during AJAX call.

Declaration of the function will be, as shown below.

Here, the return type of the method will be JsonResult because we will return JSON from here.

Here, we will write our logic to retrieve the list of the countries from the database but for the demo, I will just return a list string from here. Also for the states, we will write the method with some hard coded values for the demo.

Now, our GetCountries method will look, as shown below.

We have added three countries in a list. You can add your logic to get the list from the database.

Now, the method for states looks, as shown below.

We have created GetStates method [HttpPost] because we need to pass the selected country on the basis of which we will get the state. Hence, in order to pass the selected country securely, we have created it as Post method.

Now, the controller part is done. We will now move on to the script part.

Our controller looks, as shown below.

Now, in our cshtml page, we will include jQuery JS file.

Now, we will start a script tag in which we will create a function for AJAX call and we will have the document.ready function, which fires automatically when the page is completely loaded.

AJAX call function is what we will use for AJAX calls. On Document ready function, we will use AJAX call to populate the country. Here, the code is given below for it.