在模态窗口 MVC4 上显示下拉列表答案

【问题标题】：showing dropdownlist on modal window MVC4在模态窗口 MVC4 上显示下拉列表
【发布时间】：2015-11-02 19:27:19
【问题描述】：

所以，我对 MVC 的这些东西还很陌生，但我在 ASP.Net 上有 10 年的回溯，我正在为在任何一个 asp.net 网络表单上如此简单的事情而烦恼或者干净、简单的 javascript 花了我这么多时间来解决。

问题是，我正在为几种类型的项目创建一些基本模板，因此，我的控制器和视图上有 CRUD 操作。到目前为止一切正常。

现在，我的控制器的 CRUD 操作，我将它们加载到模式窗口中，并且出于 UI 目的，我正在使用 BootStrap。创建、编辑、删除或查看详细信息视图加载到调用索引视图的模式窗口上没有问题，为此我使用$("#modalContent").load(url) 然后$("#modal").modal("show")，小菜一碟，并且到目前为止工作正常。我刚刚遇到了一个问题。

在一个视图中，我有这个下拉列表，其中一个值必须显示另一个下拉列表，从中分配模型属性的最终值。这是affor提到的视图代码

@model Sysbat.Models.Property

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_DetailsLayout.cshtml";
}


@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Create</h4>
    </div>
    <div class="modal-body" onload="setDDLEvents">
        <div class="editor-field form-group input-group">
            @Html.LabelFor(model => model.Name, new { @class = "input-group-addon" })
            @Html.EditorFor(model => model.Name, new { @class = "form-control" })
        </div>
        @Html.ValidationMessageFor(model => model.Name)
        <div class="editor-field form-group input-group">
            @Html.LabelFor(model => model.Type, new { @class = "input-group-addon" })
            @Html.DropDownList("ddlSimpleType", (SelectList) ViewBag.ListTypes, new { @class = "form-control", id = "ddlSimpleTypes" })
        </div>
        <div id="complexType" class="editor-field form-group input-group" style="display:none">
            @Html.Label("Complex Type", new { @class = "input-group-addon" })
            @Html.DropDownList("ddlComplexType", (SelectList) ViewBag.ListComplexTypes, new { @class = "form-control", id = "ddlComplexTypes" })
        </div>
        @Html.HiddenFor(model => model.Type, new { id = "hdnTypeValue" })
        @Html.ValidationMessageFor(model => model.Type)
    </div>
    <div class="modal-footer">
        <input type="submit" value="Create" class="btn btn-success" />
    </div>
}
@section scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(function() {
            $("#ddlSimpleTypes").on("change", function () {
                var val = $(this).val();
                if (val === "Complex") {
                    $("#hdnTypeVal").val('');
                    $("#ddlTiposObjetos").show();
                }
                else {
                    $("#hdnTypeVal").val(val);
                    $("#ddlTiposObjetos").hide();
                }
            });
            $("#ddlComplexTypes").on("change", function){
                    $("#hdnTypeVal").val($("#ddlComplexTypes").val());
            });
        };
    </script>
}

因此，如果代码不清楚，则 ddlSimpleType 的任何值都将通过隐藏字段存储在 model.Type 属性中，但是，如果 ddlSimpleType 下拉列表设置为“复杂”。然后将显示一个包含复杂类型的下拉菜单及其值集，这也将把选定的值存储到上述隐藏字段中。

我面临的问题是，设置字段事件的函数没有被触发。

我读过部分视图不可能做这种事情，但这是完整的视图，而且，我不想为每个使用特殊 javascript 逻辑的视图创建单个 js，我更喜欢内联。

有什么建议吗？

如果有帮助的话，这里是布局代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div id="wrapper">
        @RenderBody();    
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

【问题讨论】：

如果下拉列表是您的负载的一部分，它们将用您的 document.ready 替换附有事件的项目。在 load() 完成后，您可能需要重新绑定事件侦听器。另一方面，我在您的代码示例中看不到#modalContent。
#modalContent 位于索引视图用来加载的布局上。创建/编辑/删除/详细信息视图正在使用详细信息布局，该布局在引导模式窗口中加载到索引视图中
如果您将 onchange 事件编码到 html 属性中并命名函数而不是在文档加载时绑定它们会怎样？
看起来工作正常......在 Chrome 中。据我所知，即使在 Edge 上，IE 也存在 onchange 问题，因此我使用 jquery 是为了不搞砸这个

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

【解决方案1】：

嗯，最后我得到了答案出现在我面前的那一刻。

我使用$(document).load() 进行了测试，这是我最喜欢的在页面加载后执行代码的方法，但是后来我记得还有准备好的语句，所以我使用$(document).ready() 进行了测试，它完美无缺。

【讨论】：