Question

我正在使用MVC4 / EF，我有三个级联下拉列表，第四个是列表框，它根据第三个下拉列表加载记录。我选择第一个下拉列表并在第二个下拉列表中过滤结果，然后通过选择第二个下拉列表，第三个dropdwon被过滤，基于第三个下拉列表我填充一个列表框。它只适用于第二个下拉列表，它根据第一个加载记录。但是当更改第二个下拉列表中的选择时，它正在过滤第三个下降，即当我在第二个下拉列表中更改选择时它没有重置第三个，实际上当我更改第二个选择时不调用$("#ddlUsers").change(function () { });落下。这是我的代码

我的创建视图具有以下主要元素

首次下拉

<div class="editor-field">
        @Html.DropDownList("DepartmentId", (SelectList)ViewData["Departments"], "--Select Department--", new { Id = "ddlDepartments" })
        @Html.ValidationMessageFor(model => model.DepartmentId)
    </div>

第二次下拉

<div id="dvUser" class="editor-field">
        @Html.DropDownList("UserId", new SelectList(new[] { "--Select Manager--" }), new { Id = "ddlUsers" })
        @Html.ValidationMessageFor(model => model.UserID)
    </div>

第3次下拉

<div id="dvLead" class="editor-field">
        @Html.DropDownList("UserId", new SelectList(new[] { "--Select Lead--" }), new { Id = "ddlLead" })
        @Html.ValidationMessageFor(model => model.LeadID)
    </div>

现在是一个列表框

div id="dvEmployees" class="editor-field">
        @Html.ListBox("Employees", new MultiSelectList(new[] { "--Select Item--" }), new { id = "sourceItems", Multiple = "multiple" })
        @Html.ValidationMessageFor(model => model.DepartmentEmployees)
    </div>

我的JavaScript

<script type="text/javascript">


$(document).ready(function () {

    registerPageEvents('@Html.Raw(Url.Action("Create"))', '@Html.Raw(Url.Action("Edit", new { id = "__ID__" }))', 'ID');

    $("#ddlDepartments").change(function () {
        debugger;
        var postParams = { deptId: $("#ddlDepartments").val() };
        $.post('@Html.Raw(Url.Action("LoadManagerCombo", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
        .done(function (newRow) {
            $("#dvUser").html(newRow);
        })
        .fail(function (ex1, ex2, ex3) {
            alert("error occured while Loading Manager");
        });

    });


    $("#ddlUsers").change(function () {
        debugger;
        var postParams = { deptId: $("#ddlDepartments").val(), managerId: $("#ddlUsers").val() };
        $.post('@Html.Raw(Url.Action("LoadUserOtherThanMangerCombo", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
        .done(function (newRow) {
            $("#dvLead").html(newRow);
        })
        .fail(function (ex1, ex2, ex3) {
            alert("error occured while Loading Lead");
        });

    });

    $("#ddlLead").change(function () {
        debugger;
        var postParams = { deptId: $("#ddlDepartments").val(), managerId: $("#ddlUsers").val(), leadId: $("#ddlLead").val() };
        $.post('@Html.Raw(Url.Action("LoadEmployeeListBox", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
        .done(function (newRow) {
            $("#dvEmployees").html(newRow);
        })
        .fail(function (ex1, ex2, ex3) {
            alert("error occured while Loading Employees");
        });

    });


});

我为第二个，第三个下拉列表和第四个（列表框）制作了不同的部分视图

第二个

@model CubicHRM.Data.Entities.Employee

@Html.DropDownList("UserId", (SelectList)ViewData["Manager"], "--Select Manager/Head--", new { Id = "ddlUsers" })

带控制器功能

[HttpPost]
    public ActionResult LoadManagerCombo(int deptId)
    {
        List<int> ManagerIds = db.DepartmentManagerRepository.Get().Select(u => u.UserID).ToList();
        List<int> LeadIds = db.DepartmentManagerRepository.Get().Select(u => u.LeadID).ToList();
        ViewData["Manager"] = new SelectList(db.UsersRepository.Get().Where(u => u.DepartmentID == deptId && !ManagerIds.Contains(u.UserId) && !LeadIds.Contains(u.UserId)).ToList(), "UserId", "UserName");
        return PartialView();
    }

for 3rd one

@model CubicHRM.Data.Entities.Employee

@Html.DropDownList("UserId", (SelectList)ViewData["Lead"], "--Select Lead--", new { Id = "ddlLead" })

使用操作方法

[HttpPost]
    public ActionResult LoadUserOtherThanMangerCombo(int deptId, int managerId)
    {
        List<int> ManagerIds = db.DepartmentManagerRepository.Get().Select(u => u.UserID).ToList();
        List<int> LeadIds = db.DepartmentManagerRepository.Get().Select(u => u.LeadID).ToList();
        ViewData["Lead"] = new SelectList(db.UsersRepository.Get().Where(u => u.UserId != managerId && u.DepartmentID == deptId && !ManagerIds.Contains(u.UserId) && !LeadIds.Contains(u.UserId)).ToList(), "UserId", "UserName");
        return PartialView();
    }

现在用于列表框

@model CubicHRM.Data.Entities.Employee
@Html.ListBox("Employees", new MultiSelectList((IEnumerable<CubicHRM.Data.Entities.Employee>)(ViewData["Employees"]), "UserID", "UserName"), new { id = "sourceItems", Multiple = "multiple" })

采取行动方式

[HttpPost]
    public ActionResult LoadEmployeeListBox(int deptId, int managerId, int leadId)
    {
        List<int> ManagerIds = db.DepartmentManagerRepository.Get().Select(u => u.UserID).ToList();
        List<int> LeadIds = db.DepartmentManagerRepository.Get().Select(u => u.LeadID).ToList();
        ViewData["Employees"] = new SelectList(db.UsersRepository.Get().Where(u => u.UserId != managerId && u.DepartmentID == deptId && u.UserId != leadId && !ManagerIds.Contains(u.UserId) && !LeadIds.Contains(u.UserId)).ToList(), "UserId", "UserName");
        return PartialView();
    }

有人可以告诉我为什么我无法在第3个下拉列表和第4个（列表框）中加载记录。当我调试它甚至不调用

$("#ddlUsers").change(function () {
        debugger;
        var postParams = { deptId: $("#ddlDepartments").val(), managerId: $("#ddlUsers").val() };
        $.post('@Html.Raw(Url.Action("LoadUserOtherThanMangerCombo", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
        .done(function (newRow) {
            $("#dvLead").html(newRow);
        })
        .fail(function (ex1, ex2, ex3) {
            alert("error occured while Loading Lead");
        });

    });

我不知道为什么？任何人都可以帮我解决这个问题吗？

更新

我刚刚在为加载$("#ddlUsers").change(function () { });下拉列表创建的部分视图中移动了'ddlUsers'代码，现在我可以加载'ddlLead'下拉列表了。但是当我点击第3个下拉列表ddllead时，这又失败了。函数$("#ddlLead").change(function () { });没有被调用，可能是什么问题？为什么回发技巧仅适用于一个控件？

Answer 1

我只是将两个onchange函数（除了firstone之外）移动到其他视图，这些视图加载了我的下拉列表。实际上这是一个回发问题，所以在单个视图中，多个“ddl”的更改未被触发。将其移至部分视图就可以了解

MVC4级联下拉列表只适用于2个下拉列表而不是更多

1 个答案: