微软自带的Ajax请求

浏览数：38 / 时间：2015年06月09日

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是一个事件,，它指向一个函数。它表示这个异步请求之后，注意是异步请求成功之后，他已经取到异步请求之后返回的数据了，然后我们可以在函数中对异步请求返回的数据进行自己需要的处理-->
       <!---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>
                用户名：<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>

《1》
.