Monday, October 27, 2008

How to make ModalUpdate Progress Bar on page?

1. Generate the ModalUpdate Progress bar when a button is triggered.

UpdateProgress can help us to build "page loading" progress on the page. But some times we want the page loading is popped up above the page and disable the background of page. Check the below image. In this way, we can use AjaxControlToolkit ModalPopup to achieve it.

1

Try the below sample code to achieve Modalupdate progress.

Firstly, you need download & install AjaxControlToolKits : http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Default.aspx

<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>

<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;

}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<script type="text/javascript">
function showPopup() {
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hidepopup()
{
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>

<asp:Button ID="loginButton" runat="server" Text="login" OnClientClick="showPopup()"
onclick="loginButton_Click" /><br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Put the control which needs to update here, such as GridView.

</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="loginButton" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>

<br />


<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
<ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
BehaviorID="programmaticModalPopupBehavior"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground"
DropShadow="True"
RepositionMode="RepositionOnWindowScroll" >
</ajaxToolkit:ModalPopupExtender>

<asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:25px;width:85px;padding:10px">
<div id='messagediv' style="text-align:center">Loading...</div>

</asp:Panel>
</form>
</body>
    protected void loginButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);//For testing.
programmaticModalPopup.Hide();

}

(You can change the css style or add an image into programmaticPopup instead of "Loading".)

With this sample, we need assign the specific control to raise the ModalUpdateProgress.

2. How can we pop up the ModalUpdateProgress bar while each request is posted and each control is triggered?

On assuming that you have a GridView. And when the request is from GridView, it will generate popup panel to display "loading".

<script type="text/javascript">
function pageLoad()
{
$find('modalbehavior').hide();
}
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender, e)
{
if (e.get_postBackElement().id == "<%= GridView1.ClientID %>") // This line can make sure only the request from GridView1 will present popup panel, you can change it to other control client id.
{
$find('modalbehavior').show();
}
});

</script>

Beside this code, you need a ModalPopup to show the Loading message.

<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;

}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/>
<ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
BehaviorID="programmaticModalPopupBehavior"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground"
DropShadow="True"
RepositionMode="RepositionOnWindowScroll" >
</ajaxToolkit:ModalPopupExtender>
<asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:##FFFFCC;display:none;height:25px;width:85px;padding:10px">
<div id='messagediv' style="text-align:center">Loading...</div>

</asp:Panel>


16 comments:

Lance Zhang said...

Up

Anonymous said...

Good One...Only one article of its kind on th net

Anonymous said...

This is fantastic. It works perfectly. Thanx.

Anonymous said...

The second thing what u have is not working fine can u suggest any other solution

trafficjam said...

When i compile this code, it generates an error which is given below:

Warning 1 Generation of designer file failed: Unknown server tag 'ajaxToolkit:ToolkitScriptManager'. D:\Practices\WebApplication1\WebApplication1\UpdatePanel.aspx 31 0 WebApplication1


that means....it can't register the ajaxToolkit control.

can anyone help me.

thanks in advance

phazzardmig said...

Thanks very much Vince. I've been trying to get this done for days before finding your post. Well done!

Pete H

Anonymous said...

Helped me too Thanks!!

Mutuelle sante said...

Thank you it has been a great guide, now to make modalupdate progress bar on page? is without a doubt easy utilizing your tips. Thank you

Andry Andry said...

First and foremost congratulations to these remarks, just as lucid and informative. However, 2 or 3 points would have deserved more development, especially in the conclusion. It's just a way to say I'm eager to discover the next post

vivek said...

Perfect one
thanks a lot............

Anonymous said...

It is really a great article and help to other, well done. I was try to find the same thing from long time.

Anonymous said...

When putting "programmaticModalPopup.Hide();" in CATCH block it throws an error "there is no source code available for the current location" how to solve this?

Anonymous said...

Hi,
I have tested this code in IE and Google Chrome it worked well but in SAFARI 5 it does not work, it display the processing image but once the process finish it still keep displaying Process image for ever.

Any idea how to solve it.
Thanks

Simon Crossley said...

this works great, it allows the processing of the code behind but doesn't do it until after and this version automatically hides the modal form. I really need a versino that processes the code behind, then shows modal then waits for user interaction.

regards

Simon Crossley said...
This comment has been removed by the author.
Guamie said...

Like a charm! it's been 5 years since posted and still helpful. thanks.