質問

2 つの依存ドロップダウン リストを持つアプリケーションがあり、ユーザーがリスト ボックス A の値を選択すると、リスト ボックス B で使用可能な入力のセットが更新されます。車のメーカー/モデルなど。ユーザーがメーカーを選択すると、それに応じてモデルのリストが更新されます。

winform では、これは autopost back イベントでのみ処理されます。asp.net MVC ではどのようなテクニック/アプローチをとるべきですか?AJAX を通じて行われますか?MVC を理解しようとしており、仕事で要求される一般的なタスクを処理するための戦略を構築したいと考えています。

この投稿への回答にご協力いただいた皆様に感謝したいと思います。

役に立ちましたか?

解決

私は、Ajaxを介してこれを行うと思います。あなたはこれらのコントロールを使用している場合:

<select id="makes" /><select id="models" />

あなたはjQueryを使ってこれを行うことができます:

$().ready(function() {
   $("select#makes").change(function() {
        var make = this.value;          
        $.getJSON('models/list?make=' + make, function(data) {
              //load 2nd dropdown with result
        })
   });
});

次に、あなただけのJSONデータ構造を返す)(ModelsController上のアクションがリストと呼ばれる必要があると思います。

他のヒント

ASP.NET MVC を使用していることは多少無関係です。Web ページ上のこのタイプの UI メカニズムには、基本的に 3 つのオプションがあります。

  1. リスト内のデータが比較的小さく、変更頻度が低い場合は、最初のリクエストで、JavaScript 配列またはページ マークアップの非表示要素などのいずれかで、ページ上のすべての可能なデータを事前にロードするのが最も簡単です。ボックス A の値が変更されると、JavaScript はボックス B の内容を適切なデータに置き換えるだけです。これはすべて、サーバーにリクエストを返すことなく行われるため、非常に高速になります。ただし、データのサイズが最初のページ読み込みの応答時間に影響を与える場合、この方法は機能しません。

  2. リスト内のデータが大きい場合、または頻繁に変更される場合 (ユーザーがページ上で意思決定を行う時間枠内)、従来の方法では、ボックス A の値が変更されたときに新しいクエリ引数でページをリロードするだけです。変化します。バックエンドのコードは、新しい引数に基づいて出力を調整します。ページ内の残りのレンダリング コードの複雑さによっては、コストがかかる可能性があります。

  3. これはオプション 2 のバリエーションであり、基本的には Ben Scheirman が ajax に関して与えた答えです。ボックス A が変更されたときも、オンデマンドでボックス B の内容をロードしています。違いは、ページ全体ではなく、変更されたページの一部のみを再読み込みすることです。

個人的には、データがオプション 1 を使用できるほど小さい場合は、パフォーマンスの点からおそらくこれを選択するでしょう。それ以外の場合は、特に他の ajax 関連の機能がすでに実装されている場合は、オプション 3 を使用してください。オプション 2 は、最近では多くの人によってレガシーな仕組みだと考えられているようです。

機能的には、それは自分自身の部分図でこれらの2つのドロップリストを配置し、リスタ内の値を選択しているときに、ちょうどその返すために働くだろう。それは、レイアウトの目的のために実行可能ではない場合には、ベンの方法は、上記のよさそうだ。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top