编辑时未选择 MVC 级联下拉菜单答案

【问题标题】：MVC Cascading Drop Down Not Selected When Editing编辑时未选择 MVC 级联下拉菜单
【发布时间】：2014-01-15 10:48:35
【问题描述】：

我正在开发一个 MVC 4 网络应用程序。 Razor 视图之一有两个下拉列表。第一个下拉列表由传递给视图的 ViewModel 数据填充。第二个下拉列表使用 JQuery 和 Ajax 调用根据从第一个下拉列表中选择的 ID（级联）填充。

我可以正常工作，但是，每当用户希望编辑现有记录时，我都无法选择选定的二级下拉列表值。

这是两个下拉列表的 Razor 代码

<div class="lbl_a">
    Employer:
</div>
<div class="editor-field sepH_b">
     @Html.DropDownListFor(model => model.Employer, Model.EmployerList, "Select", new { @class = "inpt_a" })
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.DirectorateID, "Directorate/ Service Group")
</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.DirectorateID, Model.DirectorateList, "Select")
</div>

这是我的 JQuery 代码

$(document).ready(function () {

//Pre load on page load
onEmployerChange();

//Hide and show DIVS based on selection
$("#Employer").change(onEmployerChange);

function onEmployerChange() {

        var dataPost = { orgID: val };
        $.ajax({
            type: "POST",
            url: '/User/GetDirectorates/',
            data: dataPost,
            dataType: "json",
            error: function () {
                alert("An error occurred." + val);
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });

                $("#DirectorateID").html(items);
            }
        });

    }
}

});

当用户从第一个下拉列表中选择一个值时，所选 ID 将传递给 用户控制器 内的 GetDirectorates 操作。

这是我的 GetDirectorates 操作，它返回 Json 数据

public ActionResult GetDirectorates(string orgID)
{
    if (String.IsNullOrWhiteSpace(orgID))
        orgID = "0";

    var Directorates = _ListService.GetListItemsByOrganisationID(Convert.ToInt32(orgID));

        List<SelectListItem> directorateList = new List<SelectListItem>();
        directorateList.Add(new SelectListItem() { Text = "Select", Value = "" });

        foreach (var directorate in Directorates)
        {
            directorateList.Add(new SelectListItem() { Text = directorate.description, Value = directorate.listItemID.ToString(), Selected = false });
        }

        return Json(new SelectList(directorateList, "Value", "Text"));
    }

每当用户希望编辑现有记录时，我都会传递第一个和第二个下拉列表的值。两个下拉列表都按预期填充了正确的数据，但是，从未选择第二个下拉列表的选定值。

这是用户在尝试编辑现有记录时调用的“编辑”操作的缩短版本，但会显示正在传递的两个下拉列表选定值。

public ActionResult EditNonMember(int id, string feedback, string courseDateID, string courseID)
{
    //code to retrieve data here

    vm.Employer = UserDetails.Employer;
    vm.DirectorateID = UserDetails.DirectorateID;

    return View(vm);
}

有人能帮我解决这个问题吗？

谢谢。

【问题讨论】：

标签： c# jquery asp.net-mvc asp.net-mvc-4 cascadingdropdown

【解决方案1】：

您需要获取已保存雇主 ID 的董事列表并设置 DirectorateList 集合，然后设置 DirectorateID（来自已保存记录）；

public ActionResult EditNonMember(int id, string feedback, string courseDateID, 
                                                                 string courseID)
{
    //code to retrieve data here
    var userDetails=repositary.GetUserFromSomeId(id);
    vm.Employers=GetEmployers();
    vm.Employer = userDetails.Employer;
    vm.DirectorateList=GetDirectorateListForEmployer(userDetails.Employer);
    vm.DirectorateID = userDetails.DirectorateID;

    return View(vm);
}
private List<SelectListItem> GetEmployers()
{
  // to do : Return all employers here in List<SelectListItem>
}
private List<SelectListItem> GetDirectorateListForEmployer(int employerId)
{
  // to do : Return all Directorates for the selected employer 
}

【讨论】：

【解决方案2】：

这应该可以解决问题：

var subSelect = $("#DirectorateID");
// clear the selection              
subSelect.empty();

//append each option to the list
$.each(data, function (i, item) {
    subSelect.append($('<option/>', {
                      value: item.Value,
                      text: item.Text
                  }));
});

我不是通过html 方法设置它，而是简单地附加一个选项。

这是我使用 ajax 级联下拉列表的方法。

【讨论】：