异步Ajax
Ajax异步刷新应用在Web开发中经常用到，在过去WebForm中通常是使用JQuery和一般处理程序或者aspx页面来实现；
在MVC中，虽然依然可以使用一般处理程序，但是一般还是通过在Controller中新建Action方法来实现。
一、 JQuery+一般处理程序 实现异步Ajax
1.新建一个空MVC项目，命名为AjaxDemo
2. 右键项目，选择“添加->HTML页”，命名为ShowDateTime.html，引入jquery文件（NuGet下载jquery），代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$("#btnGetDateTime").click(function () {
$.post(
"GetDateTimeHandler.ashx",
{},
function (data) {
$("#divDateTime").html(data);
});
});
})
</script>
</head>
<body>
<input type="button" value="获取时间" id="btnGetDateTime" />
<div id="divDateTime"></div>
</body>
</html>
3. 右键项目，选择“添加->新建项->一般处理程序”，并设置名称为GetDateTimeHandler.ashx，修改代码：
public class GetDateTimeHandler : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(DateTime.Now.ToString());
} public bool IsReusable
{
get
{
return false;
}
}
}
4. 运行ShowDateTime.html（右键该文件，在浏览器中查看），如下图：
二、Jquery+Action 实现异步Ajax
1. 在Models文件夹下新建一个User实体
public class User
{
public int Id { get; set; } public string UserName { get; set; } public int Age { get; set; } public string TelPhone { get; set; }
}
2. 新建HomeController，添加UserList方法
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
} [HttpPost]
public ActionResult UserList()
{
List<User> list = new List<User>()
{
new User() {Id = ,UserName="小明",Age=,TelPhone="" },
new User() {Id = ,UserName="小王",Age=,TelPhone="" },
new User() {Id = ,UserName="小赵",Age=,TelPhone="" },
new User() {Id = ,UserName="小李",Age=,TelPhone="" },
new User() {Id = ,UserName="小胡",Age=,TelPhone="" },
};
return Json(list);
}
3. 新建Index视图，使用$.post异步调用HomeController中的UserList方法，并更新界面
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#btnUserList").click(function () {
$.post("/Home/UserList", {}, function (data) {
var result = data;
$.each(result,function(key,value){
$("#divUserList").append(result[key].Id + "\t"
+ result[key].UserName + "\t"
+ result[key].Age + "\t"
+ result[key].TelPhone + "<br/>");
});
});
});
})
</script>
<h2>Index</h2>
<div>
<input type="button" id="btnUserList" value="获取用户信息" />
<div id="divUserList"></div>
</div>
4. 运行结果如下：
三、Ajax辅助方法 Ajax.ActionLink
在ASP.Net MVC框架中包含一组Ajax辅助方法，它们可以用来创建异步表单和指向控制器的异步链接。当使用这些辅助方法时，不需要编写任何脚本代码就可以实现程序异步。
这些Ajax辅助方法依赖于非侵入式MVC的jQuery扩展。如果使用这些辅助方法，就需要引入脚本文件jquery.unobtrusive-ajax.js，并在视图中添加此脚本引用。
1.在项目中添加非侵入式Ajax脚本
使用NuGet搜索“Microsoft JQuery”，安装 非侵入式Ajax脚本，如下图
2.在Home控制器中添加AjaxTest方法，并右键方法添加AjaxTest视图
public ActionResult AjaxTest()
{
return View();
}
3.在Home控制器中添加PartialViewTest方法返回局部视图，并右键方法创建局部视图页
[HttpPost]
public PartialViewResult PartialViewTest()
{
ViewBag.Msg = "Hello World";
return PartialView();
}
PartialViewTest视图
<h2>@ViewBag.Msg</h2>
4.在AjaxTest视图脚本节点中引入非侵入式Ajax脚本
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
5.使用@Ajax.ActionLink创建异步链接按钮
@Ajax.ActionLink("链接文本","PartialViewTest",new AjaxOptions() {
UpdateTargetId = "divMsg",
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post"
})
AjaxTest视图整体代码如下：
@{
ViewBag.Title = "AjaxTest";
}
<h2>AjaxTest</h2>
@Ajax.ActionLink("链接文本","PartialViewTest",new AjaxOptions() {
UpdateTargetId = "divMsg",
InsertionMode = InsertionMode.Replace,
HttpMethod = "Post"
})
<div id="divMsg"></div>
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}
6.运行Home/AjaxTest，结果如下：
四、Ajax辅助方法 Ajax.BeginForm
1.在Home控制器下创建AjaxForm和UserInfo方法，代码如下：
public ActionResult AjaxForm()
{
return View();
} [HttpPost]
public ActionResult UserInfo(string txtName)
{
List<User> list = new List<User>()
{
new User() {Id = ,UserName="小明",Age=,TelPhone="" },
new User() {Id = ,UserName="小王",Age=,TelPhone="" },
new User() {Id = ,UserName="小赵",Age=,TelPhone="" },
new User() {Id = ,UserName="小李",Age=,TelPhone="" },
new User() {Id = ,UserName="小胡",Age=,TelPhone="" },
};
var result = list.Where(u => u.UserName == txtName).FirstOrDefault();
return Content("姓名："+result.UserName+"\t"+"年龄："+result.Age+"\t"+"电话："+result.TelPhone);
}
2.添加AjaxForm视图，引入非侵入式Ajax脚本，使用Ajax.BeginForm创建异步表单，代码如下：
@{
ViewBag.Title = "AjaxForm";
}
<h2>AjaxForm</h2>
@using (Ajax.BeginForm("UserInfo","Home",new AjaxOptions() {
UpdateTargetId ="divMsg",/*局部更新容器Id*/
InsertionMode = InsertionMode.Replace,/*替换方式*/
HttpMethod = "post",
OnFailure="fail",/*失败后回调js函数*/
OnSuccess="success",/*成功后回调js函数*/
LoadingElementId = "loadingMsg"/*加载元素Id*/
}))
{
<input type="text" name="txtName" />
<input type="submit" />
}
<div id="loadingMsg" style="display:none">加载中......</div>
<div id="divMsg"></div>
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script>
function fail(txt) {
alert("查询失败，失败信息："+txt);
}
function success(txt) {
alert("查询成功，查询信息："+txt);
}
</script>
}
3.运行/Home/AjaxForm，结果如下：
异步Ajax的更多相关文章
- jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法
2017年5月9日19:25:02 在做在线签名的时候,到了图片上传的时候,使用jquery异步ajax上传base64的图片数据的时候,使用默认的方式进行数据传输偶尔会出现 生产的图片只有上半部分, ...
- vue和jQuery嵌套实现异步ajax通信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 传统表单提交文件上传，以及FormData异步ajax上传文件
传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...
- jQuery之异步Ajax请求使用
$.ajax({type:'',data:'',async:''...}) 参数: 1.cache: true缓存页面 false 不缓存页面 (默认: true,dataType为script和js ...
- 同步 异步 AJAX JS
jQuery:$post.$get.$ajax与php,实现异步加载 什么是异步加载? 整个最通俗的说法就是将另外一个页面上的数据通过append() 或者 html()等函数插入到本页上.纯js写法 ...
- 纯JavaScript实现异步Ajax的基本原理
Ajax实际就是XMLHttpRequest对象和DOM.(X)HTML和CSS的简称,用于概括异步加载页面内容的技术. Ajax实例 HTML代码如下,包含一个h5标题和一个按钮: JS代码如下 ...
- 乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示,当我们多次快速的多次的发起ajax,因为ajax是异步的,每个ajax触发回调的时间都是不可控的,这样就会造成前面发起的ajax ...
- MVC异步AJAX的三种方法（JQuery的Get方法、JQuery的Post方法和微软自带的异步方法）
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
随机推荐
- python yield 生成器的介绍（转载）
您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...
- suse 11 sp4 bond 网卡 mode0模式
开启网卡: ifocnfig eth1 up 点亮网卡ethtool eth1 db2:~ # cat /etc/sysconfig/network/ifcfg-bond0 DEVICE='bond0 ...
- 【codeforces 816C】Karen and Game
[题目链接]:http://codeforces.com/contest/816/problem/C [题意] 给你一个n*m的矩阵; 一开始所有数字都是0; 每次操作,你能把某一行,或某一列的数字全 ...
- Lock-less buffer management scheme for telecommunication network applications
A buffer management mechanism in a multi-core processor for use on a modem in a telecommunications n ...
- HttpClient 图讲解明
大家刚看这个名字一定会想问这是什么东东,在这我特意百度百科了下 HTTP 协议可能是如今 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序须要直接通过 HTTP 协议来訪 ...
- 1.Windows7下安装与破解IntelliJ IDEA2017
转自:https://www.cnblogs.com/justuntil/p/7245170.html IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界 ...
- POJ 3277 线段树+扫描线
题意: 思路: 线段树求矩形面积的并...同 POJ 1151 //By SiriusRen #include <cstdio> #include <algorithm> us ...
- Android 在Android手机上获取其他应用的包名及版本号
获取Android手机上其他应用的包名及版本号方法有很多,可以通过AAPT从APK包中直接获取,也可以通过代码在手机上获取.显然,对于产品或者用户来说要获取这些信息,在手机上获取更为简便. 下面我们来 ...
- dedecms4张关键表解析之1
虽然dedecms默认共有87张表,但是只有4张最核心,最最要的表. 1.第一张表:dede_arctype 栏目表 dede设计者认为不管存放什么样的数据(文章,商品,电影)都应该属于某个栏目(类 ...
- Python常用目录操作（Python2）
Python获取当前路径 Python查看指定路径下的文件和文件夹 Python修改当前工作目录(在读取文件等时需要) Python添加import路径(有时候为了import自己写的py文件,且 ...