Progress Bar in ASP.Net

Question

jQuery Progress Bar in ASP.Net

Monica Bundel · Answer

HTML Markup: Country: asp : DropDownList ID ="ddlCountries" runat ="server"> asp : ListItem Text ="All" Value ="" /> asp : ListItem Text ="USA" Value ="USA" /> asp : ListItem Text ="Brazil" Value ="Brazil" /> asp : ListItem Text ="France" Value ="France" /> asp : ListItem Text ="Germany" Value ="Germany" /> asp : DropDownList > asp : Button ID ="btnSubmit" runat ="server" Text ="Load Customers" OnClick ="btnSubmit_Click" /> hr /> asp : GridView ID ="gvCustomers" runat ="server" AutoGenerateColumns ="false"> Columns > asp : BoundField DataField ="CustomerId" HeaderText ="Customer Id" /> asp : BoundField DataField ="ContactName" HeaderText ="Contact Name" /> asp : BoundField DataField ="City" HeaderText ="City" /> Columns > asp : GridView > div class ="loading" align ="center"> Loading. Please wait. br /> br /> img src ="loader.gif" alt ="" /> div > Model background CSS: style type ="text/css"> .modal { position : fixed ; top : 0 ; left : 0 ; background-color : black ; z-index : 99 ; opacity : 0.8 ; filter : alpha(opacity=80) ; -moz-opacity : 0.8 ; min-height : 100% ; width : 100% ; } .loading { font-family : Arial ; font-size : 10pt ; border : 5px solid #67CFF5 ; width : 200px ; height : 100px ; display : none ; position : fixed ; background-color : White ; z-index : 999 ; } style > Displaying the loading progress image on Page Load and PostBack script type ="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> script > script type ="text/javascript"> function ShowProgress() { setTimeout( function () { var modal = $( ' ' ); modal.addClass( "modal" ); $( 'body' ).append(modal); var loading = $( ".loading" ); loading.show(); var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0); var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0); loading.css({ top: top, left: left }); }, 200); } $( 'form' ).live( "submit" , function () { ShowProgress(); }); script > c# protected void Page_Load( object sender, EventArgs e) { if (!IsPostBack) { string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });" ; ClientScript.RegisterStartupScript( this .GetType(), "load" , script, true ); } } protected void btnSubmit_Click( object sender, EventArgs e) { // Add Fake Delay to simulate long running process. System.Threading. Thread .Sleep(5000); LoadCustomers(); } private void LoadCustomers() { string strConnString = ConfigurationManager .ConnectionStrings[ "constr" ].ConnectionString; string query = "SELECT * FROM Customers WHERE Country = @Country OR @Country = ''" ; SqlCommand cmd = new SqlCommand (query); cmd.Parameters.AddWithValue( "@Country" , ddlCountries.SelectedItem.Value); using ( SqlConnection con = new SqlConnection (strConnString)) { using ( SqlDataAdapter sda = new SqlDataAdapter ()) { cmd.Connection = con; sda.SelectCommand = cmd; using ( DataSet ds = new DataSet ()) { sda.Fill(ds, "Customers" ); gvCustomers.DataSource = ds; gvCustomers.DataBind(); } } } }

Rajeev Punhani · Answer

Hi Surya, Please check the following link http://www.dotnetcurry.com/ShowArticle.aspx?ID=384

Munesh Sharma · Answer

http://www.c-sharpcorner.com/UploadFile/8b7513/jquery-progress-bar-in-Asp-Net/

Sujeet Suman · Answer

Surya please once go through below link. This may help you: http://www.c-sharpcorner.com/UploadFile/8b7513/jquery-progress-bar-in-Asp-Net/ http://stackoverflow.com/questions/11754477/using-progress-bar-in-asp-net http://www.codeproject.com/Tips/722331/ProgressBar-using-JQueryUI-and-SignalR http://www.aspdotnet-suresh.com/2013/10/jQuery-display-Progress-Bar-on-Button-Click-in-Aspnet.html If this is helpful for you then please accept my Answer .

Progress Bar in ASP.Net

jQuery Progress Bar in ASP.Net

Answers (4)