1

Ajax.BeginFormの送信後、ドロップダウンリストカスケードchange（）はすぐには起動しません。

新しい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)
}

サビットの後、生成されるビューは次のとおりです。

@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ドロップダウンリストの2番目の変更の後にのみ機能します、何か考えはありますか？

ありがとう。

4

2 に答える 2

1

プラグインを開始するために変更ハンドラーを使用しないでください。プラグインコードは、変更ハンドラーを要素にバインドします。

変更ハンドラー内でプラグインを呼び出しているため、プラグインの変更ハンドラーは、最初の変更イベントがすでに発生しているため、次にselectが変更されるまで起動しません。

コードを次のように変更します。

$(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 に答える