Ajax Progress Bar In ASP.Net

Ajax Progress Bar In ASP.Net

Till your code execution is in process if you require progress bar to show then here is a sample for you.

Like this Progress Bar...

So Start With A Basic Step...

1)Now Add This Code To Your .ASPX Page

 <div><asp:scriptmanager runat="server"></asp:scriptmanager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <Triggers>

            <asp:PostBackTrigger ControlID="btnUpload" />

        </Triggers>

        <ContentTemplate>

            <br />

            <asp:FileUpload ID="myFile" runat="server" />

            <asp:Label ID="lblMsg" runat="server"></asp:Label>           

            <br />

            <asp:Button ID="btnUpload" runat="server" Text="Upload"

                OnClick="UploadFile" OnClientClick="javascript:showWait();"/>          

            <br />

            <asp:UpdateProgress ID="UpdateProgress1" runat="server"

                AssociatedUpdatePanelID="UpdatePanel1">

                <ProgressTemplate>

                    <asp:Label ID="lblWait" runat="server" BackColor="#507CD1"

                        Font-Bold="True" ForeColor="White"

                        Text="Please wait ... Uploading file"></asp:Label>

                    <img alt="" src="progress.gif" />

                </ProgressTemplate>

            </asp:UpdateProgress>

        </ContentTemplate>

    </asp:UpdatePanel>
    </div>

Now look at your Design Page.It will look like below one

2)Add this javascript code at your header part of .ASPX Page.

<script language="javascript" type="text/javascript">

function showWait()

{

    if ($get('myFile').value.length > 0)

    {

        $get('UpdateProgress1').style.display = 'block';

    }

}

</script>

3)Now check your button click event with break points you'll see till the execution is under process your progress bar will remain visible.









4)Finally you'll get this kind of progress bar at the time of your execution taking long time


    


Download Sample From Here

                                                                               you may also like 

Ajax Calender Control.

Ajax Autocomplete Extender

CSS For Ajax Auto Complete Extender