MVC _Ajax的使用【七】

一、本篇主要写的是在MVC项目中一种ajax的使用方法

1. 首先在控制器中创建两个方法，showCreate()和AddUserInfo()

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using System.Web.Mvc;

 namespace MvcApplication1.Controllers

 {

     public class AjaxDemoController : Controller

     {

         //

         // GET: /AjaxDemo/

         public ActionResult Index()

         {

             return View();

         }

         public ActionResult ShowCreate()

         {

             return View();

         }

         public ActionResult AddUserInfo()

         {

             return Content(DateTime.Now.ToShortDateString());    //返回当前时间

         }

     }

 }

2. 接下来就是前端代码：

首先需要拖动一个js文件。ajax.min.js文件

备注：Ajax.BeginForm 会自动生成一个异步提交的form表单。

参数介绍：参数1：指向哪个后端提交数据去处理

　　　　参数2：指向哪个控制器去提交数据

　　　　参数3：提供一个方法，其中定义额外的属性，

　　　　　　Confirm:点击提交时的提示语

　　　　　　HttpMethod：提交的方式

　　　　　UpdateTargetId：将返回结果更新到哪个标签上

　　　　　InsertionMode：更新插入的方式

　　　　  LoadingElementId：数据更新等待时执行的操作或者提示

　　　　　OnSuccess：更新完成时执行的操纵，该处需要提供一个js的方法名

 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

 <!DOCTYPE html>

 <html>

 <head runat="server">

     <meta name="viewport" content="width=device-width" />

     <title>ShowCreate</title>

     <script src="../../Scripts/jquery-1.8.2.min.js"></script>

     <script src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script>

     <script type="text/javascript">

         function afterAdd(data)

         {

             alert(data);

         }

     </script>

 </head>

 <body>

     <div>

        <%-- 向哪个提交   控制器的名字  参数和额外的属性  UpdateTargetId(服务端返回的数据返回到哪个标签)，InsertionMode（插入的方式）,LoadingElementId(加载时显示什么动画)

         OnSuccess(加载成功之后执行的方法)--%>

         <%using (Ajax.BeginForm("AddUserInfo", "AjaxDemo", new AjaxOptions() {

           Confirm="确定要添加吗",HttpMethod="post",UpdateTargetId="div1",InsertionMode= InsertionMode.Replace,LoadingElementId="div2",OnSuccess="afterAdd"

           }))

           { %>

         <input  type="submit" value="添加用户"/>

         <%} %>

     </div>

     <div id="div1"></div>

     <div id="div2" style="display:none">正在添加。。。</div>

 </body>

 </html>