Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Display Progress Bar on Button Click in Asp.net

Oct 6, 2013
Introduction:

Here I will explain how to use
jQuery to show progress bar on button click in asp.net with example in c#, vb.net or jQuery show loading image on button click in asp.net using c#, vb.net.

Description:

In my previous article I explained
jQuery bind gridview in asp.net, Show progress bar during postbacks in asp.net, Bind asp.net dropdown in jQuery, Lightbox effect for login page and many articles relating to jQuery, asp.net, c#, vb.net. Now I will explain how to show progress bar on button click using jQuery in asp.net.

To implement this we need to write the code like as shown below in your aspx page


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery show progress bar on button click asp.net</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
.sample
{
background-color:#DC5807;
border:1px solid black;
border-collapse:collapse;
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="DisableDiv"> </div>
<input type="button" id="btnClick" value="Get Data" />
<div id="testdiv"></div>
</form>
<script type="text/javascript">
$(function() {
$('#btnClick').click(function() {
$('#DisableDiv').fadeTo('slow', .6);
$('#DisableDiv').append('<div style="background-color:#E6E6E6;position: absolute;top:0;left:0;width: 100%;height:300%;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);"><img src="loading.gif" style="background-color:Aqua;position:fixed; top:40%; left:46%;"/></div>');
setTimeout(function() { GetData() }, 1000)
})
});
function GetData()
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "ShowLoadingImageonButtonClick.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
var theHtml = data.d;
$('#testdiv').html(theHtml)
$('#DisableDiv').html("");
},
error: function(result) {
alert("Error");
}
});
}
</script>
</body>
</html>
Now add following namespaces in code behind

C# Code


using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
Once we add namespaces need write the code like as shown below


protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string BindDatatable()
{
GridView gv = new GridView();
System.IO.StringWriter stringWriter = new System.IO.StringWriter();
HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))
{
using (SqlCommand cmd = new SqlCommand("select UserId,UserName,Location from UserInformation", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
gv.HeaderStyle.CssClass = "sample";
gv.DataSource = dt;
gv.DataBind();
gv.RenderControl(htmlWriter);
return stringWriter.ToString();
}
VB.NET Code


Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
<WebMethod()> _
Public Shared Function BindDatatable() As String
Dim gv As New GridView()
Dim stringWriter As New System.IO.StringWriter()
Dim htmlWriter As New HtmlTextWriter(stringWriter)
Dim dt As New DataTable()
Using con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
Using cmd As New SqlCommand("select UserId,UserName,Location from UserInformation", con)
con.Open()
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
End Using
End Using
gv.HeaderStyle.CssClass = "sample"
gv.DataSource = dt
gv.DataBind()
gv.RenderControl(htmlWriter)
Return stringWriter.ToString()
End Function
End Class
Demo


Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

8 comments :

Anonymous said...

This program is also showing error. Is there any other problem. Please help.

Unknown said...

Hi Suresh,

Nice article. We can do this by using ajaxStart and ajaxComplete events also. These events will be more accurate than timeout function.

Regards,
Mallikharjun

Unknown said...

Sounds Good. Your post helped me a lot. I will suggest to my team to read your blog daily.

Cheers,
Nikhil.

TG said...

good one

Unknown said...

Hi


i have a asp.net button , on button_click event , i fill datatable and then i call Response.Redirect to other page,
My Query is ,
when datatable is filling on button_click , , i want to loading or searching (for exp) , and then response.redirect,,Pls suggest how to do this using asp.net / jquery / html-css , or etc...etc...


pls mail me on mauliks1990@gmail.com
or can call on 9768551759 or give your contact number so i can talk to you personally. for the same

srujan said...

Hello,
Thanks for your posts, Can we do this without
setTimeout(function() { GetData() }, 1000)
})

because we cannot judge the time, right. is there any code please suggest me.

Unknown said...
This comment has been removed by a blog administrator.
KaushaL said...

what if any error occurs? Should the loading div be visible then?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.