1

Ajax.BeginForm 提交后，下拉列表级联更改（）不会立即触发。

生成新 DropDownList 的视图：

@model Heelp.ViewModels.CreateAdCategoryTypeViewModel
@using (Ajax.BeginForm(MVC.Ad.CreateAd(), new AjaxOptions { UpdateTargetId = "ad", InsertionMode = InsertionMode.Replace }, new { @id = "categoryTypeForm" }))
{
    @Html.HiddenFor(m => m.Category_Id)

    @Html.DisplayNameFor(m => m.CategoryType_Id)
    @Html.DropDownListFor(m => m.CategoryType_Id, Model.CategoryList, HeelpResources.DropdownlistCategoryFirstRecord)
    @Html.ValidationMessageFor(m => m.CategoryType_Id)
}

sumbit 后，生成的 View 为：

@model Heelp.ViewModels.CreateAdCarViewModel

@using (Html.BeginForm()) {

<fieldset>
    <legend>Car</legend>

   <div id="makes">
        @Html.DisplayNameFor(m => m.Make_Id)
        @Html.DropDownListFor(m => m.Make_Id, Model.MakeList, HeelpResources.DropdownlistMakeFirstRecord)
        @Html.ValidationMessageFor(m => m.Make_Id)
    </div>
    <div id="models">
        @Html.DisplayNameFor(m => m.Model_Id)
        @Html.DropDownListFor(m => m.Model_Id, Model.ModelList)
        @Html.ValidationMessageFor(m => m.Model_Id)
    </div>        
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

此时我有一个级联函数在进行更改以填充模型列表时触发：

$(document).ready(function () {
    $(document).on("change", "#Make_Id", function () {
        $('#Make_Id').cascade({
            source: "/Ad/ListModelByMake",
            cascaded: "Model_Id"
        });
    });
});

级联功能：

// Cascade function
(function ($) {
$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
        $(this).change(function () {
            var selectedValue = $(this).val();
            var params = {};
            params[opts.paramName] = selectedValue;
            $.post(opts.url, params, function (items) {
                //$.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                if (opts.firstOption != "")
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', '-1')
                            .text(opts.firstOption));
                $.each(items, function (index, item) {
                    // alert(opts.firstOption);
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', item.Id)
                            .text(item.Name)
                    );
                });
            });
        });
    });
};
})(jQuery);

不幸的是，它仅在 Makes Dropdownlist 上的第二次更改后才有效，知道吗？

谢谢。

4

2 回答 2

1

不要使用更改处理程序来启动插件。插件代码将更改处理程序绑定到元素。

由于您在更改处理程序中调用插件，因此插件的更改处理程序将在下一次更改选择之前不会触发，因为初始更改事件已经发生。

将代码更改为：

$(document).ready(function () {   
        $('#Make_Id').cascade({
            source: "/Ad/ListModelByMake",
            cascaded: "Model_Id"
        });   
});
于 2013-01-04T02:25:47.083 回答
0

感谢 Charlietfi，我能够解决这个问题，这里是解决方案：

在 Ajax.Form 中，我们需要添加一个 OnSucess 调用来定义级联函数：

@using (Ajax.BeginForm(MVC.Ad.CreateAd(), new AjaxOptions { UpdateTargetId = "ad", InsertionMode = InsertionMode.Replace, OnSuccess = "createAdCategoryTypeOnSucess" }, new { @id = "categoryTypeForm" }))

然后在一个外部的JS文件中，我们可以定义级联定义：

function createAdCategoryTypeOnSucess() 
{
    $("#Make_Id").cascade({
        url: "/Ad/ListModelByMake",
        paramName: "makeId",
        firstOption: '',
        childSelect: $("#Model_Id")
    });
}

像这样，该事件在下拉更改后立即触发。

再次感谢 charlietfl ;)

于 2013-01-05T12:55:59.807 回答