如何刷新与我在 mvc 中的第一个下拉列表相关的第二个下拉列表的新数据

Question

我有两个下拉列表。第一个是国家，第二个是省。两者的数据都是从数据库加载的。我的国家 table 仅包含 2 个字段，CountryID 和 CountryName，省份 table 有 3 个字段 CountryID、ProvinceID、ProvinceName。当我 select 我的国家/地区下拉列表时，我想刷新我的省份下拉列表，这是我的代码：

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

这个是调用我的数据库和填写记录的

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

现在我不知道如何调用省份下拉列表来根据 selected 国家/地区填写记录。

Answer 1

您可以使用 javascript 捕捉 select 标签的事件变化，并通过 ajax 发送数据选项 select 以获取新的提供商列表。

var selectDom = document.getElementById(\*id_your_select_tag*\);
selectDom.addEventListener("change", function() {
    // call ajax at here 
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           // xhttp.responseText is response provider list.
           // update select provider at here
        }
    }
    xhttp.open("GET", "your_url_api_get_provider_list_by_id", true);
    xhttp.send();

另一种方式，我可以使用局部视图来显示提供商列表。看这里Update Partial View with Ajax

Answer 2

您的要求在 MVC 中称为下拉级联。我正在分享与您的要求非常相似的文章。刚刚通过，文章有对应于我的国家 table 的 StateMaster 和对应于省 table.

的 DistrictMaster

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

如果您需要更多帮助，请检查并告诉我。

如何刷新与我在 mvc 中的第一个下拉列表相关的第二个下拉列表的新数据

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

javascript

c#

model-view-controller

asp.net-mvc

dropdown