ASP.NET: Disabling all controls when using postback with UpdatePanel - similar to ajas animation?

Question

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

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

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

Does anyone have any experience with this?

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

thanks in advance

Answer 1

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.

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.

Answer 2

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

Here is what I did add :

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

@ the 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
}

Answer 3

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: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.

You can also add AlwaysVisibleControlExtender of ajaxcontrol tool kit.

<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.