MVC _Ajax的使用【七】
一、本篇主要写的是在MVC项目中一种ajax的使用方法
1. 首先在控制器中创建两个方法，showCreate()和AddUserInfo()
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Mvc; 6 7 namespace MvcApplication1.Controllers 8 { 9 public class AjaxDemoController : Controller 10 { 11 // 12 // GET: /AjaxDemo/ 13 14 public ActionResult Index() 15 { 16 return View(); 17 } 18 public ActionResult ShowCreate() 19 { 20 return View(); 21 } 22 public ActionResult AddUserInfo() 23 { 24 return Content(DateTime.Now.ToShortDateString()); //返回当前时间 25 } 26 } 27 }
2. 接下来就是前端代码：
首先需要拖动一个js文件。ajax.min.js文件
备注：Ajax.BeginForm 会自动生成一个异步提交的form表单。
参数介绍： 参数1：指向哪个后端提交数据去处理
参数2：指向哪个控制器去提交数据
参数3：提供一个方法，其中定义额外的属性，
Confirm:点击提交时的提示语
HttpMethod：提交的方式
UpdateTargetId：将返回结果更新到哪个标签上
InsertionMode：更新插入的方式
LoadingElementId：数据更新等待时执行的操作或者提示
OnSuccess：更新完成时执行的操纵，该处需要提供一个js的方法名
1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 2 <!DOCTYPE html> 3 <html> 4 <head runat="server"> 5 <meta name="viewport" content="width=device-width" /> 6 <title>ShowCreate</title> 7 <script src="../../Scripts/jquery-1.8.2.min.js"></script> 8 <script src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script> 9 <script type="text/javascript"> 10 function afterAdd(data) 11 { 12 alert(data); 13 } 14 </script> 15 </head> 16 <body> 17 <div> 18 <%-- 向哪个提交 控制器的名字 参数和额外的属性 UpdateTargetId(服务端返回的数据返回到哪个标签)，InsertionMode（插入的方式）,LoadingElementId(加载时显示什么动画) 19 OnSuccess(加载成功之后执行的方法)--%> 20 <%using (Ajax.BeginForm("AddUserInfo", "AjaxDemo", new AjaxOptions() { 21 Confirm="确定要添加吗",HttpMethod="post",UpdateTargetId="div1",InsertionMode= InsertionMode.Replace,LoadingElementId="div2",OnSuccess="afterAdd" 22 })) 23 { %> 24 <input type="submit" value="添加用户"/> 25 <%} %> 26 </div> 27 <div id="div1"></div> 28 <div id="div2" style="display:none">正在添加。。。</div> 29 </body> 30 </html>
