asp.net mvc 使用Ajax呼叫Action 返回資料【轉】
使用asp.net mvc 呼叫Action方法很簡單。
一、無引數方法。
1、首先，引入jquery-1.5.1.min.js 指令碼，根據版本不同大家自行選擇。
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
2、在Controllers中書寫前臺Ajax需要呼叫的Action，比如：
public ActionResult test1()
{
return Content("返回一個字串"); }
這個Action返回了一個字串。注意這裡的返回，不是return View();
3、我們回到前臺，假設我的功能是當頁面中1個按鈕單擊時呼叫後臺的Action並返回1個字串。
<input type="text" id="txt1" name="txt1" /> <input type="button" id="btnSub" name="btnSub" value="呼叫Action" />
如上，我的介面裡放了1個文字框和1個按鈕。那下面我們來實現當按鈕單擊時候呼叫後臺方法返回字元並賦值給文字框的。
<script type="text/javascript" language="javascript"> $(document).ready(function () { $("#btnSub").click(function () { $.ajax({ type: "POST", url: "/Home/test1", data: "", success: function (sesponseTest) { $("#txt1").val(sesponseTest); } }); }); }); </script>
很簡單，下面大概介紹下用到的各個屬性和方法。 $(document).ready(function () {}; -------類似我們原來寫的<body onload="loat();"> 頁面載入方法。但是也有區別，具體請參考官方說明。
$("#btnSub").click(function () {}; -------按鈕的單擊事件。此處根據各自需要自行修改了。比如（$("#btnSub").focus(function () {}……)）等等。
$.ajax({}); -------ajax方法。
type： ------- 型別，此處為“POST” 還有 "GET"型別。
url： ------- 呼叫的Action 書寫格式 /controller/action
data: ------- 引數，因為此處沒有，所以我們為""
success: function (sesponseTest) {} ------- 回撥函式，就是當我的Action 執行完後，執行的方法。sesponseTest為Action返回的內容。
$("#txt1").val(sesponseTest); ------- 把返回的字串賦值給文字框。
4、下面就是我們最終實現效果：當我們單擊按鈕的時候，通過Ajax呼叫了後臺的1個Action 並返回一個字串給文字框賦值了。
二、帶引數方法。
我們實際專案中可能經常會遇到介面中需要傳遞1個或多個引數給Action，最終返回結果給介面的情況。那接下來我們就來看下帶引數的呼叫方法。
1、在原來的Action基礎上我們稍作改動。
public ActionResult test1(string id)
{
return Content(id + "返回一個字串"); }
這個Action需要一個引數id ，最後還是返回了一個字元畫。
2、介面上我們再新增1個文字框。
<input type="text" id="txt1" name="txt1" /><br/> <input type="text" id="txt2" name="txt2" /><br/> <input type="button" id="btnSub" name="btnSub" value="呼叫Action" />
此處有2個文字框，我將實現：點選按鈕的時候把文字框1中的內容傳遞到Action進行處理，最終把返回結果顯示在文字框2中。
<script type="text/javascript" language="javascript"> $(document).ready(function () { $("#btnSub").click(function () { var tvalue=$("#txt1").val(); $.ajax({ type: "POST", url: "/Home/test1", data: "id=" + tvalue, success: function (sesponseTest) { $("#txt2").val(sesponseTest); } }); }); }); </script>
細心的大家可能會發現，和上面無引數的就是多了點點改動。 這裡的data: "id=" …… 帶上了1個引數。id 就是我的Action 的引數的名稱 id 。 然後把文字框1的值作為引數傳遞給Action.
多個引數呢，data的每個引數請用&&分開，如（data: "id=12345&&str=test",）……
注意這裡的引數名稱要和Action 的引數名稱相同。
4、我們來看下最終效果。我們在文字框1中先輸入內容，然後點選按鈕，給文字框2賦值。
使用asp.net mvc 呼叫Action方法很簡單。
一、無引數方法。
1、首先，引入jquery-1.5.1.min.js 指令碼，根據版本不同大家自行選擇。
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
2、在Controllers中書寫前臺Ajax需要呼叫的Action，比如：
public ActionResult test1()
{
return Content("返回一個字串"); }
這個Action返回了一個字串。注意這裡的返回，不是return View();
3、我們回到前臺，假設我的功能是當頁面中1個按鈕單擊時呼叫後臺的Action並返回1個字串。
<input type="text" id="txt1" name="txt1" /> <input type="button" id="btnSub" name="btnSub" value="呼叫Action" />
如上，我的介面裡放了1個文字框和1個按鈕。那下面我們來實現當按鈕單擊時候呼叫後臺方法返回字元並賦值給文字框的。
<script type="text/javascript" language="javascript"> $(document).ready(function () { $("#btnSub").click(function () { $.ajax({ type: "POST", url: "/Home/test1", data: "", success: function (sesponseTest) { $("#txt1").val(sesponseTest); } }); }); }); </script>
很簡單，下面大概介紹下用到的各個屬性和方法。 $(document).ready(function () {}; -------類似我們原來寫的<body onload="loat();"> 頁面載入方法。但是也有區別，具體請參考官方說明。
$("#btnSub").click(function () {}; -------按鈕的單擊事件。此處根據各自需要自行修改了。比如（$("#btnSub").focus(function () {}……)）等等。
$.ajax({}); -------ajax方法。
type： ------- 型別，此處為“POST” 還有 "GET"型別。
url： ------- 呼叫的Action 書寫格式 /controller/action
data: ------- 引數，因為此處沒有，所以我們為""
success: function (sesponseTest) {} ------- 回撥函式，就是當我的Action 執行完後，執行的方法。sesponseTest為Action返回的內容。
$("#txt1").val(sesponseTest); ------- 把返回的字串賦值給文字框。
4、下面就是我們最終實現效果：當我們單擊按鈕的時候，通過Ajax呼叫了後臺的1個Action 並返回一個字串給文字框賦值了。
二、帶引數方法。
我們實際專案中可能經常會遇到介面中需要傳遞1個或多個引數給Action，最終返回結果給介面的情況。那接下來我們就來看下帶引數的呼叫方法。
1、在原來的Action基礎上我們稍作改動。
public ActionResult test1(string id)
{
return Content(id + "返回一個字串"); }
這個Action需要一個引數id ，最後還是返回了一個字元畫。
2、介面上我們再新增1個文字框。
<input type="text" id="txt1" name="txt1" /><br/> <input type="text" id="txt2" name="txt2" /><br/> <input type="button" id="btnSub" name="btnSub" value="呼叫Action" />
此處有2個文字框，我將實現：點選按鈕的時候把文字框1中的內容傳遞到Action進行處理，最終把返回結果顯示在文字框2中。
<script type="text/javascript" language="javascript"> $(document).ready(function () { $("#btnSub").click(function () { var tvalue=$("#txt1").val(); $.ajax({ type: "POST", url: "/Home/test1", data: "id=" + tvalue, success: function (sesponseTest) { $("#txt2").val(sesponseTest); } }); }); }); </script>
細心的大家可能會發現，和上面無引數的就是多了點點改動。 這裡的data: "id=" …… 帶上了1個引數。id 就是我的Action 的引數的名稱 id 。 然後把文字框1的值作為引數傳遞給Action.
多個引數呢，data的每個引數請用&&分開，如（data: "id=12345&&str=test",）……
注意這裡的引數名稱要和Action 的引數名稱相同。
4、我們來看下最終效果。我們在文字框1中先輸入內容，然後點選按鈕，給文字框2賦值。