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中获取。