填充在编辑期间从数据库级联下拉

Question

我需要帮助填充依赖的下拉列表。当输入数据时，我有依赖的下拉菜单，选择State下拉菜单，依赖的下拉菜单会根据所选的状态重新加载。

问题是当我想编辑时，状态被填充并从数据库中选择，但依赖项没有被填充和选择。onChange功能没有被激活或点击。

以下是我的代码:

<div class="form-row">
<div class="col">
<div class="form-group">
<label asp-for="Sposted"></label>
<select asp-for="Sposted"
class="form-control"
asp-items="@(new SelectList(@ViewBag.statelist, "Stateid", "Statename" ))"
onchange="sposted(this)">
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label asp-for="Pcommand"></label>
<select asp-for="Pcommand" class="form-control" id="Pcommand"
asp-items="@(new SelectList(string.Empty, "Commandid", "Cfname"))">
<option>Select ...</option>
</select>
</div>
</div>
<div class="col">
<div class="form-group">
<label asp-for="PayP"></label>
<select asp-for="PayP" id="PayP"
class="form-control"
asp-items="@(new SelectList(string.Empty, "Ppid", "Ppfull"))"></select>
</div>
</div>
</div>

Pcommand和PayP这两个下拉框依赖于sposted。同样，在编辑时，sposted下拉框被选中并从db中填充，但不会级联到其他2。

JS:

<script type="text/javascript">
//$(document).ready(function () {
//$('#Sposted').change(function () {
function sposted(stateid) {
console.log(stateid.value);
var url = '@Url.Content("~/")' + "MemberList/RetPayPoint";
//var ddlsource = "#Sposted";
//$.getJSON(url, { Stateid: $(ddlsource).val() }, function (data) {
$.getJSON(url, { Stateid: stateid.value }, function (data) {
var items = '';
$("#PayP").empty();
$.each(data, function (i, pp) {
items += "<option value='" + pp.value + "'>" + pp.text + "</option>";
});
$('#PayP').html(items);
});
}//});
//  });
</script>

提前谢谢你。

几天后，我决定添加控制器方法，它应该填充视图中的下拉列表。

public IActionResult DisplayMem()
{
var statelist = _mr.GetStates().ToList();
statelist.Insert(0, new ToxState { Stateid = 0, Statename = "Select..." });
ViewBag.statelist = statelist;
var rank = _mr.GetRanks().ToList();
rank.Insert(0, new ToxRank { Rankid = 0, Fullname = "Select..." });
ViewBag.rank = rank;
//memid = memlist.FirstOrDefault().MemberId;
var obj = _mr.MemberInfo((long)_ar.FindAcc(long.Parse(HttpContext.Session.GetString("memberid"))).MemId);
return View(obj);
}

填充视图元素所需的所有信息都在obj中。它从obj中的id中加载并选择状态，但是没有触发onchange来填充依赖的下拉列表。

Answer 1

当使用选定的stateid进行编辑时，您需要获得两个下拉框数据，就像您通过使用选定的stateid获得PayP数据一样:

$.getJSON(url, { Stateid: stateid.value }, function (data) {
var items = '';
$("#PayP").empty();
$.each(data, function (i, pp) {
items += "<option value='" + pp.value + "'>" + pp.text + "</option>";
});
$('#PayP').html(items);
});

您将调用您的函数sposted，并在创建或编辑时两次传递选定的stateid。

Answer 2

经过几天的研究，我似乎无法找到一种方法来强制onchange调用Ajax来动态填充依赖的下拉框。所以我从Mateen的第三条评论中得到了提示，并重写了控制器中的方法，以读取加载相关项目到ViewBag中。

public IActionResult DisplayMem()
{
var statelist = _mr.GetStates().ToList();
statelist.Insert(0, new ToxState { Stateid = 0, Statename = "Select..." });
ViewBag.statelist = statelist;
var rank = _mr.GetRanks().ToList();
rank.Insert(0, new ToxRank { Rankid = 0, Fullname = "Select..." });
ViewBag.rank = rank;
var obj = _mr.MemberInfo((long)_ar.FindAcc(long.Parse(HttpContext.Session.GetString("memberid"))).MemId);

ViewBag.payp = _mr.GetPayPoint(obj.Sposted.Value).ToList();
ViewBag.pcommand = _mr.GetCommand(obj.Sposted.Value).ToList();

return View(obj);
}