目立たないJavaScriptを使用して、MVCの依存性ドロップダウン（州および市）を効率的にロードするにはどうすればよいですか？

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

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

を使用して

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

モデルを表示

コントローラー操作

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

<code class="language-csharp">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; }
}</code>

view

ビューでは、

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

<code class="language-csharp">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);
}</code>

非侵襲的javascript

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

@Html.DropDownList

利点

<code class="language-html">@model PersonViewModel

...

@Html.DropDownListFor(m => m.StateID, Model.States, "请选择州")
@Html.DropDownListFor(m => m.CityID, Model.Cities, "请选择城市")

...</code>

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

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

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

<code class="language-javascript">$(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));
                });
            }
        });
    });
});</code>

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

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

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

および

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

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