1

DropDownList 変更イベントで AJAX を使用して、ページの部分ビューを動的に変更する方法はありますか?

私のメイン ページには、DropDownList (DropDownListFor)と、「アイテム」のリストのみを含む部分ビューがあります。この部分ビューに表示されるアイテムは、DropDownList で選択されたアイテムに依存します。DropDownList 項目と部分ビューの項目の間には、1 対多の関係があります。そのため、ユーザーが DropDownList の値を変更すると、部分ビューのコンテンツが動的に変更され、DropDownList で選択された項目が反映されます。

ここに私のドロップダウンリストがあります:

<div data-role="fieldcontain">
    Choose Capsule:<br />
    @Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules" })
    <br />
</div>

同じページにある私の部分ビュー宣言は次のとおりです。

<div data-role="fieldcontain">
    @Html.Partial("_FillerPartial", Model.Fillers)
</div>

私は Ajax にはあまり詳しくありませんが、他の例を見ると、私の Ajax には次のようなものがあります。

$(document).ready(function () {
    $('#ddlCapsules').change(function () {
        // make ajax call to modify the filler list partial view

        var selection = $('#ddlCapsules').val();
        var dataToSend = { cappk: selection };

        $.ajax({
            url: 'Process/GetFillersByCapsule',
            data: { cappk: dataToSend },
            success: function (data) {
                alert("server returned: " + data);
            }
        });
    });
});

そして最後に、これが何が起こっているかのスクリーンショットです。「Choose Capsule」ドロップダウン リストを変更して、Filler リストを動的に更新します。

ここに画像の説明を入力

4

2 に答える 2

2

ドロップダウンリストは、ajaxを使用してコントローラーから部分ビューとしてロードできます。

コントローラコード：

    [HttpGet]
    public virtual ActionResult GetFillersByCapsule(string cappk)
    {
        var model = //Method to get capsules by pk, this returns a ViewModel that is used to render the filtered list. 
        return PartialView("PartialViewName", model);
    }

メインビューのhtml：

<div id="filteredList">
</div >

部分図

@model IEnumerable<MyCapsuleModel>
foreach (var x in Model)
{
     //Render the appropriate filtered list html.
}

そして、ajaxを使用してフィルタリングされたリストをロードできます：

$('#ddlCapsules').change(function () {
    // make ajax call to modify the filler list partial view

    var selection = $('#ddlCapsules').val();
    var dataToSend = { cappk: selection };

    $.ajax({
        url: 'Process/GetFillersByCapsule',
        data: { cappk: dataToSend },
        success: function (data) {

            $("#filteredList").empty();
            $("#filteredList").html(data);
        }
    });
});

お役に立てれば。

于 2013-03-05T00:33:52.053 に答える
1

ページをリロードしないとパーシャルが再度レンダリングされることはないため、パーシャル自体を更新することはできません。HTMLを受信すると、ASPが完了し、その時点で自分自身になります。

もちろん、できることは、JavaScriptを使用して特定のdivまたはその他のコンテンツを切り替えることです。特にあなたの例はノックアウトを叫ぶので、それを使用することをお勧めします。

HTMLを変更して、含まれているdivにデータバインドを追加します。

<div data-role="fieldcontain" data-bind="foreach: filler">
    <button data-bind="text: name"></button>
</div>

そしてあなたのDropDownList：

@Html.DropDownListFor(x => x.CapsuleFK, new SelectList(Model.Capsules, "pk", "name", "pk"), new { id = "ddlCapsules", data_bind = "event: { change: updateFillers }" })

次に、JavaScript：

var FillersViewModel = function () {
    var self = this;

    self.fillers = ko.observableArray([]);

    self.updateFillers = function () {
        var selection = $('#ddlCapsules').val();
        var dataToSend = { cappk: selection };

        $.ajax({
            url: 'Process/GetFillersByCapsule',
            data: { cappk: dataToSend },
            success: function (data) {
                self.fillers(data.fillers) // where `fillers` is an array
            }
        });
    }
}

var viewModel = new FillersViewModel();
ko.applyBindings(viewModel);

これは非常に単純な例であり、シナリオで必要なすべてのことを実行するには、さらにいくつかの作業を行う必要がありますが、一般的な考え方は、ドロップダウンリストが変更されるたびに、KnockoutがupdateFillersメソッドを呼び出すというものです。 、AJAXを実行し、新しいデータをfillers監視可能な配列に配置します。Knockoutは、この配列への変更を自動的に追跡するため（したがって、「監視可能な」部分）、それに依存するページの任意の部分に対して更新が自動的にトリガーされます。このシナリオでは、それがボタンを含むdivです。foreachバインディングは、配列の各メンバーに対して内部のHTMLを繰り返します。ここでは説明のために単純なボタン要素を使用しましたが、インターフェイスのような特定のボタンを作成するために必要な完全なHTMLを含めることになります。Thetextバインディングはname、開始タグと終了タグの間にあるコンテンツをドロップします。使用しているすべてのバインディングオプションについては、 http： //knockoutjs.com/documentation/introduction.htmlを参照してください。

これでできることはもっとたくさんあります。HTMLをハードコーディングする代わりに、テンプレートを実装して、で繰り返すことができますforeach。また、部分ビューを使用して、このテンプレートのHTMLを制御できます。重要なのは、Knockoutがこの繰り返しHTMLをすべて生成する手間を省くということです。そのため、Knockoutを使用することをお勧めします。

それがあなたが始めるのに十分であることを願っています。

于 2013-03-04T22:01:33.250 に答える