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 .