摘要:[MVC] Ajax筆記
最近用到,筆記一下。在mvc專案中要在前端使用到Ajax來與後端溝通的幾種寫法。
1. 基本的Ajax呼叫
在HomeController裡面建立一個Action,[Hello]
HomeController:
public ActionResult HelloWorld()
{
return Content("HelloWorld");
}
在Visual Studio專案裡面使用Nuget把Ajax相關檔案加入參考。
然後在Index.cshtml裡面把jquery-2.1.1.min.js加入參考進來。
(因為我偷懶,其實這個部分可以參考把JS檔案加入到BundleConfig.cs檔案的原理以及做法)
Index.cshtml:
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<div class="row">
<div class="col-md-2">
<input type="button" id="btnajax" value="CallAjax" />
</div>
<div class="col-md-10">
<textarea type="textarea1" >text...</textarea >
</div>
</div>
在下方的程式部份,宣告下列方法,當網頁上的Button按鈕被按下的時候,會觸發下方的方法去呼叫/Home/Helloworld (Controller/Action),並且取得回傳結果(result)。
這邊將回傳的值顯示在輸入文字框ajaxreturn裡面。
Index.cshtml:
<script>
//呼叫Ajax的基本範例
$("#btnajax").click(function () {
$.get("/Home/HelloWorld", null, function (result) {
$("#ajaxreturn").val(result);
});
});
</script>
2. 帶入參數的呼叫
在HomeController裡面建立一個Action,[GetData]。這個方法會接收由前端傳遞過來的一個String值,並且也回傳一個String給前端。
HomeController.cs
public ActionResult GetData(String s)
{
return Content("Hello" + s );
}
在前端網頁的部份,在剛才的javascript按鈕事件上,修改成底下的宣告。
使用get方法去呼叫Controller的GetData方法。然後帶入一個參數{s:"Ben Lu"}給後方的Controller。同樣的將後端回傳的值result資料取出,並且顯示到前端。
Index.cshtml:
//帶入參數的呼叫
$("#btnajax").click(function () {
$.get("/Home/GetData", {s:"Ben Lu"}).done(function (result) {
$("#ajaxreturn").val(result);
});
});
註:
利用Ajax將前端的值帶入給後端的Controller,變數名稱要跟後端的一樣
後端: GetData(String s)
前端: get("/Home/GetData", {s:"Ben Lu"})
變數名稱都是s
3. 帶入多參數的呼叫
在HomeController裡面建立一個Action,GetDatas。接收兩個參數,都是字串資料。
HomeController.cs
public ActionResult GetDatas(String s1,String s2)
{
return Content("第一個參數 = " + s1 + "第二個參數 = " + s2 );
}
Index.cshtml:
////帶入多參數的呼叫
$("#btnajax").click(function () {
$.get("/Home/GetDatas", { s1: "Ben Lu",s2:"今天星期六" }).done(function (result) {
$("#ajaxreturn").val(result);
});
});
4. 物件傳遞
在Controller裡面的Action裡面接收一個自訂型別的物件,並且也回傳一個物件給前端的View。
在HomeController裡面建立一個類別檔案,我們要以這個類別來當作傳遞的型別。
HomeController:
註:其實這部分要做成 Model比較好
public class test {
public string Value1 { get; set; }
public string Value2 { get; set; }
}
建立一個Action,並且接收一個test型別的物件傳入,接者也回傳這個物件。
public ActionResult GetObj(test o)
{
o.Value1 = "從server回來的訊息Value1";
o.Value2 = "從server回來的訊息Value2";
return Json(o);
}
Index.cshtml:
var obj = {
Value1: "Client Value1值",
Value2: "Client Value2值"
};
//帶入物件的呼叫
$("#btnajax").click(function () {
$.post("@Url.Content("~/Home/GetObj")", obj, function (res) {
$("#textarea1").val(JSON.stringify(res));
}, "json");
});
另一種寫法
$("#btnajax").click(function () {
$.post("@Url.Content("~/Home/GetObj")", obj, function (res) {
$("#textarea1").val(res.Value1);
});
});
5.汎型集合資料傳遞
上一個範例回傳了一個物件後,接下來就是如何傳遞一個物件的集合。這邊就是以泛型物件來傳遞。
既上一個範例,在這個範例中建立一個test物件的泛型集合,List<test>。讓Controller的Action接收這一個集合的物件傳入。接下來直接回傳這個物件集合給前端的View。
HomeController.cs
public ActionResult GetObjs(List o)
{
return Json(o);
}
Index.cshtml:
var objs = {
"o[0].Value1": "A1",
"o[0].Value2": "A2",
"o[1].Value1": "B1",
"o[1].Value2": "B2"
};
$("#btnajax").click(function () {
$.post("@Url.Content("~/Home/GetObjs")", objs , function (res) {
$("#textarea1").val(JSON.stringify(res));
});
});
若有任何錯誤,再請指正,謝謝。