ASP.NET MVC的层叠DropDownList [英] Cascading DropDownListFor ASP.NET MVC

问题描述

我有一个页面，其中包含两个下拉列表(DropDownListFor)，这些下拉列表在加载时填充.一个是类别，另一个是适合该类别的项目.下面的标题(TextAreaFor)已更新，以反映第二个下拉列表中的文本.

I have a page with two drop downs (DropDownListFor) that are populated on load. One is a category and the other is the items that fit that category. There is a title (TextAreaFor) below that is updated to reflect the text in the second drop down.

<div class="form-group">
    @Html.LabelFor(model => model.BLL_ID, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.DropDownListFor(model => model.BLL_ID, Model.BLL_Categories, new { @style = "max-width: 500px;" })
    </div>
</div>


<div class="form-group">
    @Html.LabelFor(model => model.BLL_2, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">    
        @Html.DropDownListFor(model => model.BLL_2, SessionManager.CurrentBLL.OriginalBLL, new { @style = "max-width: 500px;" })
        @Html.ValidationMessageFor(model => model.BLL_2, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.TextAreaFor(model => model.Note, htmlAttributes: new { @class = "form-control", @rows = "3", @readonly = "true" })
    </div>
</div>

第一个下拉列表具有在JS中注册的change事件，该事件填充第二个下拉列表.第二个下拉菜单中有一个change事件，用于更新标题.

The first drop down has a change event registered in JS that populates the second drop down. The second drop down has a change event that updates the title.

var categories = $("#BLL_ID");
var requests = $("#BLL_2");

$("#BLL_2").change(function () {
    updateTitle();
});

categories.change(function () {
    requests.find('option').remove();
    $.getJSON('_Some_Page', { Category: 
         $("#BLL_ID>option:selected").val() }, function (data) {
         $(data).each(function (index) {
                $("<option value=" + this.Value + ">" + this.Text + "
                       </option>").appendTo(requests);
         });
    });
    updateTitle();
});

function updateTitle() {
    var title = $("#BLL_2>option:selected").text();
    $("#Note").val(title);
}

问题与第一个下拉更改事件中的标题更新有关.如果使用JS调试器，则会注意到在调用updateTitle()函数时，第二个下拉列表尚未填充.有什么方法可以等待直到填充下拉列表来调用该函数?

The issue is regarding the title update during the first drop down change event. If I use the JS debugger, I notice that the second drop down is not populated yet when the updateTitle() function is called. Is there any way to wait until the drop down is populated to call the function?

推荐答案

我发现，通过将调用放入内部，它们将被顺序触发.如果他们不在外面，它将在数据库调用完成之前调用数据库并尝试调用更新，这将导致问题.尝试像这样更改代码

I have found that by putting calls inside they will be fired sequentially. If they are outside then it will call the database and try to call the update before the database call has finished and will cause issues. Try changing your code like this

categories.change(function () {
    requests.find('option').remove();
    $.getJSON('_Some_Page', { Category: 
         $("#BLL_ID>option:selected").val() }, function (data) {
             $(data).each(function (index) {
                $("<option value=" + this.Value + ">" + this.Text + "
                   </option>").appendTo(requests);
             });
         updateTitle(); //move the update here so it is inside the getJSON
    });
});

这篇关于ASP.NET MVC的层叠DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！