0

私はまだMVC4について学んでいます。

次のシナリオを想像してください: コンテンツ用に 3 つの dropDownLists と 1 つの大きな div があります。ロードオンデマンドの処理方法がわかりません。

フローは簡単で、ページが読み込まれると、最初のドロップダウンリストにデータが表示されます。これに値がある場合、2 番目は必要に応じて (ddl1 から選択した値を使用して) 情報をロードする必要があり、ddl3 の値を変更してデータを表示するまでこれを繰り返します。

ここまでで、2 つの部分ビューを検出しました。各 ddl は 1 つの部分ビューにある必要があるため、5 を作成する必要があるかどうかはわかりません。

もう1つ、を維持するために何をお勧めしますか?viewModelで各ddlのコレクションSelectListを使用または維持する必要がありますか?ViewBag

ここに画像の説明を入力

このシナリオを明確にすることができるかどうかを知っているのは 1 つだけです。つまり、これをどのように開始できるかについての考えを教えてください。実際、この疑いについて言及するのを忘れていましたが、AJAX を使用する必要がある場合は言及しません。

4

1 に答える 1

0

私は数週間前に同じ種類のもので立ち往生しました:-

あなたのMVC呼び出しを次のようにしましょう:-

    private void LoadDropdown1()
    {
        var _data;//Your logic to get the data
        ViewData["Dropdown1"] = new SelectList(_data, "Dropdown1Id", "Name");
    }
    private void LoadDropdown2(int dropdownParameterId)
    {
        var _data = "";//Use your ID to get the data
        ViewData["Dropdown2"] = new SelectList(_data, "Dropdown2Id", "Name");
    }

あなたの .cshtml は:-

@using (Html.BeginForm())
{
    <div>
        <table>
            <tr>
                <td><b>Select a District:</b></td>


                <td>@Html.DropDownListFor(m => m.Dropdown1Id, ViewData["Dropdown1"] as IEnumerable<SelectListItem>, "Select One", new {@id="Dropdown1Id"})</td>
            </tr>
            <tr>
                <td><b>Select:</b></td>

                <td>@Html.DropDownListFor(m => m.Dropdown2Id, ViewData["Dropdown2"] as IEnumerable<SelectListItem>, "Select One")</td>
            </tr>
        </table>
    </div>
}

ドロップダウンにデータをロードするには、AJAX 呼び出しが最適です。

$(function () {
    $('select#Dropdown1').change(function () {
        var id = $(this).val();


        $.ajax({
            url: 'Bla Bla',
            type: 'POST',
            data: JSON.stringify({ id: id }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $.each(data, function (key, data) {
                    $('select#Dropdown1').append('<option value="0">Select One</option>');
                    // loop through the LoadDropdown1 and fill the dropdown
                    $.each(data, function (index, item) {
                        $('select#Dropdown1').append(
                            '<option value="' + item.Id + '">'
                            + item.Name +
                            '</option>');
                    });
                });
            }
        });
    });
});

私が言おうとしているのは..最初のドロップダウンを好みの方法でロードします。次に、最初のドロップダウンの変更イベントで、ajax 呼び出しを起動して、2 番目のドロップダウンのデータを取得できます..同様に..

参考：-選択変更イベント時 - Html.DropDownListFor

于 2013-02-22T06:12:14.257 に答える