ASP.NET：使用UpdatePanel回发时禁用所有控件 - 类似于ajas动画？

I am using the UpdatePanel and need to display some kind of Ajax anination while the page refreshes with the UpdatePanel.

我正在使用UpdatePanel，并且需要在页面刷新UpdatePanel时显示某种Ajax anination。

What would be great is to be able to disable all controls and display a ajax loading message..

什么是伟大的是能够禁用所有控件并显示ajax加载消息..

I would love to put a Div over the top of everything - like an overlay. Jquery UI dialog box does pretty much the same.

我希望将Div放在一切的顶部 - 就像叠加一样。 Jquery UI对话框几乎完全相同。

Does anyone have any experience with this?

有人对这个有经验么？

Problem is that users are click items before returning from a PostBack (using the update panel)

问题是用户在从PostBack返回之前点击了项目（使用更新面板）

thanks in advance

提前致谢

3 个解决方案

#1

You can use Update progress control of ajax control tool kit. when page refersh with update panel then below image will be show and user can not click on page items.

您可以使用ajax控件工具包的更新进度控件。当页面引用更新面板时，下面的图像将显示，用户无法点击页面项目。

<ajax:UpdateProgress AssociatedUpdatePanelID="UpdatePanel3" ID="updateProgress3"                 runat="server">
<ProgressTemplate>
 <div>
  <img alt="Loading" src="images/Adding.gif" />
 </div>
</ProgressTemplate>
</ajax:UpdateProgress>

Here UpdatePanel3 is id of your update panel.

这里UpdatePanel3是更新面板的ID。

You can also add AlwaysVisibleControlExtender of ajaxcontrol tool kit.

您还可以添加ajaxcontrol工具包的AlwaysVisibleControlExtender。

<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender3" runat="server"
                TargetControlID="updateProgress3" VerticalSide="Middle" HorizontalSide="Center"
                VerticalOffset="10" HorizontalOffset="10" ScrollEffectDuration=".1">
            </cc1:AlwaysVisibleControlExtender>

Here cc1 is tag prefix of ajax control tool kit dll.

这里cc1是ajax控件工具包dll的标签前缀。

#2

I too was struggling with this same issue and was lucky enough to stumble across the UpdateProgress Control Overview on MSDN. An example on that page shows secret javascript for hooking into the async ajax calls of the ASP UpdatePanel control. With a little modification I was able to get the jQuery BlockUI plugin to work with an ASP UpdatePanel.

我也在努力解决同样的问题，并且很幸运能够偶然发现MSDN上的UpdateProgress控件概述。该页面上的一个示例显示了用于挂钩ASP UpdatePanel控件的异步ajax调用的秘密javascript。通过一些修改，我能够获得jQuery BlockUI插件与ASP UpdatePanel一起使用。

Here is what I ended up with. There should be enough here so that you could do anything you want when the async callback begins and when it ends.

这就是我最终的结果。这里应该有足够的，以便您可以在异步回调开始时和结束时执行任何操作。

HTML

<asp:UpdateProgress runat="server" id="updateProgress1" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false" DisplayAfter="0">
    <ProgressTemplate>Processing...</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <!-- Some stuff here -->
    </ContentTemplate>
</asp:UpdatePanel>

JAVASCRIPT

$(document).ready(function () {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    function InitializeRequest(sender, args) {
        // Whatever you want to happen when the async callback starts
        $.blockUI();
    }
    function EndRequest(sender, args) {
        // Whatever you want to happen when async callback ends
        $.unblockUI();
    }
});

Notice that I included an ASP UpdateProgress control, that is important because if you don't have that, the javascript doesn't work right. It will block and unblock the UI but the unblock part does not happen when the callback returns, it happens almost immediately after the async call is started.

请注意，我包含了一个ASP UpdateProgress控件，这很重要，因为如果你没有，那么javascript就无法正常工作。它将阻止和取消阻止UI，但是当回调返回时，unblock部分不会发生，它几乎在异步调用启动后立即发生。

#3

It was sufficient for me to block the control itself DropDownList instead of the entire UI and all I did instead of using jquery.blockUI() plugin I just added one line and it worked just fine for me

我已经足够阻止控件本身DropDownList而不是整个UI而我所做的一切而不是使用jquery.blockUI（）插件我只是添加了一行，它对我来说效果很好

Here is what I did add :

这是我添加的内容：

$('#DD_selectPassportType').attr('disabled', 'disabled');

@ the InitializationRequest

@ InitializationRequest

function InitializeRequest(sender, args) {

    // Whatever you want to happen when the async callback starts
    $('#DropDownList_ID').attr('disabled', 'disabled');
}
function EndRequest(sender, args) {
    // Whatever you want to happen when async callback ends
    nothing I did in here
}

#1