MVC | 微软自带的Ajax请求

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Fanbin168/article/details/40478021

@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>
                用户名:<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》
.

《2》



《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("获取服务器时间", "GetTime", "Home",
        new AjaxOptions()
        {
            Confirm = "您确定要发出异步请求吗?", //确认框(可选)
            HttpMethod = "Post",//发出Post请求,防止数据缓存。如果不设置默认为Post请求。
            Url = Url.Action("GetTime", "Home"), //告诉ajax非嵌入式脚本,当前请求的url
            UpdateTargetId = "timeDiv", //将服务器响应回来的结果填充到id为timeDiv的Dom元素中(特别注意,它只能接收服务器响应回来的普通字符串数据,如果服务器响应回来的字符串是Json格式的字符串,它也不能接收,因为浏览器会自动将这个Json格式的字符串转换成Json对象,所以就不能将一个对象作为一个文本填充到另外一个Dome元素中了,处理Json格式的字符串可以用下面的OnSuccess回调函数处理,在回调函数里手动将Json对象转换成字符串,然后填充到一个Dome元素中)
            
            InsertionMode = InsertionMode.Replace, //设置将服务器响应回来的结果以替换的形式填充到id为timeDiv的Dom元素中 (可选替换,从前面追加,和从后面追加)
            LoadingElementId="loading",  //当ajax正在请求,服务器此时还没有来得及响应的时候,页面应该呈现的哪个元素。等到服务器响应完毕,该元素会自动被隐藏 (一般用于提醒用户,服务器正在处理中,请等候,所以我们一般是先将这个元素设为隐藏)
            LoadingElementDuration=1,  //如果此值>0则出loading元素显示的时候出现动画效果(值一般是0和1)
            
            
            //因为以上只能将异步请求回来的数据填充到一个Dom元素中。假如我这里有其他的需求,比如将请求到的数据填充到一个Table表中怎么办呢?
            //于是就有了事件
            
            OnSuccess="success", //服务器响应成功后背触发
            
            OnBegin="begin", //当ajax发出请求之前被触发(最先被触发)
            
            OnFailure="failure", //当出现异常的时候被触发
            
            OnComplete="comp" //当服务器响应回来以后,并且已经调用了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>



展开阅读全文

没有更多推荐了,返回首页