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.
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:
Up
Good One...Only one article of its kind on th net
This is fantastic. It works perfectly. Thanx.
The second thing what u have is not working fine can u suggest any other solution
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
Thanks very much Vince. I've been trying to get this done for days before finding your post. Well done!
Pete H
Helped me too Thanks!!
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
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
Perfect one
thanks a lot............
It is really a great article and help to other, well done. I was try to find the same thing from long time.
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?
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
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
Like a charm! it's been 5 years since posted and still helpful. thanks.
Post a Comment