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

Question

我需要帮助填写相关下拉菜单。我有输入数据时工作的依赖下拉菜单，select 状态下拉菜单和依赖下拉菜单根据状态重新加载 selected.

问题是当我想编辑时，状态已填充并从数据库中 selected，但依赖项未被填充和 selected。 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>

2 个下拉菜单 Pcommand 和 PayP 依赖于 sposted。同样，在编辑时，sposted 下拉列表是 selected 并从 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 加载 selects 状态，但不会触发 onchange 来填充依赖的下拉列表。

Answer 1

使用 selected stateid 进行编辑时，您需要获取两个下拉列表数据，就像您使用 selected 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 并传递 selected stateid。

Answer 2

经过几天的研究，我似乎无法找到一种方法来强制 onchange 调用 Ajax 来动态填充相关下拉列表。因此，我从 Mateen 的第 3 条评论中得到启发，并重写了控制器中的方法，以读取将相关项目加载到 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);
        }

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

Filling Cascading dropdown from database during edit

c#

jquery

asp.net-core

model-view-controller

cascadingdropdown