随笔- 236 文章- 0 评论- 18 阅读- 27万

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>