Filling Cascading dropdown from database during edit

Question

I need help filling dependent dropdowns. I have dependent dropdown that work when entering data, select the State dropdown and the dependent dropdowns reload based on the state selected.

Issue is when I want to edit, the state is filled and selected from database, but the dependents don't get filled and selected. The onChange function doesn't get activated or hit.

Here are my codes:

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

The 2 dropdowns, Pcommand and PayP are dependent on sposted. Again, when editing, the sposted drop down is selected and filled from db, but doesn't cascade to the other 2.

Here is the 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>

Thank you in advance.

A few days later, I have decided to add the controller method that is supposed to fill the dropdowns in the view.

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

All he information needed to fill the view elements are in obj. It loads the selects the state from the id in obj, but the onchange isn't fired to fill the dependent dropdowns.

Answer 1

After days of research, I couldn't seem to find a way to to force the onchange to call Ajax to dynamically fill the dependent dropdowns. So I took a cue from Mateen's 3rd comment and rewrote the method in the controller to read load the relevant items into a 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);
        }