[MVC] Ajax筆記

2014-10-03

6910
0
MVC
2015-06-23

摘要:[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));
    });
});

若有任何錯誤，再請指正，謝謝。

回首頁