Populating a dropdown based on selection in another dropdown

Have a look on the below code, this may help you.

 Authority*

    @Html.DropDownListFor(x => x.SelectedDeptCode, Model.Departments, "----Select Authority-----", new { id = "deptcode", class = "form-control", onchange = "getdistrict()" })
    @Html.ValidationMessageFor(model => model.SelectedDeptCode, "", new { @class = "text-danger" })
    



 District *

    @Html.DropDownListFor(model => model.DistrictName, new List(), "----Select District-----", new { id = "distcode", class = "form-control", onchange = "getTehsil()" })
    @Html.ValidationMessageFor(model => model.DistrictName, "", new { @class = "text-danger" })


 Tehsil *

    @Html.DropDownListFor(x => x.SiteTehsil, new List(), "----Select Tehsil-----", new { id = "sitetalukcode", class = "form-control", onchange = "getVillages()" })
    @Html.ValidationMessageFor(model => model.SiteTehsil, "", new { @class = "text-danger" })
    



 Village *

    @Html.DropDownListFor(x => x.SiteVillage, new List(), "----Select Village-----", new { id = "sitevillagecode", class = "form-control" })
    @Html.ValidationMessageFor(model => model.SiteVillage, "", new { @class = "text-danger" })
    

function getdistrict() {
    var deptCode = $('#deptcode').val();
    if (deptCode) {
        $.getJSON('@Url.Action("GetDistrictsByDept", "Application")', { deptCode: deptCode }, function (data) {
            var districtDropdown = $('#distcode');
            districtDropdown.empty();
            districtDropdown.append($('').text('----Select District-----').attr('value', ''));
            $.each(data, function (index, item) {
                districtDropdown.append($('').text(item.Text).attr('value', item.Value));
            });
        });
    }
}

function getTehsil() {
    var districtCode = $('#distcode').val();
    if (districtCode) {
        $.getJSON('@Url.Action("GetTehsilByDistrict", "Application")', { districtCode: districtCode }, function (data) {
            var tehsilDropdown = $('#sitetalukcode');
            tehsilDropdown.empty();
            tehsilDropdown.append($('').text('----Select Tehsil-----').attr('value', ''));
            $.each(data, function (index, item) {
                tehsilDropdown.append($('').text(item.Text).attr('value', item.Value));
            });
        });
    }
}

function getVillages() {
    var tehsilCode = $('#sitetalukcode').val();
    var deptCode = $('#deptcode').val();
    if (tehsilCode && deptCode) {
        $.getJSON('@Url.Action("GetVillagesByTehsil", "Application")', { tehsilCode: tehsilCode, deptCode: deptCode }, function (data) {
            var villageDropdown = $('#sitevillagecode');
            villageDropdown.empty();
            villageDropdown.append($('').text('----Select Village-----').attr('value', ''));
            $.each(data, function (index, item) {
                villageDropdown.append($('').text(item.Text).attr('value', item.Value));
            });
        });
    }
}

public JsonResult GetDistrictsByDept(int deptCode)
{
    var districts = GetDistricts(deptCode);
    return Json(districts.Select(d => new { Value = d.Id, Text = d.Name }), JsonRequestBehavior.AllowGet);
}

public JsonResult GetTehsilByDistrict(int districtCode)
{
    var tehsils = GetTehsils(districtCode);
    return Json(tehsils.Select(t => new { Value = t.Id, Text = t.Name }), JsonRequestBehavior.AllowGet);
}

public JsonResult GetVillagesByTehsil(int tehsilCode, int deptCode)
{
    var villages = GetVillages(tehsilCode, deptCode);
    return Json(villages.Select(v => new { Value = v.Id, Text = v.Name }), JsonRequestBehavior.AllowGet);
}

private List GetDistricts(int deptCode)
{
    using (PPAEntities db = new PPAEntities())
    {
        return db.ppaofficialsdeptmasts
            .Where(a => a.deptcode == deptCode)
            .Select(a => new District { Id = a.districtid, Name = a.distict })
            .ToList();
    }
}

private List GetTehsils(int districtCode)
{
    using (PPAEntities db = new PPAEntities())
    {
        return db.ppadistrictmasts
            .Where(d => d.regioncode == districtCode)
            .Select(d => new Tehsil { Id = d.tehsilid, Name = d.tehsilname })
            .ToList();
    }
}

private List GetVillages(int tehsilCode, int deptCode)
{
    using (PPAEntities db = new PPAEntities())
    {
        return db.ppavillagemasts
            .Where(v => v.tehsilcode == tehsilCode && v.deptcode == deptCode)
            .Select(v => new Village { Id = v.villageid, Name = v.villagename })
            .ToList();
    }
}

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

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

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

To populate a dropdown based on the selection in another dropdown in ASP.NET MVC, you can use JavaScript and AJAX to fetch the data dynamically from the server.

First, you need to add the necessary HTML markup for the dropdowns in your view. In this case, you have three dropdowns: Authority, District, and Tehsil. The Authority dropdown triggers the population of the District dropdown, and the District dropdown triggers the population of the Tehsil dropdown.

    Authority*


    @Html.DropDownListFor(x => x.SelectedDeptCode, Model.Departments, "----Select Authority-----", new { id = "deptcode", class = "form-control", onchange = "getDistricts()" })
    @Html.ValidationMessageFor(model => model.SelectedDeptCode, "", new { class = "text-danger" })
    




    District *


    @Html.TextBoxFor(model => model.districtname, htmlAttributes: new { id = "distcode", class = "form-control" })
    @Html.ValidationMessageFor(model => model.districtname, "", new { class = "text-danger" })



    Tehsil *


    @Html.DropDownListFor(x => x.sitetaluk, Model.sitetaluknames, "----Select-----", htmlAttributes: new { id = "sitetalukcode", class = "form-control" })
    @Html.ValidationMessageFor(model => model.sitetaluk, "", new { class = "text-danger" })
    




    Village *


    @Html.DropDownListFor(x => x.sitevillage, Model.sitevillagenames, "----Select-----", htmlAttributes: new { id = "sitevillagecode", class = "form-control" })
    @Html.ValidationMessageFor(model => model.sitevillage, "", new { class = "text-danger" })
    

Next, you need to write the JavaScript function getDistricts() that will be triggered when the Authority dropdown's value changes. This function will make an AJAX call to the server to fetch the districts based on the selected authority.

In your controller, you need to define the GetDistrictsByDept action method that will return the districts based on the selected authority.

public JsonResult GetDistrictsByDept(int deptCode)
{
    var districts = GetDistricts(deptCode);
    return Json(districts, JsonRequestBehavior.AllowGet);
}

public string GetDistricts(int deptCode)
{
    string disname = "";
    using (PPAEntities db = new PPAEntities())
    {
        disname = (from a in db.ppaofficialsdeptmasts
                   where a.deptcode == deptCode
                   select a.distict).FirstOrDefault();
        var districtid = Convert.ToInt16(disname);

        disname = (from a in db.ppadistrictmasts
                   where a.regioncode == districtid
                   select a.regiondesc).FirstOrDefault();
    }
    return disname;
}