MVC之AJAX异步表单

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

曾经学习过AJAX，不是特别的熟悉，这次利用学习MVC的机会，好好的体验了一把，非常感谢《MVC开发实战》这本书，看了有两三遍，才算对MVC整个运行的机制有了一定的了解，下面来分享下我们经常在开发时用到到的异步表单的操作。

DEMO

1.VIEW

<span style="font-size:18px;">@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script type="text/javascript">
        function suc(resText) {
            //
            alert(resText);
        }
        function err(xhr) {
            //失败时执行操作，参数为ajaxrequest对象
            alert(xhr.readyState);
        }
    </script>
    <style type="text/css">
        #imgLoad {
            display: none;
        }
    </style>
</head>
<body>
    @Ajax.ActionLink("连接文字", "GetDate", new AjaxOptions()
{
    HttpMethod = "post",
    //更新的控件id
    UpdateTargetId = "contDiv",
    //更新方式
    InsertionMode = InsertionMode.Replace
})
    <div id="contDiv" style="border:1px solid #0094ff; width:400px;">我很好</div>

    <h1>异步表单：</h1>
    @using (Ajax.BeginForm("GetDat", "Home", new AjaxOptions()
    {
        //提交请求的方法
        HttpMethod = "post",
        //成功时执行的异步函数
        OnSuccess = "suc",
        OnFailure = "err",
        //请求时加载的图片
        LoadingElementId = "imgLoad"
    }))
    {
        <input type="text" name="txtName" />
        <input type="submit" />
        <div id="imgLoad">加载中~~~</div>
    }

</body>
</html>
</span>

2.Controller

<span style="font-size:18px;">  /// <summary>
    /// 控制器
    /// </summary>
    public class HomeController : Controller
    {
       

        public ActionResult Index()
        {
            return View();
        }

     
        /// <summary>
        /// 异步请求的方法，返回的是时间的内容对象
        /// </summary>
        /// <returns></returns>
        public ActionResult GetDate()
        {
            System.Threading.Thread.Sleep(200);
            return Content(DateTime.Now.ToString());
        }
    }</span>

2.结果显示