.aspx Page Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table.gridtable
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th
{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td
{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<script src="jQuery/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
// calling jquery functions once document is ready
$(document).ready(function () {
// retreving data on button click
$("#btnLoad").click(LoadDataThroughAjaxCall);
//loading screen functionality - this part is additional - start
$("#divTable").ajaxStart(OnAjaxStart);
$("#divTable").ajaxError(OnAjaxError);
$("#divTable").ajaxSuccess(OnAjaxSuccess);
$("#divTable").ajaxStop(OnAjaxStop);
$("#divTable").ajaxComplete(OnAjaxComplete);
//loading screen functionality - this part is additional - end
});
// ajax call
function LoadDataThroughAjaxCall() {
$.ajax({
type: "POST",
url: "JqueryJsonDataSet.aspx/GetShipDetails",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: OnFailure,
error: OnError
});
// this avoids page refresh on button click
return false;
}
// on sucess get the xml
function OnSuccess(response) {
//debugger;
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
showOnATable(customers);
}
// show data on a table
function showOnATable(customers) {
//debugger;
var headers = [];
var rows = [];
// header section
headers.push("<tr>");
headers.push("<td><b>
ApperField Names</b></td>");
headers.push("<td><b>
ApperField Names</b></td>");
headers.push("<td><b>
ApperField Names</b></td>");
headers.push("<td><b>
ApperField Names</b></td>");
headers.push("</tr>");
// rows section
$.each(customers, function () {
var customer = $(this);
rows.push("<tr>");
rows.push("<td>" + $(this).find("
databaseField Names").text() + "</td>");
rows.push("<td>" + $(this).find("
databaseField Names").text() + "</td>");
rows.push("<td>" + $(this).find("
databaseField Names").text() + "</td>");
rows.push("<td>" + $(this).find("
databaseField Names").text() + "</td>");
rows.push("</tr>");
});
var top = "<table class='gridtable'>";
var bottom = "</table>";
var table = top + headers.join("") + rows.join("") + bottom;
$("#divTable").empty();
$("#divTable").html(table);
}
// loading screen functionality functions - this part is additional - start
function OnAjaxStart() {
//debugger;
//alert('Starting...');
$("#divLoading").css("display", "block");
}
function OnFailure(response) {
//debugger;
alert('Failure!!!' + '<br/>' + response.reponseText);
}
function OnError(response) {
//debugger;
var errorText = response.responseText;
alert('Error!!!' + '\n\n' + errorText);
}
function OnAjaxError() {
//debugger;
alert('Error!!!');
}
function OnAjaxSuccess() {
//debugger;
//alert('Sucess!!!');
$("#divLoading").css("display", "none");
}
function OnAjaxStop() {
//debugger;
//alert('Stop!!!');
$("#divLoading").css("display", "none");
}
function OnAjaxComplete() {
//debugger;
//alert('Completed!!!');
$("#divLoading").css("display", "none");
}
// loading screen functionality functions - this part is additional - end
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnLoad" runat="server" Text="Load Data" />
</div>
<br />
<div id="divTable">
</div>
<%--Loading screen section - start--%>
<div id="divLoading" style="display: none; position: absolute; top: 50%; left: 40%;
text-align: left;">
<span>
<img src='Images/Loading.jpg' alt="Image not found." /></span>
<br />
<span style="text-align: left; padding-left: 8px;">Loading ...</span>
</div>
<%--Loading screen section - end--%>
</form>
</body>
</html>
.cs Page Code:
First and foe most thing is add the following dll's to page
[System.Web.Services.WebMethod]
public static string GetShipDetails()
{
string query = "
select query";
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
string connString = "
connectionstring";
using (SqlConnection con = new SqlConnection(connString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
