当前位置：文江博客话题详情

在 asp.net mvc 中加载一个下拉菜单以选择其他下拉菜单

发布于 2024-10-13 04:13:18 字数 48 浏览 2 评论 0原文

我如何在选择第一个和第三个时加载第二个下拉列表。在 asp.net mvc 2 中

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情痴 2024-10-20 04:13:18

我让下拉菜单触发一个ajax post，将选定的ID发送到控制器，然后返回一个部分视图，该视图覆盖占位符div的html。

看法;这设置了 ActionUrl，您还需要一个占位符 div（在我的例子中称为“部门”）来注入下拉列表：

    <script type="text/javascript">
        var ActionUrl = '<%= Url.Action("RenderDepartments", "ControllerName") %>';
    </script>
    <script src="<%: ResolveUrl("~/Scripts/Custom/DepartmentFilter.js")%>" type="text/javascript"></script>
    <%: Html.DropDownListFor(model => model.OfficeId, Model.ListItems, "-- Please Select --", new { onchange = "GetDepartments()" })%>
    // ^^ ON CHANGE IS IMPORTANT  ^^
    <div id="departments"></div>

JQuery；

     function GetDepartments() {
            $.ajax(
            {
                type: "POST",
                url: ActionUrl,
                data: { officeId: $("#OfficeId").val() },
                success: function (data) {
                        $("#departments").html(data);
                }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('XMLHttpRequest:' + XMLHttpRequest.responseText);
                    alert('textStatus:' + textStatus);
                    //alert('errorThrown:' + errorThrown);
                }

            });
     }

控制器动作；

        public ActionResult RenderDepartments(int? officeId)
    {
        if (officeId.HasValue)
        {
            var departments = new SelectList(ents.GetDepartments(officeId), "departmentID", "Name");
            var model = new DropdownListViewModel(departments);

            return PartialView("DepartmentDropdown", model);
        }
        return null;
    }

这是可以为空的，因为用户可以提交“--请选择--”，在这种情况下将返回 null 并删除部门下拉列表。

I have the dropdown trigger an ajax post that sends the selected ID selected to a controller and then return a partial view which overwrites the html for a placeholder div.

View; this sets the ActionUrl, you will also need a placeholder div (in my case called departments) for the drop down to be injected:

    <script type="text/javascript">
        var ActionUrl = '<%= Url.Action("RenderDepartments", "ControllerName") %>';
    </script>
    <script src="<%: ResolveUrl("~/Scripts/Custom/DepartmentFilter.js")%>" type="text/javascript"></script>
    <%: Html.DropDownListFor(model => model.OfficeId, Model.ListItems, "-- Please Select --", new { onchange = "GetDepartments()" })%>
    // ^^ ON CHANGE IS IMPORTANT  ^^
    <div id="departments"></div>

JQuery;

     function GetDepartments() {
            $.ajax(
            {
                type: "POST",
                url: ActionUrl,
                data: { officeId: $("#OfficeId").val() },
                success: function (data) {
                        $("#departments").html(data);
                }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('XMLHttpRequest:' + XMLHttpRequest.responseText);
                    alert('textStatus:' + textStatus);
                    //alert('errorThrown:' + errorThrown);
                }

            });
     }

Controller Action;

        public ActionResult RenderDepartments(int? officeId)
    {
        if (officeId.HasValue)
        {
            var departments = new SelectList(ents.GetDepartments(officeId), "departmentID", "Name");
            var model = new DropdownListViewModel(departments);

            return PartialView("DepartmentDropdown", model);
        }
        return null;
    }

This is nullable because the user could submit "-- please select --" which will in this case return null and remove the departments dropdown.

回复收藏 0 原文

~没有更多了~