How to refresh new data of second drop down list related to my first drop down list in mvc

Question

I have two dropdownlists. The first one is country and the second one is province. Data for the both are loaded from the database. My Country table are consist of only 2 fields, CountryID and CountryName and the Province table has 3 fields CountryID,ProvinceID,ProvinceName. I want to refresh my province dropdownlist when I select my country dropdown list and here is my code:

        <div class="form-group">
            @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @{
                    TBSWebApp.Database_Access_Layer.db dblayer2 = new TBSWebApp.Database_Access_Layer.db();
                    ViewBag.category = new SelectList(dblayer2.GetCountry(), "Country1", "Country");
                }
                @Html.DropDownListFor(model => model.Country ,
                (IEnumerable<SelectListItem>)ViewBag.category,

                new { @class = "form-control" })

                @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
            </div>
        </div>

and this one is for calling my database and fill the record

    public IEnumerable<TBSWebApp.Models.ContactAddress> GetCountry()
    {

        SqlCommand com = new SqlCommand("SELECT CountryID,CountryName FROM tblCountry ORDER BY Country", sqlconn);
        SqlDataAdapter da = new SqlDataAdapter(com);
        DataSet ds = new DataSet();
        da.Fill(ds);
        var tankReadings = new List<TBSWebApp.Models.ContactAddress>();
        int x = 0;
        foreach (DataRow drow in ds.Tables[0].Rows)
        {
            var tankReading = new TBSWebApp.Models.ContactAddress
            {
                Country1 = drow["CountryID"].ToString(),
                Country = drow["CountryName"].ToString()

            };

            tankReadings.Add(tankReading);
        }
        return tankReadings.AsEnumerable();
    }

    public IEnumerable<TBSWebApp.Models.ContactAddress> GetProvince(string ID)
    {

        SqlCommand com = new SqlCommand("SELECT ProvinceID,ProvinceName FROM tblProvince WHERE CountryID ='" + ID + "' ORDER BY Province", sqlconn);
        SqlDataAdapter da = new SqlDataAdapter(com);
        DataSet ds = new DataSet();
        da.Fill(ds);
        var tankReadings = new List<TBSWebApp.Models.ContactAddress>();
        int x = 0;
        foreach (DataRow drow in ds.Tables[0].Rows)
        {
            var tankReading = new TBSWebApp.Models.ContactAddress
            {
                Province1 = drow["ProvinceID"].ToString(),
                Province = drow["ProvinceName"].ToString()

            };

            tankReadings.Add(tankReading);
        }
        return tankReadings.AsEnumerable();
    }

and now I don't know how to call my province dropdownlist to fill the records based on selected country.

Answer 1

Your requirement is known as Drop down cascading in MVC. I am sharing a very similar articles to your requirement. just go through, Article have StateMaster which is correspond to My country table and DistrictMaster which is correspond to Province table.

https://www.c-sharpcorner.com/UploadFile/sourabh_mishra1/cascading-dropdownlist-in-Asp-Net-mvc/

Please check and let me know if you need more help.