Click here to Skip to main content
15,891,316 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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

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
 
Share this answer
 
XML
<style type="text/css">
.modalPopup
{
background-color: #696969;
filter: alpha(opacity=40);
opacity: 0.7;
xindex:-1;
}
</style>


XML
<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>
 
Share this answer
 
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[^].
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900