Introduction
In this article I will explain about
display Progress Image on Button Click using Jquery and css while binding data in GridView from
database .
Description
Normally in our practice we have less amount
of data so we are not facing problem but when you have a requirement to bind a
large amount of data then at the time of page Load your GridView displaying
process will be slow and too much disappointed for User. Your user didn’t guess
what happening with your WebSite, why it
displayed blank result .
Using progress image user can easily
understand that data is on load and user will wait for few seconds and it will
not irritate to user.
Let’s start with Database design first.
On your Sql Server write the create table query
CREATE TABLE UserInformation(
[UserId] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,
[UserName] [varchar](50) NULL,
[Location] [nvarchar](max) NULL
)
Stored Procedure for to Bind data in
GridView -- -- --
Create proc Sp_getuser
as begin
select * from
UserInformation
end
If you don’t have large amount of data but
want to display Progress Image you have to modify above Procedure. Add single
line your procedure to display Progress
Image using fake delay
Create proc Sp_getuser
as begin
waitfor delay '00:00:03'
select * from
UserInformation
end
Now In WebForm aspx page write the following code : -- -- --
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery show progress bar on button click asp.net</title>
<script src="Scripts/jquery-1.10.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="Images/loading_spinner.gif"
style="position:fixed; top:40%; left:46%;"/></div>');
setTimeout(function() { GetData() })
})
});
function GetData()
{
$.ajax({
type:
"POST",
contentType:
"application/json;
charset=utf-8",
url:
"ProgressBaronButton.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>
In aspx page you did not find GridView control the reason
behind this is here I am creating GridView dynamically using WebMethod and bind
using Jquery-Ajax . After doing the code on aspx page ,right click on page and click on View Code .
Use the following WebMethod code on .CS
page:
[WebMethod]
public static string BindDatatable()
{
GridView gvUserInformation = 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=JP;Initial
Catalog=Employee;Integrated Security=true"))
{
using (SqlCommand cmd = new SqlCommand("spgetuser", con))
{
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
gvUserInformation.HeaderStyle.CssClass
= "sample";
gvUserInformation.DataSource = dt;
gvUserInformation.DataBind();
gvUserInformation.RenderControl(htmlWriter);
return stringWriter.ToString();
}
Don't confuse on this line "gvUserInformation.HeaderStyle.CssClass = "sample" ". The CSS named Samle for header is adding from aspx page dynamically. and this WebMethod is calling from aspx using Jquery Ajax . You don't need to call it on Page-Load and It will working fine.
0 comments:
Post a Comment