2012-09-20

Use AJAX ModalPopup to block the UI while a postback

It’s a nice user experience if we can display a “Please wait” or a “Loading..” message while our website is processing the user request or a file upload etc. It’s even nicer if we can prevent the user from using website until the postback finishes. We can make use of ModalPopupExtender in the AJAX toolkit for achieve this kind of thing. Following is a short example for this. To make it simpler, I will include only the relevant parts of the code.

ASPX code snippet.

<asp:Button runat="server" Text="Send" CssClass="input-button"
OnClick="btn_Click" Width="167px" OnClientClick="showProgress();" />

<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="pnlPopup"
PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" />
    <asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress">
        <div id="imageDiv">
            <div style="float: left; margin: 9px">
                <img src="Resources/Images/ajax-loader.gif" width="32px" height="32px" /></div>
            <div style="padding-top: 17.5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
                Sending file. Please wait...
            </div>
        </div>
    </asp:Panel>

And the jQuery would be like this

<script type="text/javascript">
    function showProgress() {
        $find('mdlPopup').show();
    }
</script>

On the button click, I’m calling the showProgress() method which shows the ModalPopupExtender. Since I’m calling it OnClientClick event, it fires the modalpopup just before a postback occurs.

We can define the CSS class for the Background from the BackgroundCssClass property of the ajaxToolkit:ModalPopupExtender. Usually we use a grayed out background and make it transparent to show that UI is blocked. We can use the below CSS class for that.

.modalBackground
{
    background-color: Gray;
    filter: alpha(opacity=60);
    opacity: 0.60;
}

The asp:Panel is the part where we show the loading message and the activity indicator. I used a simple gif image here and a text saying “Sending file. Please wait…”. To make that part prominent from the popup background, I’ve applied a different background color for the panel. Following is the CSS class for that

.updateProgress
{
    border-width: 5px;
    border-style: solid;
    background-color: #FFFFFF;
    position: absolute;
    height: 50px;
    width: 290px;
}

Once the postback finished, the page is reloading so the ModalPopup will again reset to it’s initial state (hidden).

7 comments:

kc said...

nice and thx for sharing.

Robert said...

Does this still work if they fail validation?

Ruchira Gamage said...

Hello Robert,

Yes it does. Since I'm showing it using javascripts, it has no way to identify whether a validation fails or not. But you can modify that function as below to check it according to your validation requirement

function showProgress() {
if(isValid)
$find('mdlPopup').show();
}

Depending on your context, maintain the isValid boolean variable.

Robert said...

Excellent. Thank you.

Wait time Indicator said...

Useful information ..I am very happy to read this article..thanks for giving us this useful.

Voy y Vuelvo said...

Perfect !!!. Thank you very much for sharing

Jaws Unleashed for pc rip said...

Excellent. Thank you.