MVC | 微软自带的Ajax请求

@Ajax.BegForm( ) 用来生成异步表单

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>

                username：<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》

.

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmFuYmluMTY4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

《2》

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmFuYmluMTY4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

《3》

《4》

《5》

列子二：

@{

    Layout = null;

}

@model FB.CMS.Model.ModelView.LoginView

<!DOCTYPE html>

<html>

<head>

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

    <title>Login</title>

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

    <link href="~/Content/admin/LigerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />

    <script src="~/Content/admin/LigerUI/js/ligerui.all.js"></script>

    <style type="text/css">

        td {

            margin:0px;

            padding:5px

        }

        input {

            width: 150px;

            height: 25px;

        }

        #VCode {

            width:80px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $.ligerDialog.open({

                target: $("#LoginWap"), buttons: [

                    {

                        text: '登陆', onclick: function (item, dialog) {

                            //当点击“登陆”的时候触发提交

                            document.getElementById("form0").submit();

                        },

                        cls: 'l-dialog-btn-highlight'

                    },

                    {

                        text: '重置', onclick: function (item, dialog) {

                            //用$("#form0").reset()无法重置，由于jquery没有reset方法。

可是能够通过$('#yigeform')[0].reset()这样来设置，事实上这样的方法也是和以下这样的方法是一样的。都是通过调用 DOM 中的reset方法来重置表单

                            document.getElementById("form0").reset();

                        }

                    }

                ],width:350,height:200 //这里是设置弹出框的高度非常宽度的。

            });

        });

    </script>

</head>

<body>

    <div id="LoginWap" >

        @using (Ajax.BeginForm("Login", "Login", new AjaxOptions()  //这个表单的默认生成的的Id是form1

        {

            Url = Url.Action("Login", "Login"),

            HttpMethod = "post",

            OnSuccess = "success",

            OnBegin = "begin"

        }))

        {

            <table class="list">

                <tr>

                    <td>@Html.DisplayNameFor(r => r.LoginName)</td>

                    <td>@Html.TextBoxFor(r => r.LoginName)@Html.ValidationMessageFor(r => r.LoginName)</td>

                </tr>

                <tr>

                    <td>@Html.DisplayNameFor(r => r.LoginPWD)</td>

                    <td>@Html.TextBoxFor(r => r.LoginPWD)@Html.ValidationMessageFor(r => r.LoginPWD)</td>

                </tr>

                <tr>

                    <td>@Html.DisplayNameFor(r => r.VCode)</td>

                    <td>@Html.TextBoxFor(r => r.VCode)@Html.ValidationMessageFor(r => r.VCode)</td>

                </tr>

            </table>

        }

    </div>

</body>

</html>

<script src="~/Scripts/jquery.validate.js"></script>

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

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

@Ajax.ActionLink( ) 用来生成异步<a>标签的（使用场景。用户留言。评论）

Home控制器

namespace MvcAppEF.Controllers

{

    public class HomeController : Controller

    {

		public ActionResult Index18()

        {

            return View();

        }

        public string GetTime()

        {

            System.Threading.Thread.Sleep(200);

            //return Json(new {now=DateTime.Now.ToString()}, JsonRequestBehavior.AllowGet); //转换成日期格式总是“/Date(....)”不爽

            var x = new { now = DateTime.Now.ToString() };

            return Jil.JSON.Serialize(x);

        }

    }

}

Index18视图

<!DOCTYPE html>

<html>

<head>

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

    <title>Index18</title>

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

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

</head>

<body>

    <div id="timeDiv"> </div>

    <div id="loading" style="display:none" >正在载入中..... </div>

    @Ajax.ActionLink("获取server时间", "GetTime", "Home",

        new AjaxOptions()

        {

            Confirm = "您确定要发出异步请求吗？", //确认框（可选）

            HttpMethod = "Post",//发出Post请求。防止数据缓存。

假设不设置默觉得Post请求。

Url = Url.Action("GetTime", "Home"), //告诉ajax非嵌入式脚本。当前请求的url

            UpdateTargetId = "timeDiv", //将server响应回来的结果填充到id为timeDiv的Dom元素中（特别注意，它仅仅能接收server响应回来的普通字符串数据，假设server响应回来的字符串是Json格式的字符串，它也不能接收。由于浏览器会自己主动将这个Json格式的字符串转换成Json对象，所以就不能将一个对象作为一个文本填充到另外一个Dome元素中了，处理Json格式的字符串能够用以下的OnSuccess回调函数处理，在回调函数里手动将Json对象转换成字符串，然后填充到一个Dome元素中）

            InsertionMode = InsertionMode.Replace, //设置将server响应回来的结果以替换的形式填充到id为timeDiv的Dom元素中 （可选替换，从前面追加，和从后面追加）

            LoadingElementId="loading",  //当ajax正在请求，server此时还没有来得及响应的时候，页面应该呈现的哪个元素。

等到server响应完成。该元素会自己主动被隐藏 （一般用于提醒用户，server正在处理中，请等候，所以我们通常是先将这个元素设为隐藏）

            LoadingElementDuration=1,  //假设此值>0则出loading元素显示的时候出现动画效果（值通常是0和1）

            //由于以上仅仅能将异步请求回来的数据填充到一个Dom元素中。假如我这里有其它的需求，比方将请求到的数据填充到一个Table表中怎么办呢？

            //于是就有了事件

            OnSuccess="success", //server响应成功后背触发

            OnBegin="begin", //当ajax发出请求之前被触发（最先被触发）

            OnFailure="failure", //当出现异常的时候被触发

            OnComplete="comp" //当server响应回来以后，而且已经调用了OnSuccess或者调用了OnFailure回调函数以后才会触发（最后被触发）

        })

</body>

</html>

<script type="text/javascript">

    function success(data) { //这个data就是异步请求响应的结果。

回调函数调用的时候会自己主动将这个值传递过来

        alert(data);

    }

    function begin(xhr) {

        alert("当Ajax发出请求之前被触发");

    }

    function failure(xhr) {

        alert("ajax请求出现异常的时候被触发");

    }

    function comp(xhr) {

        alert("我是最后被触发的");

    }

</script>

巴特西

MVC | 微软自带的Ajax请求

最新文章

热门文章