CasCading DropDown List

Hello Soheb,

Model Creation for Country, State and City as below

public class Country
{
    public int CountryId { get; set; }
    public string CountryName { get; set; }
}

public class State
{
    public int StateId { get; set; }
    public string StateName { get; set; }
    public int CountryId { get; set; }
}

public class City
{
    public int CityId { get; set; }
    public string CityName { get; set; }
    public int StateId { get; set; }
}

MVC: Presentation layer

    @Html.DropDownListFor(model => model.CountryId, Model.CountryList, "Select Country", new { id = "countryDropdown" })


    @Html.DropDownListFor(model => model.StateId, Enumerable.Empty(), "Select State", new { id = "stateDropdown" })


    @Html.DropDownListFor(model => model.CityId, Enumerable.Empty(), "Select City", new { id = "cityDropdown" })

Jquery implementaion :

$(document).ready(function () {
    $('#countryDropdown').change(function () {
        var countryId = $(this).val();
        $.ajax({
            url: '@Url.Action("GetStatesByCountry", "YourController")',
            type: 'GET',
            data: { countryId: countryId },
            success: function (data) {
                $('#stateDropdown').empty();
                $.each(data, function (index, item) {
                    $('#stateDropdown').append($('', {
                        value: item.StateId,
                        text: item.StateName
                    }));
                });
                $('#cityDropdown').empty();
            },
            error: function (xhr, status, error) {
                console.log('Error:', error);
            }
        });
    });

    $('#stateDropdown').change(function () {
        var stateId = $(this).val();
        $.ajax({
            url: '@Url.Action("GetCitiesByState", "YourController")',
            type: 'GET',
            data: { stateId: stateId },
            success: function (data) {
                $('#cityDropdown').empty();
                $.each(data, function (index, item) {
                    $('#cityDropdown').append($('', {
                        value: item.CityId,
                        text: item.CityName
                    }));
                });
            },
            error: function (xhr, status, error) {
                console.log('Error:', error);
            }
        });
    });
});

Access Data from Database using EF,

public JsonResult GetStatesByCountry(int countryId)
{
    var states = dbContext.States.Where(s => s.CountryId == countryId)
                                 .Select(s => new { s.StateId, s.StateName })
                                 .ToList();
    return Json(states, JsonRequestBehavior.AllowGet);
}

public JsonResult GetCitiesByState(int stateId)
{
    var cities = dbContext.Cities.Where(c => c.StateId == stateId)
                                 .Select(c => new { c.CityId, c.CityName })
                                 .ToList();
    return Json(cities, JsonRequestBehavior.AllowGet);
}

You may refer above article for more reference as Jaimin and Naimish shared links

Please refere below article. 

https://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/cascading-dropdownlist-in-Asp-Net-mvc/
https://www.c-sharpcorner.com/article/cascading-dropdown-list-of-country-state-and-city-using-mvc-web-api-and-jquery/

Thanks