@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是一个事件,,它指向一个函数。《1》它表示这个异步请求之后,注意是异步请求成功之后。他已经取到异步请求之后返回的数据了,然后我们能够在函数中对异步请求返回的数据进行自己须要的处理--> <!---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>
.
《2》
《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 { 150px; height: 25px; } #VCode { 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(); } } ],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>