完成更新面板回发后,我们如何执行客户端代码?

时间:2013-09-11 07:26:14

标签: javascript jquery asp.net updatepanel

当我们点击复选框并在重新获取数据后隐藏加载程序时,我有一个问题是显示加载程序图像。现在' divData'当我们检查复选框时,将由加载加载。现在我的场景是这样的,divData在updatepanel中,async trigger复选框与它关联。现在我正在显示这样的加载器

function ShowProgress(displayValue) {

            var modal = $("<div id='divLoading'/>");
            modal.addClass("modal");
            modal.css('display', displayValue);
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left, display: displayValue });
        }

这里我传递的是displayValue&#39; inline&#39;当我们点击复选框时。我已经编写了代码,用于在将数据绑定到divData之后隐藏加载器图像。

ClientScript.RegisterClientScriptBlock(Page.GetType(), "Unload", "ShowProgress('none');", True)

现在上面的代码无法隐藏加载程序。复选框控件不在另一个updatepanel中。我已经尝试了所有方法。任何人都可以帮我找到解决方案吗?

1 个答案:

答案 0 :(得分:0)

发布一个全局解决方案......如果发生任何部分回发,将会出现模态加载弹出窗口,并且一旦获取数据,弹出窗口将按预期关闭。

在MasterPage中注册scriptmanager的BeginHandler和EndHandler事件,如下所示。

       Sys.Application.add_init(appl_init);
        function appl_init() {
            var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
            pgRegMgr.add_beginRequest(BeginHandler);
            pgRegMgr.add_endRequest(EndHandler);
        }
        function BeginHandler(sender, args) {
            ShowProgress('block');
        }
        function EndHandler() {
           ShowProgress('none');
        }
        function ShowProgress(displayValue) {

        var modal = $("<div id='divLoading'/>");
        modal.addClass("modal");
        modal.css('display', displayValue);
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left, display: displayValue });
    }

希望这会有所帮助..