ASP.NET实战006：MVC使用 Ajax数据传递

2019 年 11 月 1 日2160

ASP.NET实战006：MVC使用 Ajax数据传递

建站运营 2019-10-26 02:54

查看: 958| 评论: 1| 发布者: 知行

??? ??С

简介:前面通过ASP.NET实战004：MVC数据传递我们了解了ASP.NET MVC模型中模型(model)、视图(view)、控制器(controller)之间的数据传递方法，ASP.NET MVC支持Model、ViewBag、ViewData、TempData、JqGrid插件、Ajax等多种方 ...

前面通过ASP.NET实战004：MVC数据传递我们了解了ASP.NET MVC模型中模型(model)、视图(view)、控制器(controller)之间的数据传递方法，ASP.NET MVC支持Model、ViewBag、ViewData、TempData、JqGrid插件、Ajax等多种方式发送数据。而在我们实际的开发过程中，使用ViewData和ViewBag等方式在Controller与View间进行数据传递存在着类型转换的问题，容易编译出错这样不仅影响服务器性能，而且存在安全问题同时也破坏了Controller与View的低耦合原则。

为了降低Controller与View的耦合性，同时提高服务器的性能，实现真正的前后端分离，我们有必要对MVC模式进行改进。之前用用Vue+Django+MySQL做前后端分离项目的时候都是通过Axios技术实现数据请求的，这样我们同样可以借助这个逻辑，通过Ajax发送请求，当服务端接受该请求后将处理的数据通过JSON数据格式返回给视图，最后通过浏览器渲染呈现给用户。

什么是Ajax

Ajax 是一种针对Web 服务器开发的Web应用程序的技术，可以实现浏览器与 Web 服务器之间异步数据传输（HTTP 请求），它的特点就是无需重新加载整个网页的情况下能够进行局部数据更新。当网页每次从服务器只需请求对应的信息进行局部更新，而不用刷新整个网页，这样不仅可以减少服务器压力，也可以节省带宽，提高响应速度，增强用户体验。

MVC中使用 Ajax

由于MVC实现了前后端分类，所以在前端使用Ajax很简单，我们利用JQuery就可以轻松的实现Ajax，它对 Ajax 做了大量的封装分别是$.ajax()、$.load()、$.get()、$.post()、$.getScript()和$.getJSON()方法。使用的时候我们只要引入JQuery文件，在需要的地方使用对应的方法即可。

登录示例

这里我们实现个简单的登录功能，在Login页面输入用户名和密码，验证通过之后跳转页面Dome页面。前端我们写个简单的登录，用3个input元素构建，类型分别是text、password、submit，样式我们先忽略主要实现功能。

通过点击登录按钮来触发Ajax请求，这里的@section scripts是用来引入脚本的我在布局页_Layout.cshtml文件中定义了@RenderSection("scripts",required:false)方法，用来渲染其他子页中的脚本或样式的。这里我们是登录，所以要想服务器发送数据，这里我们可以采用$.post()方法通过 HTTP POST 请求从服务器载入数据来实现，$.post()方法有四个参数，分别是url（请求地址）、data（请求数据）、function（请求成功后执行的回调函数）、dataType（数据类型），只有第一个参数是必须的，其他都可以为空，具体代码如下：

后台接收数据，这里我写个简单的数据接收及验证，为了更容易理解暂时不进行数据库交互，先理解逻辑当从前端获取到的数据与我们指定的数据相符时我们就认为验证成功，反之则失败。这里的response是我定义的一个实例对象，用来返回处理状态和结果的。

运行效果

到这里我们就实现了一个简单的登录功能测试了，通过Ajax实现了简单的数据交互，而且我们可以看到局部刷新的。这也是Ajax的特点，可以与服务器进行异步通信从而实现局部刷新的。同时Ajax会对数据进行过滤，只有确定需要从服务器读取新数据时，Ajax引擎才会向服务器提交请求。

补全数据库操作

前面我把数据库给先忽略了，这样理解起来就简单了些，现在我把数据库补全，具体如何操作数据库可以参考ASP.NET实战002：MySQL数据库连接，这里我创建一个MysqlHelper类来专门处理数据库操作，这里的GetDataTable方法用来返回一个DataTable数据表。

接着我们修改下LoginController中的confirm方法，实例化MysqlHelper类，去数据库中查找我们从前端获取的用户名和密码（这里我暂时没做密码加密处理，所以数据库中密码暂时是明文，可以直接查询），GetDataTable方法会给我们返回查询结果，如果存在则说明是已注册用户则验证成功允许页面跳转，否则验证失败。

public JsonResult confirm(string user,string pwd)
{
 UserInfo consumer = new UserInfo();
 consumer.username = user;
 consumer.password = pwd;
 MysqlHelper sql = new MysqlHelper();
 response rsq = new response();
 DataTable dt = sql.GetDataTable(string.Format("select * from user where username='{0}' and password='{1}'", consumer.username, consumer.password));
 if (dt != null)
 {
 rsq.state = true;
 rsq.message = "验证成功！";
 }
 else 
 {
 rsq.state = false;
 rsq.message = "验证失败！";
 }
 return Json(rsq);
}

【免责声明】本文仅代表作者或发布者个人观点，不代表SEO研究协会网（http://www.zjjv.com/）及其所属公司官方发声，对文章观点有疑义请先联系作者或发布者本人修改，若内容涉及侵权或违法信息，请先联系发布者或作者删除，若需我们协助请联系平台管理员，邮箱cxb5918@163.com（本平台不支持其他投诉反馈渠道，谢谢合作）。若需要学习以上相关知识请到巨推学院观看视频教程，网址http://www.zjjv.com/。