@{ ViewBag.Title = "Home Page"; //下面引用Jquery和unobtrusive-ajax } @Scripts.Render("~/bundles/jquery") @{ //设置ajaxOptions var ajaxOptions = new AjaxOptions() { OnSuccess = "SetPassSuccess", OnFailure = "SetPassFailure", Confirm = "设置留言审核状态为'通过'?", HttpMethod = "Post" }; } <script type="text/javascript"> $(function () { $("#alink").click(function () { $.get("/Home/GetTime", function (response) { $("#showInfo").html(response); }); }); }); function SetPassSuccess() { alert('审核通过'); location.reload(); } function SetPassFailure(xhr) { alert('审核失败(HTTP状态代码:' + xhr.status + ')'); } </script> <div class="jumbotron"> <h1>ASP.NET</h1> </div> <div class="row"> <div class="col-md-4"> <a id="alink" href="javascript:void(0);">①传统方式Ajax</a><br/> @Ajax.ActionLink("②MVC中使用Ajax", "GetTime", new AjaxOptions { UpdateTargetId = "showInfo" })<br /> @using (Ajax.BeginForm("GetPostStr", new AjaxOptions { UpdateTargetId = "showInfo" })) { <input type="text" name="username" /><br /> <input type="text" name="userage" /><br /> <input type="submit" value="③MVC Post方式提交Ajax" /> } <br/> @Ajax.ActionLink("MVC中Ajax请求带回调执行", "ConfirmPass", new { id = 1 }, ajaxOptions)<br /> <div id="showInfo">更新区域</div> @Ajax.ActionLink("Ajax删除数据", "DeleteUser", "Home", new { id = 1 }, new AjaxOptions() { UpdateTargetId = "strcontent", HttpMethod = "Post", Confirm = " 您确定要删除该记录吗?该操作不可恢复!" }) </div> </div> @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace Demo2016.Controllers { /// <summary> /// 控制器部分 /// </summary> public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { ViewBag.Message = "Your application description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } /// <summary> /// 获取系统时间 强制不缓存 /// </summary> /// <returns></returns> [OutputCache(NoStore = true, Duration = 0)] public ActionResult GetTime() { return Content(DateTime.Now.ToString()); } [HttpPost] public ActionResult GetPostStr(FormCollection form) { string userName = form["username"]; string userAge = form["userage"]; return Content(userName + userAge); } /// <summary> /// 删除用户 /// </summary> /// <returns></returns> [HttpPost] public ActionResult DeleteUser() { //省略操作部分 return JavaScript("alert('删除成功')"); } public ActionResult ConfirmPass(int id) { //省略操作部分 return new HttpStatusCodeResult(System.Net.HttpStatusCode.OK); } /* * 需安装Microsoft jQuery Unobtrusive Ajax 这个 NuGet 插件 AjaxOptions中还有其他可以指定的属性: Confirm 等效于javascript中的return confirm(msg),在点击该链接时先提示需要确认的信息。 HttpMethod 指定使用Get或者是Post方式发送Http请求 InsertMode 指定使用何种方式在指定的元素更新数据,"InsertAfter", "InsertBefore", or "Replace" 默认为:Replace LoadingElementDuration Loading元素显示的时间 LoadingElementId 可以指定在Http请求期间显示的Loading元素 OnBegin 在Http请求之前执行的javascript方法 OnComplete 在Http请求结束时执行的方法 OnFailure 在Http请求失败时执行的方法 OnSuccess 在Http请求成功时执行的方法 UpdateTargetId Http请求更新的页面元素 Url Http请求的Url */ } }