C#学习笔记之.Net Core 与Ajax

2021年11月20日 阅读数:4
这篇文章主要向大家介绍C#学习笔记之.Net Core 与Ajax,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

.Net Core是微软近年才推出的一项新的技术,新的框架。它比以往的.Net Framework框架更具备跨平台,轻量级等优势也标示着将来微软将以这个框架为中心推出新产品。而这篇博客主要记录我学习ASP.Net Core 时对Ajax 的看法。前端

Ajax做为JS的一个重要技术,提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。极大地减小了每次操做前端与后台得数据交互量,提升Web性能。ajax

而在.Net Core中 使用Ajax技术与以往MVC4相比又有什么不同呢?json

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数据。app

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