jQuery Display Progress Bar on Button Click in Asp dotnet
08
November
2013

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.

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

Aspdotnet_jquery1

aspdotnet_jquery2

aspdotnet_jquery3

  • 1553 View
  • Pin It