C#學習筆記之.Net Core 與Ajax

.Net Core是微軟近年才推出的一項新的技術，新的框架。它比以往的.Net Framework框架更具有跨平台，輕量級等優點也標示着未來微軟將以這個框架為中心推出新產品。而這篇博客主要記錄我學習ASP.Net Core 時對Ajax 的見解。

Ajax作為JS的一個重要技術，提供了異步更新的機制，使用客戶端與服務器間交換數據而非整個頁面文檔，實現頁面的局部更新。極大地減少了每次操作前端與后台得數據交互量，提高Web性能。

而在.Net Core中 使用Ajax技術與以往MVC4相比又有什么不一樣呢？

1，前端

@{
    ViewData["Title"] = "Home Page";
}

<div>
    <button id="sumbit" onclick="ajax()">獲取</button>
    <a id="xinxi"></a><br />
    姓名：
    <input type="text" id="name"/>
    &spades;
    密碼：
    <input type="text" id="password" />
</div>

簡單的前台，獲取 兩個input-text的值利用Ajax傳到后台，拼成一句話，再傳回來顯示。主要是用來演示，能實現功能為主。學習時間要緊就不多去布局前端了。

 

2,ajax（）

使用的是原生的JS，post請求，參數類型為json數據。

function ajax() {
    var password = document.getElementById("password").value;
    var name = document.getElementById("name").value;
    var xixn = JSON.stringify({
        name: name,
        password: password

    });
    var xhr = new XMLHttpRequest;//創建一個 XMLHttpRequest 對象，XMLHttpRequest是實現ajax的基礎
    xhr.open("POST", "/Home/LoginAsync", true)//請求方式為"Post","/Home/Index"為服務器地址（在MVC這里就是控制器地址+方法名），true表示選擇異步
    xhr.setRequestHeader("Content-type", "application/json")//設置請求參數類型
    xhr.send(xixn);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var s = xhr.responseText;
            document.getElementById("xinxi").innerHTML = JSON.parse(s).result;
        }

    }

}

 

3，后台（控制器方法）

 

 [HttpPost]
        public IActionResult LoginAsync([FromBody]Model model)
        {
            if (model != null)
            {
                string Name = model.name;
                string password = model.Password;
                return Json(new { result = "我叫"+Name+"登陸密碼為"+password });
            }
            else
            {
                return Json(new { result = "Is Null" });
            }
        }

        public class Model
        {
            public string name { get; set; }
            public string Password { get; set; }
        }

方法名上要加上[HttpPost]來表示該方法處理的是Post請求，不加則默認為[HttpGet].

Model 是一個模型，在接收數據時可以直接將Json數據自動轉化為模型，這也是.Net core 強大功能之一。這里創建一個模型是為了取數簡便。如果想直接獲取傳入的Json類型數據，用dynamic類型即可

LoginAsync([FromBody]dynamic model)

需要在數據類型前（Model或dynamic）添加[FromBody]標識，表示該參數值應該從請求的Body中獲取，而不是從URL中獲取。