簡體   English   中英

在模態窗口MVC4上顯示下拉列表

[英]showing dropdownlist on modal window MVC4

因此,我對這種MVC還是比較陌生,但是我在ASP.Net上擁有10年的往績,而對於asp.net Web表單或清理方面的如此簡單的事情,我深信不疑。簡單的javascript花了我很多時間來解決。

問題是,我正在為幾種類型的項目創建基本模板,因此,控制器和視圖上都有CRUD操作。 到目前為止,一切正常。

現在,我的控制器的CRUD操作將它們加載到模式窗口中,並且出於UI的目的,我正在使用BootStrap。 創建,編輯,刪除或查看詳細信息視圖會毫無問題地加載到在索引視圖上調用的模式窗口中,為此,我正在使用$("#modalContent").load(url)然后使用$("#modal").modal("show")$("#modal").modal("show")就是小菜一碟,並且到目前為止已經可以正常使用了。 我只是遇到一個問題。

在一個視圖中,我有一個下拉列表,該下拉列表的值之一必須顯示另一個下拉列表,將從該列表中分配model屬性的最終值。 這是上面提到的查看代碼

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

因此,如果代碼不清楚, model.Type通過隱藏字段將ddlSimpleType任何值存儲在model.Type屬性中,但是,如果ddlSimpleType下拉列表設置為“ Complex”。 然后將顯示一個包含復雜類型的下拉列表並設置其值,該值還將選擇的值存儲到后面提到的隱藏字段中。

我面臨的問題是,設置字段事件的功能沒有被觸發。

我已經讀過部分視圖不可能做這種事情,但是這是完整視圖,而且,我不想為每個使用特殊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).load()進行了測試,這是我最喜歡的在頁面加載后執行代碼的方法,但是隨后,我記得還有一個ready語句,所以我使用$(document).ready()和它工作完美。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM