Question

我正在开发 MVC 4 Web应用程序。其中一个 Razor 视图有两个下拉列表。第一个下拉列表由传递给视图的ViewModel数据填充。根据第一个下拉列表中选定的ID（级联），使用 JQuery 和 Ajax 调用填充辅助下拉列表。

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

这是我的两个下拉列表的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);
}

有人能帮我这个吗？

感谢。

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

Answer 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级联下拉列表的方法。

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

2 个答案: