You must Sign In to post a response.
  • Category: ASP.NET

    Display progress bar in asp.net web application

    I need to display a progress bar in asp.net web application to make the user think something is happening at behind.

    That progress bar also should display "100 rows updated out of 10000"

    eg) like "100 rows updated out of gridview.rows.count"
  • #765669
    There is no progress bar control exist in asp.net, you need to customize the control as below
    create a DIV with any IMAGE control inside it, see below design

    < div class="loading" align="center">
    Loading. Please wait.< br />
    < br />
    < img src="loader.gif" alt="" />
    < /div>

    for more detail see trailing link
    http://www.aspsnippets.com/Articles/Show-progress-bar-on-Button-Click-in-ASPNet.aspx

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #765690
    Hi,

    use the jQuery progress bar in ASP.NET using ajax.

    Refer below code :

    page consists of a button control. On a button click a method in the page is invoked. Until the method execution is done the progress bar is updated in the design.

    Code Sample

    Step 1: Page Design

    <body>
    <form id="form1" runat="server">
    <div id="progressbar"></div>
    <div id="result"></div><br />
    <asp:Label runat="server" ID="lbldisp" Text= "Percentage Completed : "/>
    <asp:Label runat="server" ID="lblStatus" />
    <br />
    <asp:Button ID="btnGetData" runat="server" Text="Get Data" />
    </form>
    lt;/body>
    Step 2: Import the jQuery and CSS references.

    <link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="Scripts/ui.core.js"></script>
    <script type="text/javascript" src="Scripts/ui.progressbar.js"></script>
    Step 3: Progress Bar set up code.

    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
    // jquery Progress bar function.
    $("#progressbar").progressbar({ value: 0 });
    $("#lbldisp").hide();
    //button click event
    $("#btnGetData").click(function () {
    $("#btnGetData").attr("disabled", "disabled")
    $("#lbldisp").show();
    //call back function
    var intervalID = setInterval(updateProgress, 250);
    $.ajax({
    type: "POST",
    url: "Default.aspx/GetText",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: true,
    success: function (msg) {
    $("#progressbar").progressbar("value", 100);
    $("#lblStatus").hide();
    $("#lbldisp").hide();
    $("#result").text(msg.d);
    clearInterval(intervalID);
    }
    });
    return false;
    });
    });
    /This function is the callback function which is executed in every 250 milli seconds. Until the ajax call is success this method is invoked and the progressbar value is changed.
    function updateProgress() {
    var value = $("#progressbar").progressbar("option", "value");
    if (value < 100) {
    $("#progressbar").progressbar("value", value + 1);
    $("#lblStatus").text((value + 1).toString() +"%");
    }
    }
    </script>
    On the button click event the setInterval function is invoked with 2 parameters as input.

    UpdateProgress function
    Delay : 250 milliseconds.
    The setInterval function calls the updateProgress function every 250 milliseconds.

    Using the jQuery ajax functionality the GetText method in the Default.aspx code is called.

    [System.Web.Services.WebMethod]
    public static string GetText()
    {
    for (int i = 0; i < 10; i ++)
    {
    // In actual projects this action may be a database operation.
    //For demsonstration I have made this loop to sleep.
    Thread.Sleep(2600);
    }
    return "Download Complete...";
    }

  • #765712
    Hi,

    If you want to set progress bar to your webpage while doing background action, you have to customize your design part as well as your code as per your requirement, if you search the same in google you may found n no of articles for the same, refer one of the best article in below link
    http://www.codeproject.com/Articles/4955/A-simple-progress-bar-web-user-control

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #765738
    Hi

    Try to use Ajax Progress bar for your web application easily we can done for this

    Can you go through asp.net official site for sample code.

    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

  • #766312
    Hi
    try this code

    Step1

    Client Side

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdateProgress ID="updProgress"
    AssociatedUpdatePanelID="UpdatePanel1"
    runat="server">
    <ProgressTemplate>
    <img alt="progress" src="images/progress.gif"/>
    Processing...
    </ProgressTemplate>
    </asp:UpdateProgress>


    Server Side


    System.Threading.Thread.Sleep(3000);
    lblText.Text = "Processing completed";

    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

  • #766315
    create a DIV with any IMAGE control inside it, see below design
    < div class="loading" align="center">
    Loading. Please wait.< br />
    < br />
    < img src="loader.gif" alt="" />
    < /div>

    please check below links for more information
    https://jqueryui.com/progressbar/
    http://www.dotnetcurry.com/ShowArticle.aspx?ID=227

  • #766898
    You have to create a div tag in that you have to use the loader or you can use mask the page of certain time
    SRI RAMA PHANI BHUSHAN KAMBHAMPATI

  • #766909
    There are many ways to show the progress bar. But in your case you want to show simple progress bar.
    1. Find some progress bar Gif image.
    2. Create model popup control by using Div and Jquery(show and hide)
    3. Display the Gif image in that div.
    4. Whenever you want show the progress bar div once the process finish hide the progress bar

    By Nathan
    Direction is important than speed


Sign In to post your comments