MVCのダブルドロップダウンメニューをロードするための計畫を最適化

従來、MVCアプリケーションに狀態(tài)と都市のドロップダウンメニューをロードするには、コントローラー操作とJavaScriptコードの組み合わせが必要です。この方法は効果的ですが、間違いを犯すのは退屈で簡単な場合があります。このタスクに対処するためのより効率的でより強力な方法を探りましょう。 ビューモデルと非侵襲的javascript

を使用して

ビュー內のドロップダウンメニューをコーディングする代わりに、必要なすべてのデータを封じ込めるためにビューモデルを導入することをお勧めします。さらに、非侵襲的JavaScriptを使用して、汚染マークなしでユーザーエクスペリエンスを強化します。

モデルを表示

コントローラー操作

コントローラー操作では、ビューモデルを準備し、ビューに渡します。

public class PersonViewModel
{
    public int StateID { get; set; }
    public int CityID { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }
}

<圖>view

ビューでは、

ヘルパーを使用してドロップダウンメニューを表示します。

public ActionResult Index()
{
    var states = GetStates().Select(s => new SelectListItem { Value = s.Id.ToString(), Text = s.Name }).ToList();
    var cities = GetCities().Select(c => new SelectListItem { Value = c.Id.ToString(), Text = c.Name }).ToList();
    var model = new PersonViewModel
    {
        States = states,
        Cities = cities
    };

    return View(model);
}

<侵>非侵襲的javascript

jQueryを使用して、州のドロップダウンメニューの動作を強化し、都市を動的にロードできます。

@Html.DropDownList

<勢>利點

@model PersonViewModel

...

@Html.DropDownListFor(m => m.StateID, Model.States, "請選擇州")
@Html.DropDownListFor(m => m.CityID, Model.Cities, "請選擇城市")

...

この方法は、次の利點を提供します

複數(shù)のコントローラーの操作を排除することにより、コードの複雑さが削減されます。

ビューモデル、コントローラー、ビュー間の焦點が分離されているため、メンテナンスが向上します。

$(document).ready(function() {
    $("#StateID").change(function() {
        var stateId = $(this).val();
        $.ajax({
            url: '@Url.Action("GetCities", "Home")',
            data: { stateId: stateId },
            success: function(response) {
                var citiesDropdown = $('#CityID');
                citiesDropdown.empty();
                citiesDropdown.append($("<option></option>").attr("value", "").text("請選擇城市")); // 添加默認選項
                $.each(response, function(index, city) {
                    citiesDropdown.append($("<option></option>").attr("value", city.Id).text(city.Name));
                });
            }
        });
    });
});

選択した狀態(tài)に都市をロードすることにより、ユーザーエクスペリエンスを改善することにより。

サーバーの負荷を減らすために必要な場合にのみ、 essableリクエスト。

注：上記のコードクリップでは、

および

メソッドが存在し、適切なデータが返されたと想定しています。
• の使用により、ドロップダウンメニューオプションがより標準化されました。 デフォルトのオプションを追加した後、「都市を選択」と「狀態(tài)を選択してください」を使用して、ユーザーエクスペリエンスを強化します。

以上が目立たないJavaScriptを使用して、MVCの依存性ドロップダウン（州および市）を効率的にロードするにはどうすればよいですか？の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。