How to cascade state list for selected country using jquery ajax in asp net mvc

Introduction

ASP.NET is a popular programming language used for developing web applications. In this article, we will discuss how to cascade a state list for a selected country using jQuery AJAX in ASP.NET MVC.

Prerequisites

Before we begin, make sure you have the following:

  • Studio installed on your machine
  • Basic knowledge of ASP.NET MVC
  • of jQuery and AJAX

Step 1: Setting up the Project

First, let's create a new ASP.NET MVC project in Visual Studio. Open Visual Studio and go to File > New > Project. Select ASP.NET Web and provide a name for your project. Choose the desired location and click Create.

Next, select MVC as the project template and click Create. Visual Studio will create a new ASP.NET MVC project for you.

Step 2: the Models

In this step, we will create the necessary models for the country and state.

Create a new folder called Models in the Solution Explorer. Right-click on the Models folder and select Add > Class. Name the class Country and add the following properties:


public class Country
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Similarly, create another class called State with the following properties:


public class State
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int CountryId { get; set; }
}

Step 3: Creating the Controller

Now, let's create a controller to handle the AJAX and return the cascaded state list.

Right-click on the Controllers folder in the Solution Explorer and select Add > Controller. Name the controller HomeController.

Inside the HomeController class, add the following action methods:


public ActionResult ()
{
    // Populate the country list
    List countries = new List
    {
        new Country { Id = 1, Name = "USA" },
        new Country { Id = 2, Name = "Canada" },
        new Country { Id = 3, Name = "India" }
    };

    ViewBag.Countries = new SelectList(countries, "Id", "Name");

    return View();
}

public JsonResult GetStates(int countryId)
{
    // Get the states for the selected country
    List states = new List();

    if (countryId == 1)
    {
        states.Add(new State { Id = 1, Name = "New York", CountryId = 1 });
        states.Add(new State { Id = 2, Name = "California", CountryId = 1 });
        states.Add(new State { Id = 3, Name = "Texas", CountryId = 1 });
    }
    else if (countryId == 2)
    {
        states.Add(new State { Id = 4, Name = "Ontario", CountryId = 2 });
        states.Add(new State { Id = 5, Name = "Quebec", CountryId = 2 });
        states.Add(new State { Id = 6, Name = "British Columbia", CountryId = 2 });
    }
    else if (countryId == 3)
    {
        states.Add(new State { Id = 7, Name = "Maharashtra", CountryId = 3 });
        states.Add(new State { Id = 8, Name = "Karnataka", CountryId = 3 });
        states.Add(new State { Id = 9, Name = "Tamil Nadu", CountryId = 3 });
    }

    return Json(states, .AllowGet);
}

Step 4: Creating the View

Finally, let's create the view to display the cascaded state list.

Right-click on the Views folder in the Solution Explorer and select Add > View. Name the view Index..

Inside the Index.cshtml file, add the following code:


@{
    ViewBag.Title = "Cascade State List";
}

Select Country:

@Html.DropDownList("CountryId", ViewBag.Countries as SelectList, "Select a country", new { id = "ddlCountry" })

Select State:

Step 5: the Application

Build and run the application. You should see a dropdown list to select a country. When you select a country, the state dropdown list will be populated with the corresponding states using AJAX.

That's it! You have successfully cascaded the state list for a selected country using jQuery AJAX in ASP.NET MVC.

Conclusion

In this article, we discussed how to cascade a state list for a selected country using jQuery AJAX in ASP.NET MVC. We covered the to set up the project, create the models, implement the controller actions, and create the view. By following these steps, you can easily implement cascading dropdown lists in your ASP.NET MVC applications.

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents