ドロップダウンに基づいてオブジェクトを表示するMVC、Jquery、およびAjax

Question

私は、寄付を受け入れるか、メンバーシップを販売するか、イベントにチケットを販売するためのビューを設計しようとしています。

「寄付をする」、「購入メンバーシップ」、およびその後のオプションがコントローラから渡されたIList<Event>モデルから入力されるドロップダウンリストがあります。私はjavascriptを使用して、選択に基づいてどのパネル（メンバーシップ、寄付、またはイベント）を表示するかを決定します。

イベントが選択されると、イベントパネルに選択されたイベントのプロパティを動的に取り込む必要があるという問題があります（もちろん、ブラウザを使用する必要はありませんリフレッシュ）。私は誰かから、これを達成するためにAjaxを使用できるはずだと言われました。おそらく私は私のサーバー/ home/GetEventByIdアクションにこれを行うことができます。しかし、私はこれを達成するのに役立つ例やチュートリアルを見つけることができませんでした。

誰でもこれについて私にとってこれをどうやって説明したり、私に役立つ例やチュートリアルを提供したりすることができますか？

Answer 1

ここでは、ajaxを使用してコントローラメソッドを呼び出し、jQueryダイアログにそれを入力することによって、コンテンツを取得するコード例を示します。うまくいけば、これは正しい方向に向けるのに役立ちます。

コントローラ方法：

[AcceptVerbs(HttpVerbs.Get)] 
public ActionResult GetItemsForJson() 
{ 
    var items = Repository.GetItems(); 
    var result = Json(items); 

    return result; 
} 

とjQueryそれを実現するために：

$('#dialog_link').click(function() { 
     $.getJSON("/Items/GetItemsForJson/", getItems); 
    }); 


function getItems(items) { 

     $("#itemlist").text(""); 
     $.each(items, function(i, item) { 
      $("#itemlist").append("<li>" + item.Id + item.Name + "</li>"); 
     }); 

} 

Answer 2

私はMVCは、これを変更しますが、ここで私はアヤックスとのコールバックを行う方法であるかどうかはわかりません。

あなたはアヤックスのPageMethodを使用するJava関数を呼び出しますドロップダウンリストボックスののonchangeイベントでは、のようなものこの：

 PageMethods.getVersions(LoadVersionsCallback); 

あなた.aspx.csファイルで呼び出しているメソッドは静的である必要があり、それはパラメータを取り、のようになりますことができます。

 [System.Web.Services.WebMethod]  
    public static string getVersions() {  
    StringBuilder sb = new StringBuilder();  
    ... etc.  
    return sb.ToString();  
    } 

JAメソッドの呼び出し時に指定したvascript関数は、メソッドが完了すると実行されます。それは結果を渡されます。

function LoadVersionsCallback(result) {  
// do something with the results - I load a dropdown list box. 
...etc.  
} 

Answer 3

あなたの質問は少し広すぎます。私はすでにあなたのアクションをコントローラで実装していると仮定しているので、クライアント側のスクリプトだけに集中しています。

後$ .ready以内にする必要があります

$("#ddlSelectEvent").change(function() { // this will fire when drop down list is changed 
    var selection = $(this).attr("selected"); // text representation of selected value 
    $(".panels").hide(); 
    $("#panel_" + selection).show(); // Assume the panel naming will be panel_MakeDonation and those... 
    // Now is time for ajax - load html directly 
    $.get("server/home/geteventbyId", 
     {id: "12345"}, 
     function (data) { // callback when data is loaded 
      $("#panel_" + selection).html(data); 
     } 
    ); 
}); 

上記のコードは、あなたがHTMLでパネルの内容を取り込む前提としています。 JSONやその他のタイプは、実装方法に応じて使用できます。 http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype