0

問題の解決策を見つけるために数日を費やしましたが、まったくできませんでした。
私がやっていることは、データベースの検索ページを作成することです。検索の詳細がわからないので、検索条件を追加するために ajax/部分ビューを使用しています (これは機能していない部分なので試してみることを意味します)。
私は愚かな間違いを犯しているのかもしれません...
ajax/部分ビューなしで動作していますが、それは私のプロジェクトの目的を実際には果たしません(十分に詳細ではありません)。
私のコードは次のとおりです。

これが、部分ビューを呼び出す私の ajax です。

<script src="@Url.Content("~/Scripts/jScript1.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{


@Ajax.ActionLink("Add search criteria",
              "AddSearch", new AjaxOptions
              {
                  UpdateTargetId = "search",
                  InsertionMode = InsertionMode.InsertAfter,
                  HttpMethod = "POST",
                  OnSuccess = "DBUpdate"
              })

<div id="search">

</div>


<input type="submit" value="Search" />
}

私の部分的な見方：

@model MvcApplication1.Models.search    


<div id="a">

 @Html.DropDownListFor(x => x.Table, Model.Tables, "-- Select Table --")
 @Html.DropDownListFor(x => x.Type, Enumerable.Empty<SelectListItem>(), "-- Select Type --")
 @Html.DropDownListFor(x => x.Name, Enumerable.Empty<SelectListItem>(), "-- Select Name --")
 @Html.EditorFor(x => x.less)
 @Html.EditorFor(x => x.equ)
 @Html.EditorFor(x => x.more)

</div>

そして私のjsファイル：

function DBUpdate() {


$('#Table').change(function () {
    var selectedTable = $(this).val();
    if (selectedTable != null && selectedTable != '') {
        $.getJSON('@Url.Action("Types")', { Table: selectedTable }, function (types) {
            var typesSelect = $('#Type');
            typesSelect.empty();
            $.each(types, function (index, types) {
                typesSelect.append($('<option/>', {
                    value: types.value,
                    text: types.text
                }));
            });
        });
    }
});


$('#Type').change(function () {
    var selectedType = $(this).val();
    var selectedTable = $('#Table').val();
    if (selectedType != null && selectedType != '') {
        $.getJSON('@Url.Action("Names")', { Type: selectedType, Table: selectedTable }, function (names) {
            var namesSelect = $('#Name');
            namesSelect.empty();
            $.each(names, function (index, names) {
                namesSelect.append($('<option/>', {
                    value: names.value,
                    text: names.text
                }));
            });
        });
    }
});


}


ダニエルの助けを借りて、前もって感謝します

4

2 に答える 2

1

コードにはいくつかの問題があります。

  • サーバー側のヘルパーを@Url.Action("Types")別の JavaScript ファイルなどで使用しようとしていますが、これは明らかに不可能です。
  • $('#Table')andなどの id セレクターを使用して$('#Type')いますが、複数の行を持つことができるため、同じ id を持つ複数のドロップダウン リスト => それらは不適切なセレクターです => どの要素を選択しているかわかりません。

それでは、これらの問題の改善を始めましょう。

まず、パーシャルを変更することから始めます。

@model search    
<div>
    @Html.DropDownListFor(
        x => x.Table, 
        Model.Tables, 
        "-- Select Table --", 
        new { 
            id = Guid.NewGuid(),
            @class = "tables", 
            data_url = Url.Action("Types") 
        }
    )

    @Html.DropDownListFor(
        x => x.Type, 
        Enumerable.Empty<SelectListItem>(), 
        "-- Select Type --", 
        new { 
            id = Guid.NewGuid(),
            @class = "types",
            data_url = Url.Action("Names") 
        }
    )

    @Html.DropDownListFor(
        x => x.Name, 
        Enumerable.Empty<SelectListItem>(), 
        "-- Select Name --", 
        new { 
            id = Guid.NewGuid(),
            @class = "names" 
        }
    )

    @Html.EditorFor(x => x.less)
    @Html.EditorFor(x => x.equ)
    @Html.EditorFor(x => x.more)
</div>

JavaScript でより簡単に選択できるように、クラス属性をドロップダウン リストに適用したことに注意してください。また、最初の 2 つのドロップダウン リストに URL を関連付けて、後で対応するコントローラー アクションにカスケードできるようにしました。

カスケードについて話して、jQuery プラグインを書きましょう。

(function ($) {
    $.fn.cascade = function (options) {
        var defaults = { 
            additionalParameters: function() {
                return { };
            } 
        };
        var opts = $.extend(defaults, options);

        return this.each(function () {
            $(this).change(function () {
                var selectedValue = $(this).val();
                var params = opts.additionalParameters() || {};
                params[opts.paramName] = selectedValue;
                $.getJSON($(this).data('url'), params, function (items) {
                    opts.childSelect.empty();
                    $.each(items, function (index, item) {
                        opts.childSelect.append(
                            $('<option/>')
                                .attr('value', item.value)
                                .text(item.text)
                        );
                    });
                });
            });
        });
    };
})(jQuery);

このプラグインを使用して、メイン ビューを変更することができます。

@using (Html.BeginForm())
{
    @Html.ActionLink(
        "Add search criteria",
        "AddSearch",
        null,
        new { id = "add" }
    )
    <div id="search"></div>
    <input type="submit" value="Search" />
}

Html.ActionLinkあとは、アンカーのクリック イベントをサブスクライブし ( の代わりに法線を使用していることに注意してAjax.ActionLinkください)、プラグインをアタッチするだけです。

$(function () {
    $('#add').click(function () {
        $.post(this.href, function (result) {
            var $result = $(result);
            $('#search').append($result);
            var tablesSelect = $('.tables', $result);
            var typesSelect = $('.types', $result);

            tablesSelect.cascade({
                paramName: 'table',
                childSelect: $('.types', $result)
            });
            typesSelect.cascade({
                paramName: 'type',
                additionalParameters: function () {
                    return { table: tablesSelect.val() };
                },
                childSelect: $('.names', $result)
            });
        });
        return false;
    });
});

これはすべて、別の JavaScript ファイルで発生する可能性があります。これは明らかに、カスケード ドロップダウン リストの JSON 値を返す 2 つの対応するコントローラー アクションがあることを前提としています。

以下は、入力/出力が何であるかを確認できるように、単なるモックです。もちろん、ダミー値をより現実的な値に置き換えます。

public ActionResult Types(string table)
{
    var model = Enumerable.Range(1, 5).Select(x => new
    {
        value = x,
        text = "type " + x
    });
    return Json(model, JsonRequestBehavior.AllowGet);
}

public ActionResult Names(string type, string table)
{
    var model = Enumerable.Range(1, 2).Select(x => new
    {
        value = x,
        text = "name " + x
    });
    return Json(model, JsonRequestBehavior.AllowGet);
}
于 2012-04-10T20:22:57.000 に答える
0

change関数をdocument.ready（）でラップしてみてください

$.document.ready(function () {
    $('#Table').change(function () {
     .....

    $('#Type').change(function () {
     ....
});

そうしないと、変更イベントがページにまだ存在しない要素にバインドされる可能性があります。つまり、バインドされることはありません。

編集

これをメインビューに追加してみてください

<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
于 2012-04-10T16:00:06.377 に答える