Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET JScript.NET Ajax C#4.0 , +
Hi,
I want to create progress bar in the form of image.
When i am sending mail through my application then the in between sending and responding time i have to show one gif. image which shows process is going on.
 
Can anyone suggest me demo or tutorial for this.
 
Thanx in Advance.
Posted 6-Feb-13 23:51pm
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Logic for implementing this changes based on how your web page is coded.
 
Option 1) If your web page is getting refreshed after sending the email
In this case, simply open a JQuery popup/model dialog window with your gif loaded in it. This will remain visible until response is received and page is refreshed. (So, benefit is there is no explicit need to hide the progress bar)
 
Option 2) If you are using AJAX call for sending email (processing etc..)
In this case the logic is still same. On click of send mail button, open the popup/model dialog and wait until you receive a response. Once received, close the popup/model dialog window.
 
Hope it gives you an idea of implementing your own progress bar !!!
 
Regards,
Niral Soni
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

<style type="text/css">
.modalPopup
{
background-color: #696969;
filter: alpha(opacity=40);
opacity: 0.7;
xindex:-1;
}
</style>
 
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
 
<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    //Raised before processing of an asynchronous postback starts and the postback request is sent to the server.
    prm.add_beginRequest(BeginRequestHandler);
    // Raised after an asynchronous postback is finished and control has been returned to the browser.

    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        //Shows the modal popup - the update progress
        var popup = $find('<%= modalPopup.ClientID %>');
        if (popup != null) {
            popup.show();
        }
    }
 
    function EndRequestHandler(sender, args) {
        //Hide the modal popup - the update progress
        var popup = $find('<%= modalPopup.ClientID %>');
        if (popup != null) {
            popup.hide();
            //alert("hi");
        }
    }
</script>
<div>
<asp:UpdateProgress ID="UpdateProgress" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="~/Images/animations-photoshop-26.gif" AlternateText="Processing" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:modalpopupextender id="modalPopup" runat="server" TargetControlID="UpdateProgress" PopupControlID="UpdateProgress" BackgroundCssClass="modalPopup" />
 
<asp:UpdatePanel ID="pnlData" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click"/>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

Follow the answers in the below links.
 
You can use
 
-> UpdateProgress control
1. Display progress bar or processing image while sending mail...[^].
2. Progress bar in ASP.NET[^].
 
-> jQuery
3. Using the jQuery the ProgressBar Widget in ASP.NET Applications[^].

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 505
1 Maciej Los 309
2 BillWoodruff 174
3 /\jmot 160
4 Suraj Sahoo | Coding Passion 160
0 OriginalGriff 8,484
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,639
3 Maciej Los 5,159
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 7 Feb 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100