jQueryを使用してコントローラを呼び出すアクション

Question

私は必要なすべてを行う素晴らしいページを持っています。しかし、要素の1つ（部分ページ）が数秒かかるとロードしたいと思います。だから私がしたいのは、この部分的に最初のページを表示せず、その場所に "読み込み中"のgifを表示することです。その後、私のjqueryのでは...

$(document).ready(function() { 

    // Call controller/action (i.e. Client/GetStuff) 

}); 

私はPartialViewを返し、私のdivの内容を更新し、私のコントローラのアクションを呼び出すしたいと思います。基本的には、ロード時に部分的なロードを非同期に呼び出します。私はこれを、ActionLinkでうまくやることができます。 onloand型の呼び出しでjQueryを使用すると、PartialViewを返すことはできますか？

Answer 1

単に$.loadを使用します。

$(document).ready(function() {  
    $('#myDiv').html('<img src="loading.gif"/>') 
       .load('Client/GetStuff'); 
}); 

あなたの負荷インジケータとのdivのid =「myDiv」の内容を交換して、その中に、クライアント/ GetStuffの出力を注入すること。

Answer 2

私はあなたができると信じています。以前はASP.NET MVCコントローラからJSONを取得するためにjQueryを使用しましたが、これはクライアントにデータを取得するのが最も楽しい方法の1つです。

私は 'ポスト' メソッドの取得」や、jQueryの '負荷' を使用したのと同じくらい簡単かもしれない部分ビューを取得して確信している：

Loadを使用する：

$("#feeds").load("test.aspx"); 

Getを使用します：

$.get("test.aspx", function(data){ 
    alert("Data Loaded: " + data); 
}); 

使用Post：

$.post("test.aspx", function(data){ 
    alert("Data Loaded: " + data); 
}); 

Answer 3

$.ajax("MyController/MyAction", function(data) { 
    alert(data); 
}); 

これは本当に基本的な例です。 AJAXを使用してコントローラを呼び出すだけで、データをDOMにポップするか、それ以外の何かを行うことができます。

Answer 4

次のように我々は非常に簡単にJavascriptを/ jQueryのを使用して、コントローラのメソッドを呼び出すことができます。

には、以下の仮定は、いくつかのクラスのオブジェクトの配列を返すと呼ばれるコントローラのメソッドです。クラスを聞かせすることは「A」

public JsonResult SubMenu_Click(string param1, string param2) 

    { 
     A[] arr = null; 
     try 
     { 
      Processing... 
      Get Result and fill arr. 

     } 
     catch { } 


     return Json(arr , JsonRequestBehavior.AllowGet); 

    } 

後複合型（クラス）がある

public class A 
{ 

    public string property1 {get ; set ;} 

    public string property2 {get ; set ;} 

} 

今

それはjQueryのことで、コントローラのメソッドの上に呼び出すこと回したです。以下は、コントローラメソッドを呼び出すJquery関数です。上記のjQueryの関数「callControllerMethod」は、

function callControllerMethod(value1 , value2) { 
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2' 
    $.getJSON(strMethodUrl, receieveResponse); 
} 


function receieveResponse(response) { 

    if (response != null) { 
     for (var i = 0; i < response.length; i++) { 
      alert(response[i].property1); 
     } 
    } 
} 

我々は、コントローラのメソッドのURLを開発し、変数で指定することを置く「strMehodUrl」とjQueryのAPIのgetJSONメソッドを呼び出します。

receieveResponseは、コントローラメソッドの応答または戻り値を受け取るコールバック関数です。

ここで我々はJavaScript関数にC＃クラスのオブジェクトを直接

を利用することができないので、JSONを使用したので、次のように、我々はJSONオブジェクトにコントローラメソッドで結果（ARR）に変換：

Json（arr、JsonRequestBehavior.AllowGet）;

を返し、そのJsonオブジェクトを返します。

Javascript/JQueryのコールバック関数では、結果として得られるJSONオブジェクトを使用して、それに応じてUI上に応答データを表示することができます。よりdetaillについては

click here