如何使用ajax.actionLink或ajax.beginForm使用Blockui阻止targetUpdateId

时间:2012-10-22 13:56:54

标签: asp.net-mvc asp.net-mvc-ajax

我想开发一个ajax管道,这样每当通过ajax.beginform或ajax.actionLink发出任何ajax请求时,它应该从我的ajax.start函数开始,我可以在其中读取targetupdateid以便我可以shoew blockui和任何开发人员不应该打扰这个ajax.start.I我试图使用这段代码,但它没有工作

$(document).ajaxStart(function (xhr, setting) {
    console.log(this.activeElement);
    if (this.activeElement.type == 'submit') {
        activeElement = this.activeElement.form.attributes["data-ajax-update"].value;

    } else {
       / activeElement = this.activeElement.attributes["data-ajax-update"].value;
    }
    if (activeElement != null) {
        $(activeElement).blockUI();
    }

});

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

试试这个

   <div id="mainbody">
   </div>  

    <div id="SomeId" style="display:none">

        // put you style to block the UI here 
        // or put loader image
        <img src="@Url.Content("~/Content/themes/base/images/ajax_loader_big.gif")" alt="" />
    </div>


    @Ajax.BeginForm("Index", "Search", new AjaxOptions { UpdateTargetId = "mainbody", HttpMethod = "Post", LoadingElementId = "SomeId" })

您可以使用Ajax-Loader或某些带有加载程序图像的css样式来阻止UI。你需要在 LoadingElementId 中使用div来阻止UI,直到ajax功能没有完成为止。

答案 1 :(得分:0)

感谢您的解决方案,但我想通过为点击添加一个监听器来阻止我解决的UpdateTargetId。

  var activeElement,
    targetElement,
    callbackfunc = function (event) {
        activeElement = event.target || event.srcElement;
    };
window.addEventListener('click', callbackfunc, true);
$(document).ajaxStart(function () {if (activeElement !== null && activeElement !== undefined) {
        if (activeElement.type == 'submit') {
            targetElement = activeElement.form.attributes["data-ajax-update"].value;
        }
        if (activeElement.tagName == 'A') {
            targetElement = activeElement.attributes["data-ajax-update"].value;
        }
    }

    if (targetElement !== undefined || targetElement !== null) {
        $(targetElement).block({
            showOverlay: false,
            css: { border: '0px', width: '40px', height: '40px' },
            message: '<div class="progress"><div>'
        });
    }

});