级联 DropDownListFor ASP.NET MVC答案

【问题标题】：Cascading DropDownListFor ASP.NET MVC级联 DropDownListFor ASP.NET MVC
【发布时间】：2014-09-11 18:29:45
【问题描述】：

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

<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 中注册了一个更改事件，该事件填充第二个下拉列表。第二个下拉列表有一个更新标题的更改事件。

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() 函数时，第二个下拉列表尚未填充。有什么方法可以等到填充下拉菜单才能调用该函数？

【问题讨论】：

尝试将 updateTitle 移动到 getJSON 中（将其放在 each 之后，希望它会按顺序命中并给出您想要的结果。另一个不太理想的选择是将更新放入延迟和延迟中它
updateTitle() 函数已经按照所写的方式执行。问题是 $("BLL_2>option:selected").text() 返回一个空白字符串。使用调试器时，调用 updateTitle() 时下拉列表尚未明显更新。我假设这就是所选语句返回空白字符串的原因。我一直在阅读有关数据绑定的信息，但我不确定这意味着什么。我是否必须等到数据绑定到下拉列表才能尝试确定所选项目？
我想是的，是的。这就是为什么我建议将它移到 getJSON 中。将它放在外面可能会调用 getJSON，然后在 get 完成之前调用您的更新。我希望把它移到里面可以解决时间问题
出色的通话。现在工作得很好。感谢您的帮助。您应该将其重写为答案，以便我给予您信任。
完成。谢谢先生：）

标签： javascript jquery html asp.net-mvc cascadingdropdown

【解决方案1】：

我发现通过将调用放入其中，它们将被顺序触发。如果它们在外面，那么它将调用数据库并尝试在数据库调用完成之前调用更新，这会导致问题。尝试像这样更改您的代码

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
    });
});

【讨论】：