MVC | 微软自带的Ajax请求
@Ajax.BegForm( ) 用来生成异步表单
Home控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MvcApplication1.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
return View();
}
public ActionResult GetDate()
{
//Thread.Sleep()方法用于将当前线程休眠一定时间 时间单位是毫秒 1000毫秒= 1秒
System.Threading.Thread.Sleep(1000); //将站点延迟1秒钟，以观看LoadingElementId="loadingID"的作用及效果
return Content(DateTime.Now.ToString());
} public ActionResult MicrosoftAjax()
{
return View();
}
}
}
MicrosoftAjax.cshtml视图
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MicrosoftAjax</title>
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
@*jquery隐式异步请求的脚本*@
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
function afterSuccess(data) {//这个data就是异步请求成功后返回的数据
alert(data); //这打印出异步请求成功后返回的数据
}
</script>
</head>
<body>
<div>
<!--Confirm就是在异步请求提交之前。提醒用户是否提交这个表单-->
<!--InsertionMode它有三个值：InsertionMode.InsertAfter表示从后面面追加,相当于append()，它的作用就是将异步请求取到的值，以从后面追加的方式将值填充到id为"result"的表单中;InsertionMode.InsertBefore表示从前面追加;InsertionMode.Replace表示替换，作用就是将id为"result"的表单的原来值替换为异步请求取到的新值；-->
<!--UpdateTargetId="result" 表示将异步请求到的值填充到id为result的表单(div)中-->
<!---onSuccess是一个事件,，它指向一个函数。
它表示这个异步请求之后，注意是异步请求成功之后。他已经取到异步请求之后返回的数据了，然后我们能够在函数中对异步请求返回的数据进行自己须要的处理-->
<!---LoadingElementId="loadingID" 的作用是在异步请求的过程中显示id为loadingID的表单(div)的值。
请求完毕后则不显示,假设id为loadingID的表单(div)的值是隐藏的，它也会将它显示出来-->
@using(Ajax.BeginForm("getDate","Home",new AjaxOptions(){ Confirm="您是否要提交",HttpMethod="Post",InsertionMode=InsertionMode.Replace, UpdateTargetId="result",OnSuccess="afterSuccess",LoadingElementId="loadingID"}))
{
<div>
username：<input type="text" name="UserName"/><br/>
密码： <input type="password" name="Pwd" />
<input type="submit" value="提交" />
</div>
}
</div>
<div id="result"></div>
<!---最初始将这个里面包括一副图片的div隐藏掉-->
<div id="loadingID" style="display:none">
<img src="../../Content/ico_loading2.gif" alt="图片"/></div>
</body>
</html>
《1》
.
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmFuYmluMTY4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
《2》
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmFuYmluMTY4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
《3》
《4》
《5》
列子二：
@{
Layout = null;
}
@model FB.CMS.Model.ModelView.LoginView
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<link href="~/Content/admin/LigerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />
<script src="~/Content/admin/LigerUI/js/ligerui.all.js"></script>
<style type="text/css">
td {
margin:0px;
padding:5px
}
input {
width: 150px;
height: 25px;
}
#VCode {
width:80px;
}
</style>
<script type="text/javascript">
$(function () {
$.ligerDialog.open({
target: $("#LoginWap"), buttons: [
{
text: '登陆', onclick: function (item, dialog) {
//当点击“登陆”的时候触发提交
document.getElementById("form0").submit();
},
cls: 'l-dialog-btn-highlight'
},
{
text: '重置', onclick: function (item, dialog) {
//用$("#form0").reset()无法重置，由于jquery没有reset方法。
可是能够通过$('#yigeform')[0].reset()这样来设置，事实上这样的方法也是和以下这样的方法是一样的。都是通过调用 DOM 中的reset方法来重置表单
document.getElementById("form0").reset();
}
}
],width:350,height:200 //这里是设置弹出框的高度非常宽度的。
});
});
</script>
</head>
<body>
<div id="LoginWap" >
@using (Ajax.BeginForm("Login", "Login", new AjaxOptions() //这个表单的默认生成的的Id是form1
{
Url = Url.Action("Login", "Login"),
HttpMethod = "post",
OnSuccess = "success",
OnBegin = "begin"
}))
{
<table class="list">
<tr>
<td>@Html.DisplayNameFor(r => r.LoginName)</td>
<td>@Html.TextBoxFor(r => r.LoginName)@Html.ValidationMessageFor(r => r.LoginName)</td>
</tr>
<tr>
<td>@Html.DisplayNameFor(r => r.LoginPWD)</td>
<td>@Html.TextBoxFor(r => r.LoginPWD)@Html.ValidationMessageFor(r => r.LoginPWD)</td>
</tr>
<tr>
<td>@Html.DisplayNameFor(r => r.VCode)</td>
<td>@Html.TextBoxFor(r => r.VCode)@Html.ValidationMessageFor(r => r.VCode)</td>
</tr>
</table>
}
</div>
</body>
</html>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@Ajax.ActionLink( ) 用来生成异步<a>标签的 （使用场景。用户留言。评论）
Home控制器
namespace MvcAppEF.Controllers
{
public class HomeController : Controller
{
public ActionResult Index18()
{
return View();
} public string GetTime()
{
System.Threading.Thread.Sleep(200); //return Json(new {now=DateTime.Now.ToString()}, JsonRequestBehavior.AllowGet); //转换成日期格式总是“/Date(....)”不爽 var x = new { now = DateTime.Now.ToString() };
return Jil.JSON.Serialize(x);
}
}
}
Index18视图
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index18</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<div id="timeDiv"> </div> <div id="loading" style="display:none" >正在载入中..... </div> @Ajax.ActionLink("获取server时间", "GetTime", "Home",
new AjaxOptions()
{
Confirm = "您确定要发出异步请求吗？", //确认框（可选）
HttpMethod = "Post",//发出Post请求。防止数据缓存。 假设不设置默觉得Post请求。 Url = Url.Action("GetTime", "Home"), //告诉ajax非嵌入式脚本。当前请求的url
UpdateTargetId = "timeDiv", //将server响应回来的结果填充到id为timeDiv的Dom元素中（特别注意，它仅仅能接收server响应回来的普通字符串数据，假设server响应回来的字符串是Json格式的字符串，它也不能接收。由于浏览器会自己主动将这个Json格式的字符串转换成Json对象，所以就不能将一个对象作为一个文本填充到另外一个Dome元素中了，处理Json格式的字符串能够用以下的OnSuccess回调函数处理，在回调函数里手动将Json对象转换成字符串，然后填充到一个Dome元素中） InsertionMode = InsertionMode.Replace, //设置将server响应回来的结果以替换的形式填充到id为timeDiv的Dom元素中 （可选替换，从前面追加，和从后面追加）
LoadingElementId="loading", //当ajax正在请求，server此时还没有来得及响应的时候，页面应该呈现的哪个元素。 等到server响应完成。该元素会自己主动被隐藏 （一般用于提醒用户，server正在处理中，请等候，所以我们通常是先将这个元素设为隐藏）
LoadingElementDuration=1, //假设此值>0则出loading元素显示的时候出现动画效果（值通常是0和1） //由于以上仅仅能将异步请求回来的数据填充到一个Dom元素中。假如我这里有其它的需求，比方将请求到的数据填充到一个Table表中怎么办呢？
//于是就有了事件 OnSuccess="success", //server响应成功后背触发 OnBegin="begin", //当ajax发出请求之前被触发（最先被触发） OnFailure="failure", //当出现异常的时候被触发 OnComplete="comp" //当server响应回来以后，而且已经调用了OnSuccess或者调用了OnFailure回调函数以后才会触发（最后被触发） })
</body>
</html>
<script type="text/javascript">
function success(data) { //这个data就是异步请求响应的结果。 回调函数调用的时候会自己主动将这个值传递过来
alert(data);
} function begin(xhr) {
alert("当Ajax发出请求之前被触发");
} function failure(xhr) {
alert("ajax请求出现异常的时候被触发");
} function comp(xhr) {
alert("我是最后被触发的");
} </script>
MVC | 微软自带的Ajax请求的更多相关文章
- 如何在前台脚本通过json传递数据到后台(使用微软自带的ajax)
首先,我们要在前台引入json的脚本,以便于把js对象序列化 <script type="text/javascript" src="/js/jquery.json ...
- mvc的表单发送ajax请求，太强大了!!!!
- Sping MVC不使用任何注解处理（jQuery）Ajax请求（基于XML配置）
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- MVC异步AJAX的三种方法（JQuery的Get方法、JQuery的Post方法和微软自带的异步方法）
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
- jQuery+ASP.NET MVC基于CORS实现带cookie的跨域ajax请求
这是今天遇到的一个实际问题,在这篇随笔中记录一下解决方法. ASP.NET Web API提供了CORS支持,但ASP.NET MVC默认不支持,需要自己动手实现.可以写一个用于实现CORS的Acti ...
- MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- 2017.3.31 spring mvc教程（六）转发、重定向、ajax请求
学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...
- C# MVC 全局错误Application_Error中处理（包括Ajax请求）
在MVC的Global.asax Application_Error 中处理全局错误. 如果在未到创建请求对象时报错,此时 Context.Handler == null . 判断为Ajax请求时,我 ...
随机推荐
- 【R笔记】R语言利器之ddply
ddply()函数位于plyr包,用于对data.frame进行分组统计,与tapply有些类似 准备数据 # 使用stringsAsFactors=F来防止data.frame把向量转为factor ...
- TCP长连接与短连接的区别(转)
1. TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次 ...
- SSH学习——声明式事物管理(Spring)
1.什么是事物? 事务是一组操作的执行单元,相对于数据库操作来讲,事务管理的是一组SQL指令,比如增加,修改,删除等,事务的一致性,要求,这个事务内的操作必须全部执行成功,如果在此过程种出现了差错,比 ...
- 获取OS X中App Store更新后的安装包（如XCode）
如果宿舍有好几个人需要更新一些大的软件,如XCode,会占用很大的带宽. 为了节省带宽,我们可以在1台电脑上更新完后,获取存放在系统暂存区的更新的安装包,然后通过局域网或Airdrop的方式轻松分 ...
- RxJava 2.x 理解-3
背压:Flowable / Subscriber 在RxJava 1.x 理解 中,没有讲到背压这个概念,是因为学习太落后了,RxJava都出2了,所以直接在2上学. 背压是下游控制上游流速的一种手段 ...
- SonarQube分析报告无法上传的问题
'); 由于SonarQube5.6 api/ce/submit 接口报以下异常,导致jenkins构建结果显示为失败~: Caused by: java.lang.NullPointerExcept ...
- 百度地图API的事件处理：覆盖物的如何阻止冒泡
百度地图,为了让事件使用的更方便,进行一层封装 详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm 主要的修改点: 1. 使用事件代理. ...
- 移动端与PHP服务端接口通信流程设计（增强版）
前面讲过:移动端与PHP服务端接口通信流程设计(基础版) 对于 api_token 的校验,其安全性还可再增强: 增强地方一: 再增加2张表,一个接口表,一个授权表,设计参考如下: 接口表 字段名 字 ...
- 利用LogParser分析IIS日志
LogParser是微软官方出品的用于读取分析IIS日志的工具,使用类SQL语句过滤文本日志内容,并可将内容导出到csv.sqlserver作进一步分析 下载地址:http://www.micr ...
- linux & windows 共享 smbd 部署
smbd : yum install samba samba-client samba-swat mount.cifs : yum -y install cifs-utils ##挂载nas 文 ...