Populating a dropdown based on selection in another dropdown

Question

on selection of Authority, district is binding but my issue is I want to fetch tehsil and on fetching tehsil, and according to authority and tehsil, villages shown

<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> Authority<sup style="color:#FF0000">*</sup></div>
          <div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
                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" })
           <div style="color:#FF0000;font-size:12px;" id="deptcodeErr"></div>
</div>

<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> District <sup style="color:#FF0000">*</sup></div>
   <div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
           Html.TextBoxFor(model => model.districtname, htmlAttributes: new { id = "distcode", class = "form-control" })
            Html.ValidationMessageFor(model => model.districtname, "", new { class = "text-danger" })
    </div>
</div>
 <div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> Resources.internallanguage.taluk <sup style="color:#FF0000">*</sup></div>
<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
    Html.DropDownListFor(x => x.sitetaluk, Model.sitetaluknames, "----Select-----", htmlAttributes: new { id = "sitetalukcode", class = "form-control" @*@onchange = "onchangecommuneDL()"*@ })
    Html.ValidationMessageFor(model => model.sitetaluk, "", new { class = "text-danger" })
    <div style="color:#FF0000;font-size:12px;" id="sitetalukcodeErr"></div>
</div>

<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;"> Resources.internallanguage.village <sup style="color:#FF0000">*</sup> </div>
<div class="col-sm-12 col-lg-6 col-md-6 col-xs-12" style="padding: 5px;">
    Html.DropDownListFor(x => x.sitevillage, Model.sitevillagenames, "----Select-----", htmlAttributes: new { id = "sitevillagecode", class = "form-control" })
    Html.ValidationMessageFor(model => model.sitevillage, "", new { class = "text-danger" })
    <div style="color:#FF0000;font-size:12px;" id="sitevillagecodeErr"></div>

</div>

As i getting district according to authority by onchange method i.e. onchange = "getdistrict()"

<script type="text/javascript">
    function getdistrict() {
       
        $Jbdtp('#deptcode').change(function () {
                var deptCode = $(this).val();
                if (deptCode) {
                    $Jbdtp.getJSON('@Url.Action("GetDistrictsByDept", "Application")', { deptCode: deptCode }, function (data) {
                        
                        $Jbdtp('#distcode').val(data);
                        
                    });
                }
            
        }
</script>

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();
               .Select(x => x.distict).FirstOrDefault();
    }
    return disname;
}

Please Help and thanks in advance

Amit Mohanty · Answer

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; } }

Jayraj Chhaya · Answer

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. function getDistricts() { var deptCode = $('#deptcode').val(); if (deptCode) { $.getJSON('@Url.Action("GetDistrictsByDept", "Application")', { deptCode: deptCode }, function (data) { $('#distcode').val(data); }); } } 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; }