18

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

簡単な作業のように思えます...クリック時にオプションを入力したいボックスがあります。誰かが実際にリストを表示するように要求した場合にのみ、ページの読み込み時にデータを入力したくありません。また、一度だけ入力する必要があります。誰かがリストを展開するたびにリクエストが出されるのは本当に嫌です。

おそらく、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 を作成します (ドキュメントではありません)。

しかし、私はそれをすべてまとめる助けが必要です。前もって感謝します！

4

2 に答える 2

39

これが、選択ボックスに入力するために使用する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コントローラーメソッドの作成が少し簡単になります。また、匿名のデータ構造を使用できるため、メソッド固有の射影が少し簡単になります。

編集これは、上記の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. Logined booleanを使用すると、認証が必要なメソッドを使用するすべてのページで、JSONメソッドのリダイレクトアクションの結果は効果がないため、必要に応じてユーザーをログイン画面に簡単にリダイレクトできます。
  8. 最後に、データフィールドは、メソッド固有のデータを提供する場所です。

決して私の構造をそれを行う方法と見なすべきではありません。明らかに、アプリケーションのニーズは私のものとは大きく異なる可能性があります。一貫性、特定の構造よりもここでの教訓です。

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

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

于 2012-04-19T17:47:52.000 に答える
5

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 を次に示します。

于 2012-04-19T17:32:40.850 に答える