在模式窗口MVC4上显示下拉列表

showing dropdownlist on modal window MVC4

本文关键字：显示 下拉列表 MVC4 模式 窗口      更新时间：2023-09-26

所以，我对MVC这个东西相当陌生，但是我有10年的ASP经验。Net，我撕裂我的头，为什么这么简单的东西，无论是asp.net web表单或干净，简单的javascript花了我这么多时间来解决。

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

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

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

@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下拉框设置为"Complex"。然后将显示一个包含复杂类型的下拉菜单及其值集，它也将把所选值存储到前面提到的隐藏字段中。

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

我读到部分视图是不可能做这种事情，但这是完整的视图，也，我不想为每个视图创建一个单独的js，使用特殊的javascript逻辑，我宁愿内联。

任何建议吗?

如果有帮助的话，下面是布局代码

@{
    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).load()进行测试，这是我最喜欢的执行代码的方法，一旦页面加载，但是，我记得还有ready语句，所以我用$(document).ready()进行测试，它工作得很完美。

相关文章：