MVC之Ajax

简单介绍

msdn介绍

前台页面：

ajaxOptions定义

@{
    var ajaxOptions = new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "wrap",
        OnBegin = "waitingDialog",
        OnComplete = "closeWaitingDialog",
        OnSuccess = "onRequestSuccess",
        OnFailure = "onRequestFailed",
        HttpMethod = "POST"
    };
    var ajaxHtmlAttr = ajaxOptions.ToUnobtrusiveHtmlAttributes();
    var virtualPath = HttpRuntime.AppDomainAppVirtualPath;
    var clientPath = Request.Url.PathAndQuery;
    if (virtualPath != "/")
    {
        clientPath = clientPath.Substring(virtualPath.Length);
    }
    clientPath = clientPath.ToLower();
}

　　

event定义：

      function onRequestFailed(ajaxContext) {
            if (ajaxContext.statusCode == 0 || ajaxContext.statusCode == 401 || ajaxContext.statusText == "error") {
                window.top.location = loginUrl;
            }
            else {
                //alert("服务器端错误，请稍后再试。");
            }
            if (ajaxContext.statusText) {
                console.log("failed request,server response:" + ajaxContext.statusText);
            }
            window.top.location = loginUrl;

        }


    





        var currentRequestUrl = null;
        var inRequestState = false;
        function onRequestSuccess() {
            if (currentRequestUrl) {
                inRequestState = true;
                var currentMenuName = $(".submenu li.current").text().trim();
                currentRequestUrl = currentRequestUrl.replace("&X-Requested-With=XMLHttpRequest", "");
                History.pushState({ activeMenu: currentMenuName, title: "@ViewBag.Title", url: currentRequestUrl }, $("#wrap").find("title").text(), currentRequestUrl);
            }
        }

        History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate
            if (inRequestState) {
                inRequestState = false;
                return;
            }
            var state = History.getState(); // Note: We are using History.getState() instead of event.state
            if (state) {
                document.title = state.title;
                var mn = state.data.activeMenu;
                $.ajax({
                    type: "POST",
                    url: state.url,
                    success: function (data) {
                        $("#wrap").html(data);
                        switchMenu(mn);
                    },
                    failure: function (errMsg) {
                        $("#wrap").html("<p>服务器繁忙，请稍后再试.</p>");
                        console.log(errMsg);
                    }
                });

            }
        });    








      function waitingDialog(waiting, reqOptions) {
            if (reqOptions && reqOptions.url) {
                currentRequestUrl = reqOptions.url;
            }
            else {
                currentRequestUrl = null;
            }
            $.Dialog({
                title: '加载中',
                content: '<div style="text-align: center">加载中，请稍候...</div>',
                overlay: true,
                overlayClickClose: false,
                 330,
                height: 100,
                padding: 20,
                sysButtons: {
                    btnClose: false
                }
            });
        }






        function closeWaitingDialog() {
            try {
                $.Dialog.close();
                $.each($('.metro.window-overlay'), function (i, v) {
                    $(this).remove();
                });
                $.each($('.ui-helper-hidden-accessible'), function (i, v) {
                    $(this).remove();
                });
            } catch (e) {
                $.each($('.metro.window-overlay'), function (i, v) {
                    $(this).remove();
                });
                $.each($('.ui-helper-hidden-accessible'), function (i, v) {
                    $(this).remove();
                });
            }
        }