web-dev-qa-db-ja.com

Jsonデータを含むJavascript / Jqueryを使用して、クリック時に選択ボックスのオプションを設定します

私はまだJqueryを学んでおり、手元にあるタスクと少し混同しています。

単純なタスクのようです...クリック時にオプションを入力するボックスがあります。誰かが実際にリストの表示をリクエストした場合にのみ、ページの読み込み時にデータが読み込まれることを望まない。また、1回だけ入力する必要があります。誰かがリストを展開するたびにリクエストを送信したくありません。

Select要素に関数呼び出しがあると思います

<select id="usersList" name="usersList" onclick="getUsers()">

そして、Javascript getUsers（）関数にJson GetUsers（）ActionMethodを呼び出してそのリストを取得させます。どうやって ？

何かのようなもの...？

function getUsers()
{
 getJSON("/Users/GetUsers", null, function (data){}
}

またはJQuery？...

$("usersList").click(
  $.getJSON("/Users/GetUsers", null, function (data) {}
  )

私はこの投稿を見たことに言及する必要があります： selectlistがロードされたとき（ドキュメントではなく）jQueryでjsonデータをselectlistに入力します

しかし、私はそれをすべてまとめて助けてください。前もって感謝します！

jqueryajaxasp.net-mvcjsonselect
17
InspiredBy

以下に、選択ボックスに入力するために使用するJavaScriptを示します。

$.getJSON("/Users/GetUsers", null, function(data) {
    $("#UsersList option").remove(); // Remove all <option> child tags.
    $.each(data.Users, function(index, item) { // Iterates through a collection
        $("#UsersList").append( // Append an object to the inside of the select box
            $("<option></option>") // Yes you can do this.
                .text(item.Description)
                .val(item.Id)
        );
    });
});

ユーザーが選択ボックスをクリックしたときではなく、ページの読み込み時にこれをトリガーすることをお勧めします。 jQuery AJAXはデフォルトでは非同期）であるため、選択ボックスが空になるまで1〜2時間があり、ユーザーを混乱させる可能性があります。

これはあなたの質問の範囲でしたか、それともMVC側の支援も必要ですか？ ASP.Net MVCを使用している場合、実際にはJsonResultの特定の結果タイプがあり、対応するビューを必要としないため、JSONコントローラーメソッドの作成が少し簡単になります。また、匿名データ構造を使用して、メソッド固有の予測を少し簡単にすることもできます。

[〜＃〜] edit [〜＃〜]これは、上記のjQueryコードが理解できるJSON構造を返すための基本的な方法です。プロパティu.Usernameおよびu.ID Usersオブジェクトに依存します。

[HttpPost] 
public JsonResult GetUsers() { 
    return Json(new {
        Users = from u in _usersRepository.Get()
                select new { Description = u.Username, ID = u.ID }
    }); 
}

ただし、できるだけ早くこのアプローチを中止し、標準のJSONメッセージ構造を使用することをお勧めします。私が使用するものは次のようなものです：

{
    Success: bool,
    LoggedIn: bool,
    ClientErrors: [
        { Number: int, Description: string, Parameter: string },
        { Number: int, Description: string, Parameter: string }...
    ],
    ServerErrors: [
        { Id: int, Message: string },
        { Id: int, Message: string }...
    ],
    Data: {}
}

これを行ういくつかの理由を次に示します。

  1. 間違いなく、JSONメソッドライブラリは一種のプロトコルであるため、標準ヘッダーの恩恵を受けます。
  2. エラー処理は、これから最も恩恵を受けます。何かがうまくいかなかったことをユーザーに知らせるための一貫した方法を持つことは、今後非常に貴重です。
  3. クライアントエラー（不正なユーザー名、不正なパスワードなど）とサーバーエラー（データベースオフライン）を区別することは非常に重要です。 1つはユーザーが修正でき、もう1つは修正できません。
  4. 適切な入力フィールドの横にこれらのエラーメッセージを簡単に表示できるように、クライアントエラーはメッセージだけでなく、それを引き起こすメソッドのパラメーター（該当する場合）を返す必要があります。
  5. クライアントエラーは、エラーを識別する一意の番号（メソッドごと）も提供する必要があります。これにより、多言語サポートが可能になります。
  6. サーバーエラーは、ログに記録されたエラーのIDを提供する必要があります。これにより、ユーザーがサポートに連絡して、実行中の特定のエラーを参照できるようになります。
  7. Loggedinブール値を使用すると、JSONメソッドのリダイレクトアクションの結果は効果がないため、認証が必要なメソッドを使用するすべてのページで、必要に応じてユーザーをログイン画面に簡単にリダイレクトできます。
  8. 最後に、データフィールドはメソッド固有のデータを提供する場所です。

私の構造をの方法と考えてはいけません。明らかに、アプリケーションのニーズは私のアプリケーションのニーズと大きく異なる可能性があります。一貫性、特定の構造よりも、ここでのレッスンです。

編集：2016年6月1日-人々がまだこの答えを見ているように見える。ドロップダウンの設定に関しては、双方向バインディングフレームワークの使用を検討することをお勧めします。個人的には、Knockout.JSが簡単で軽量であることを好みますが、Angular.JSも同じように機能します。それ以外は、この回答の残りの部分はまだかなり最新です。

編集：2016年8月10日-コードにコンマがありませんでした。

38
Spencer Ruport

JQueryオプションを使用します。

_// You are missing the new anonymous function call
$("#usersList").click(function() {
    // If the select list is empty:
    if ($(this).find("option").size() > 0) {
        // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/
        $.getJSON("/Users/GetUsers.php", null, function (data) {
            $.each(data.items, function(i,item){
                // Create and append the new options into the select list
                $("#usersList").append("<option value="+item.id+">"+item.yourName+"</option>");
            });
        });
    }
});
_

append()操作は比較的「高価」なので、情報を含む文字列を作成して、次のように一度だけ追加することもできます。

_var collaboration = "";
$.each(data.items, function(i,item){
    collaboration += "<option value="+item.id+">"+item.yourName+"</option>";
});
$("#usersList").append(collaboration);
...
_

jsfiddle は、選択リストが空かどうかを判断する方法を示しています。

5
veeTrain