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 使用Ajax調用Action 返回數據【轉】