MVCに2つの従属ドロップダウン（州と都市）を効率的にロードするにはどうすればよいですか？

MVCアプリケーションでの従属ドロップダウンロードの最適化

この記事では、MVCアプリケーション内で、相互接続された2つのドロップダウン（州と都市）の効率的な負荷について説明します。 一般的なアプローチでは、AJAXを使用して、州の選択時に都市のドロップダウンを埋めることが含まれます。ただし、これは大幅に改善される可能性があります。

強化された方法論：

ajaxは実行可能なオプションのままですが、いくつかの強化により効率と保守性が向上します：

1。 ViewModelsを活用する：2。控えめなJavaScriptを受け入れます：

3。 「選択」オプションを実装してください。は、両方のドロップダウンでnull値を持つ「選択」オプションを含めます。これにより、属性を使用してサーバー側の検証が容易になります

実例コードスニペット： [Required]

html：

javascript：

<code class="language-html">@Html.DropDownListFor(m => m.StateID, Model.States, "Select State")
@Html.DropDownListFor(m => m.CityID, Model.Cities, "Select City")</code>

さらなる機能強化：

<code class="language-javascript">const url = '@Url.Action("GetCities", "Home")';
const citiesDropdown = $('#CityID');
$('#StateID').change(function() {
    $.getJSON(url, { stateId: $(this).val() }, function(data) {
        citiesDropdown.empty().append($('<option/>').val('').text('Please select'));
        $.each(data, function(index, item) {
            citiesDropdown.append($('<option/>').val(item.Value).text(item.Text));
        });
    });
});</code>

キャッシング：広範な都市データセットの場合、頻繁にアクセスされる状態の冗長なデータベースクエリを最小限に抑えるためにデータキャッシュを実装してください。

データの事前荷重データ：

州と都市の数が比較的少ない場合は、すべての都市データをページの読み込みでJavaScriptアレイに事前ロードすることを検討し、AJAXコールの必要性を完全に排除します。 これにより、クライアント側のロジックが簡素化され、パフォーマンスが向上します
• この洗練されたアプローチにより、MVCアプリケーションでの従属ドロップダウンロードのパフォーマンスを最適化しながら、よりクリーンで保守可能なコードが保証されます。

以上がMVCに2つの従属ドロップダウン（州と都市）を効率的にロードするにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。