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

Question

我有两个下拉列表。第一个是国家，第二个是省。两者的数据都是从数据库加载的。我的国家/地区表仅包含 2 个字段，国家 ID 和国家名称，省表有 3 个字段国家 ID，省 ID，省名称。当我选择我的国家/地区下拉列表时，我想刷新我的省份下拉列表，这是我的代码：

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

现在我不知道如何调用我的省份下拉列表以根据所选国家/地区填充记录。

Answer 1

您的要求在 MVC 中称为下拉级联。我正在分享与您的要求非常相似的文章。只是通过，文章有州长，对应于我的国家表和地区大师，对应于省表。

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

如果您需要更多帮助，请检查并让我知道。

Answer 2

您可以使用 javascript 来捕获通过 ajax 选择的选择标签和发送数据选项的事件更改，以获取新的提供程序列表。

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

另一种方式，我可以使用部分视图来显示提供程序列表。请参阅此处 使用 Ajax 更新部分视图