Retrieve Data from the Database using jQuery

Retrieve Data from the Database using
jQuery/Ajax/JSon in ASP.Net
How to retrieve data from the database
using jQuery/Ajax/JSon In ASP.Net
Hi Everyone,
In this tutorial I'm going to show you how to retrieve data from SQL Server
database using jQuery/Ajax/JSon on ASP.Net
Also in this example I have demonstrated how to use a splash

screen(loading screen), until the data is retrieved to the client side.
For this example we are using NorthWind Database.
You can generte a loading image through bellow mentioned url:
http://ajaxload.info/
Step 01:
======
Create a aspx page called "JqueryJsonDataSet"
Step 02:
======
Add bellow mentioned script/styles/html to "JqueryJsonDataSet.aspx" page
Add jQuery script file to the page:
<script src="jQuery/jquery-1.7.2.js" type="text/javascript"></script>
Add bellow styles:
<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;
background-color: #dedede;
}
table.gridtable td
{
border-width: 1px;
padding: 8px;
background-color: #ffffff;
}
</style>
Add bellow 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>Ship City</b></td>");
headers.push("<td><b>Ship Postal Code</b></td>");
headers.push("<td><b>Ship Country</b></td>");
headers.push("</tr>");
// rows section
$.each(customers, function () {
var customer = $(this);
rows.push("<tr>");
rows.push("<td>" + $(this).find("ShipCity").text() + "</td>");
rows.push("<td>" + $(this).find("ShipPostalCode").text() +
"</td>");
rows.push("<td>" + $(this).find("ShipCountry").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!!!');
}
function OnAjaxComplete() {
//debugger;
//alert('Completed!!!');
}
// loading screen functionality functions - this part is additional -
end
</script>
Add bellow html:
<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.gif' alt="Image not found." /></span>
<br />
<span style="text-align: left; padding-left: 8px;">Loading
...</span>
</div>
<%--Loading screen section - end--%>
</form>
</body>
Step 03:
======
Add bellow C# code to "JqueryJsonDataSet.aspx.cs" page

[System.Web.Services.WebMethod]
public static string GetShipDetails()
{
string query = "select top 10 ShipCity, ShipPostalCode, ShipCountry from
Orders";
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
string connString = "Data Source=192.168.180.xxx;Initial
Catalog=Northwind;User ID=xxx;Password=xxx;MultipleActiveResultSets=True;";
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;
}
}
}
}
Complete Source Code
JqueryJsonDataSet.aspx
<%@ Page Language="C#" AutoEventWireup="true"

CodeBehind="JqueryJsonDataSet.aspx.cs"
Inherits="HelloWorld.JqueryJsonDataSet" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Retrieving Data from Database using
jQuery/Ajax/JSon</title>
</head>
<script src="jQuery/jquery-1.7.2.js"
type="text/javascript"></script>
<link href="jQuery/demos/demos.css" rel="stylesheet"
type="text/css" />
<style type="text/css">
table.gridtable
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-collapse: collapse;
}
table.gridtable th
{
border-width: 1px;
padding: 8px;
background-color: #dedede;
}
table.gridtable td
{
border-width: 1px;
padding: 8px;
background-color: #ffffff;
}
</style>
// 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: '{}',
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>Ship City</b></td>");
headers.push("<td><b>Ship Postal Code</b></td>");
headers.push("<td><b>Ship Country</b></td>");
headers.push("</tr>");
// rows section
$.each(customers, function () {
var customer = $(this);
rows.push("<tr>");
rows.push("<td>" + $(this).find("ShipCity").text()
+ "</td>");
rows.push("<td>" + $
(this).find("ShipPostalCode").text() + "</td>");
rows.push("<td>" + $
(this).find("ShipCountry").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!!!');
}
function OnAjaxStop() {
//debugger;
//alert('Stop!!!');
}
function OnAjaxComplete() {
//debugger;
//alert('Completed!!!');
}
// loading screen functionality functions - this part is
additional - end
</script>
<body>
<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.gif' alt="Image not
found." /></span>
<br />
<span style="text-align: left; padding-left:
8px;">Loading ...</span>
</div>
<%--Loading screen section - end--%>
</form>
</body>
</html>
JqueryJsonDataSet.aspx.cs
using System;
using System.Data;
using System.Data.SqlClient;
namespace HelloWorld
{
public partial class JqueryJsonDataSet :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string GetShipDetails()
{
string query = "select top 10 ShipCity,
ShipPostalCode, ShipCountry from Orders";
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}
private static DataSet GetData(SqlCommand cmd)
{
string connString = "Data
Source=192.168.180.xxx;Initial Catalog=Northwind;User
ID=xxx;Password=xxx;MultipleActiveResultSets=True;";
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;
}
}
}
}
}
}
Issue:
Some times when we try to load large amount of data, JSon returns an
error.
Ex sql:
SQL that returns large amount of data...
string query = "select * from Orders";
This is because web.config is not configured for large amount of JSon data,
it will prompt bellow mentioned error.
Error during serialization or deserialization using the JSON

JavaScriptSerializer. The length of the string exceeds the value set on the
maxJsonLength property.
In that case you need to add bellow mentoned configurations to

web.config file.
Section 01:
<sectionGroup name="system.web.extensions"
type="System.Web.Configuration.SystemWebExtensionsSectionGroup
, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting"
type="System.Web.Configuration.ScriptingSectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServicesSectionGrou
p, System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization"
type="System.Web.Configuration.ScriptingJsonSerializationSecti
on, System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"
requirePermission="false"/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
Section 02:
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="50000000"/>
</webServices>
</scripting>
</system.web.extensions>
Many ways to communicate with your
database using jQuery AJAX and ASP.NET
47 Comments Monday, May 4, 2009 6:39 PM
AJAX ASP.NET 3.5 jQuery
I've recently done a series of articles that feature calling databases via AJAX using jQuery. In
pretty much all of the articles, I have used Web Services as my data access mechanism.
Judging from the comments that some of the articles have attracted, this has caused a little
confusion. But Web Services is just one mechanism. Page Methods and simple ASPX files
are two more. And finally, as pointed out by a commenter, Benny Halperin, ASHX files are
yet another option. In this article, I shall review each of these approaches.
Each example will feature the same requirement, and that is to obtain and display the
Northwind Customer details relating to a specific CustomerID selected from a DropDownList
on a page called Customer.aspx.
The bare bones of Customer.aspx are as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Customer.aspx.cs"

Inherits="Customer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<div id="SelectCustomers">
<asp:DropDownList ID="Customers" runat="server">
</asp:DropDownList>
</div>
<div id="CustomerDetails">
</div>
</form>
</body>
</html>
This has a code-behind in which the data is obtained and bound to the DropDownList to give
the list of customers:
using System;
public partial class Customer : System.Web.UI.Page

{
{
string connect =
"Server=MyServer;Database=Northwind;Trusted_Connection=True";
string query = "SELECT CustomerID, CompanyName FROM Customers";
using (SqlConnection conn = new SqlConnection(connect))
{
using (SqlCommand cmd = new SqlCommand(query, conn))
{
conn.Open();
Customers.DataSource = cmd.ExecuteReader();
Customers.DataValueField = "CustomerID";
Customers.DataTextField = "CompanyName";
Customers.DataBind();
}
}
}
}
ASPX File
I'll start by saying that this is not something you might see very often. However, I referred to
it in one of my first articles on using AJAX and ASP.NET. The aspx page does nothing but
communicate with the database and prepare html as a response to the calling code. The page
is called FetchCustomer.aspx, and I de-selected the option to use code-behind. This is shown
below along with the code:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
{
string connect =
"Server=MIKE;Database=Northwind;Trusted_Connection=True";
string query = "SELECT CompanyName, Address, City, Region, PostalCode,"
+
"Country, Phone, Fax FROM Customers WHERE CustomerID =
@CustomerID";
string id = Request.QueryString["CustomerID"];
if (id != null && id.Length == 5)
{
{
{
cmd.Parameters.AddWithValue("CustomerID",
Request.QueryString["CustomerID"]);
conn.Open();
SqlDataReader rdr = cmd.ExecuteReader();
if (rdr.HasRows)
{
while (rdr.Read())
{
Response.Write("<p>");
Response.Write("<strong>" + rdr["CompanyName"].ToString() +
"</strong><br />");
Response.Write(rdr["Address"].ToString() + "<br />");
Response.Write(rdr["City"].ToString() + "<br />");
Response.Write(rdr["Region"].ToString() + "<br />");
Response.Write(rdr["PostalCode"].ToString() + "<br />");
Response.Write(rdr["Country"].ToString() + "<br />");
Response.Write("Phone: " + rdr["Phone"].ToString() + "<br
/>");
Response.Write("Fax: " + rdr["Fax"].ToString() + "</p>");
}
}
}
}
}
else
{
Response.Write("<p>No customer selected</p>");
}
Response.End();
}
</script>
This file is solely responsible for generating a response to the AJAX call, and presents no UI
itself, so using a code-behind page is unnecessary. That's why the file makes use of <script
runat="server">. It takes the value passed into the CustomerID querystring value and gets the
relevant customer details, and then goes through the fields returned in the DataReader, and
Response.Writes the values with a little html mixed in. There are a number of ways that
jQuery can request this page and handle the response. The first way to look at is the load()
function, which loads html from a remote file:
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

$(document).ready(function() {
$('#Customers').change(function() {
$('#CustomerDetails').load("FetchCustomer.aspx?CustomerID=" + $
('#Customers').val());
});
});
</script>
The code above will go into the head section of Customer.aspx. First, the latest version of the
jQuery library is referenced, and then as the page loads - $(document).ready() - a function is
applied to the onchange event of the drop down list. This function simply gets the div with
the ID of CustomerDetails to load the html returned from FetchCustomer.aspx, and passes the
currently selected dropdown list value in the querystring.
An alternative to load() is $.get(). This does exactly the same thing, except that the callback
argument specifies what is to be done with the response from the AJAX request. Just replace
the javascript code on the head of the Customer.aspx file with the following:

$.get("FetchCustomer.aspx",
{ CustomerID: "" + $('#Customers').val() + "" },
function(data) {
$('#CustomerDetails').html(data);
});
});
});
</script>
Here, the querystring value is passed along with the querystring name in { } brackets, with
the name and the value separated by a colon. jQuery takes these values and constructs a
querystring as part of the HTTP request, so that the page called is FetchCustomer.aspx?
CustomerID=SomeValue. It's interesting to note at this point that if you were to pass the { }
brackets into the load method, you would force an HTTP POST request, rather than a GET
request. In the $.get() example, the response is available in the variable data and the jQuery
html() function is used to place this in the CustomerDetails div.
The final calling method I will look at is the one that I have been using in previous articles:
$.ajax(). This is a more feature rich method in that it allows a range of options to be applied
to manage different types of call, and error handling. As such, it can (and has - if previous
comments are anything to go by) prove a little confusing. Nevertheless, we'll look at its use in
the context of the current requirement to call an aspx file:

$.ajax({
contentType: "text/html; charset=utf-8",
data: "CustomerID=" + $('#Customers').val(),
url: "FetchCustomer.aspx",
dataType: "html",
success: function(data) {
$("#CustomerDetails").html(data);
}
});
});
});
</script>
Only a limited number of options have been applied in the preceding code, but it's already
clear to see that the load() and $.get() alternatives are much simpler to use. We'll use the
load() option with the next approach, ASHX files.
ASHX Files
ASHX files are convenient ways to deliver partial content to a web page. They are actually
HttpHandlers, and are responsible for processing incoming HTTP requests and providing the
appropriate response. Quite often, they are used for delivering binary content such as images,
or files that are stored in a database or outside of the web application file system. For
delivering small amounts of html to be plugged into a particular position on a web page, they
can be extremely useful. Once you have chosen Add New Item -> Generic Handler, you
should get a template for a class that inherits from IHttpHandler. It will contain one method -
ProcessRequest() and one property - IsReusable(). The logic to render the output will go into
ProcessRequest() as follows:
<%@ WebHandler Language="C#" Class="FetchCustomer" %>
using System;
using System.Web;
using System.Data;
public class FetchCustomer : IHttpHandler {
public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/html";
string connect =
"Server=MIKE;Database=Northwind;Trusted_Connection=True";
string query = "SELECT CompanyName, Address, City, Region,
PostalCode," +
@CustomerID";
string id = context.Request.QueryString["CustomerID"];
if (id != null && id.Length == 5)
{
{
{
cmd.Parameters.AddWithValue("CustomerID",
context.Request.QueryString["CustomerID"]);
conn.Open();
if (rdr.HasRows)
{
while (rdr.Read())
{
context.Response.Write("<p>");
context.Response.Write("<strong>" +
rdr["CompanyName"].ToString() + "</strong><br />");
context.Response.Write(rdr["Address"].ToString() +
"<br />");
context.Response.Write(rdr["City"].ToString() + "<br
/>");
context.Response.Write(rdr["Region"].ToString() + "<br
/>");
context.Response.Write(rdr["PostalCode"].ToString() +
"<br />");
context.Response.Write(rdr["Country"].ToString() +
"<br />");
context.Response.Write("Phone: " +
rdr["Phone"].ToString() + "<br />");
context.Response.Write("Fax: " + rdr["Fax"].ToString() +
"</p>");
}
}
}
}
}
else
{
context.Response.Write("<p>No customer selected</p>");
}
context.Response.End();
}
public bool IsReusable {

get {
return false;
}
}
}
The method is hardly any different to the ASPX file approach, and the jQuery load()
approach is also identical, except for the endpoint it references:

$('#CustomerDetails').load("FetchCustomer.ashx?CustomerID=" + $
('#Customers').val());
});
});
</script>
Page Methods
A Page Method is a static method that belongs to its Page class. As such, it can be placed in a
<script runat="server"> block, or in code-behind. Since I am already using code-behind to
populate the DropDownList on PageLoad() in Customer.aspx, I'll stick with the code-behind
approach. ASP.NET 3.5 methods will always serialize and return a JSON object wrapped
inside another one: d, if the request contentType is set to application/json.
To add the method to the code behind, two additional references are needed:
using System.Text;
using System.Web.Services;
These will allow me to use a StringBuilder object to build the return value, and to adorn the
Page Method with the [WebMethod] attribute. The full method is as follows:
[WebMethod]
public static string FetchCustomer(string CustomerID)
{
string response = "<p>No customer selected</p>";
string connect =
string query = "SELECT CompanyName, Address, City, Region, PostalCode," +
@CustomerID";
if (CustomerID != null && CustomerID.Length == 5)
{
StringBuilder sb = new StringBuilder();
{
{
cmd.Parameters.AddWithValue("CustomerID", CustomerID);
conn.Open();
if (rdr.HasRows)
{
while (rdr.Read())
{
sb.Append("<p>");
sb.Append("<strong>" + rdr["CompanyName"].ToString() +
"</strong><br />");
sb.Append(rdr["Address"].ToString() + "<br />");
sb.Append(rdr["City"].ToString() + "<br />");
sb.Append(rdr["Region"].ToString() + "<br />");
sb.Append(rdr["PostalCode"].ToString() + "<br />");
sb.Append(rdr["Country"].ToString() + "<br />");
sb.Append("Phone: " + rdr["Phone"].ToString() + "<br />");
sb.Append("Fax: " + rdr["Fax"].ToString() + "</p>");
response = sb.ToString();
}
}
}
}
}
return response;
}
It's more or less identical to the ASPX version. The jQuery code is too:

$.ajax({
type: "POST",
data: "{ CustomerID: '" + $('#Customers').val() + "'}",
url: "Customer.aspx/FetchCustomer",
dataType: "json",
$("#CustomerDetails").html(data.d);
}
});
});
});
</script>
The response obtained from this pseudo-Web Service is a serialized JSON object:
{"d":"\u003cp\u003e\u003cstrong\u003eQUICK-Stop\u003c/strong\u003e\
u003cbr /
\u003eTaucherstraße 10\u003cbr /\u003eCunewalde\u003cbr /\u003e\u003cbr /
\u003e01307\u003cbr /\u003eGermany\u003cbr /\u003ePhone: 0372-035188
\u003cbr /\u003eFax: \u003c/p\u003e"}
Unicode escape characters appear in place of non-ASCII characters - principally the "<" (\
u003c) and ">" (\u003e) tag characters. As you can see, the html returned from the method is
represented as the value of a single property: d. An alternative to returning partial html is to
return a custom business object. This is what we will look at next. Within the Customer Page
class, I'll define the properties of a Company object:
public class Company

{
public string CompanyID { get; set; }
public string CompanyName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string Region { get; set; }
public string PostalCode { get; set; }
public string Country { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
This is followed by the revised Page Method which returns a Company object, populated
from the DataReader:
[WebMethod]
public static Company FetchCustomer(string CustomerID)
{
Company c = new Company();
string connect =
string query = "SELECT CompanyName, Address, City, Region, PostalCode," +
@CustomerID";
{
{
{
conn.Open();
if (rdr.HasRows)
{
while (rdr.Read())
{
c.CompanyName = rdr["CompanyName"].ToString();
c.Address = rdr["Address"].ToString();
c.City = rdr["City"].ToString();
c.Region = rdr["Region"].ToString();
c.PostalCode = rdr["PostalCode"].ToString();
c.Country = rdr["Country"].ToString();
c.Phone = rdr["Phone"].ToString();
c.Fax = rdr["Fax"].ToString();
}
}
}
}
}
return c;
}
The result of this call is the object d again, which has one property - another object of type
Company:
{"d":{"__type":"Company","CompanyID":null,"CompanyName":"Old World
Delicatessen",
"Address":"2743 Bering
St.","City":"Anchorage","Region":"AK","PostalCode":"99508",
"Country":"USA","Phone":"(907) 555-7584","Fax":"(907) 555-2880"}}
Since we are no longer returning html, we have to parse the nested object and create the html
within the client script:

$.ajax({
type: "POST",
url: "Customer.aspx/FetchCustomer",
dataType: "json",
var Company = data.d;
$('#CustomerDetails').append
('<p><strong>' + Company.CompanyName + "</strong><br />" +
Company.Address + "<br />" +
Company.City+ "<br />" +
Company.Region + "<br />" +
Company.PostalCode + "<br />" +
Company.Country + "<br />" +
Company.Phone + "<br />" +
Company.Fax + "</p>" )
}
});
});
});
</script>
ASP.NET Web Services
I have already detailed how to use ASP.NET 3.5 Web Services with jQuery in this article, but
for completeness, we'll create one here by adding a new item to the project:
And within the file that has just been created, we add a method. Here's the complete code:
<%@ WebService Language="C#" Class="FetchCustomer" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Text;
using System.Web.Script.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX,
uncomment the following line.
[ScriptService]
public class FetchCustomer : WebService

{
[WebMethod]
public string GetCustomer(string CustomerID)
{
string response = "<p>No customer selected</p>";
string connect =
string query = "SELECT CompanyName, Address, City, Region, PostalCode,"
+
@CustomerID";
{
StringBuilder sb = new StringBuilder();
{
{
conn.Open();
if (rdr.HasRows)
{
while (rdr.Read())
{
sb.Append("<p>");
sb.Append("<strong>" + rdr["CompanyName"].ToString() +
"</strong><br />");
sb.Append(rdr["Address"].ToString() + "<br />");
sb.Append(rdr["City"].ToString() + "<br />");
sb.Append(rdr["Region"].ToString() + "<br />");
sb.Append(rdr["PostalCode"].ToString() + "<br />");
sb.Append(rdr["Country"].ToString() + "<br />");
sb.Append("Phone: " + rdr["Phone"].ToString() + "<br />");
sb.Append("Fax: " + rdr["Fax"].ToString() + "</p>");
response = sb.ToString();
}
}
}
}
}
return response;
}
}
This method will return the partial html that we have used before, but the main points to note
are that the [ScriptService] attribute has been uncommented, which allows Javascript to call
the method, and that the method is NOT static (as it must be with the Page Method). The
jQuery code is almost the same as with the Page Method approach:

$.ajax({
type: "POST",
url: "FetchCustomer.asmx/GetCustomer",
dataType: "json",
$("#CustomerDetails").html(data.d);
}
});
});
});
</script>
Summary
We've looked at a number of ways to perform data access within ASP.NET to work with
jQuery AJAX: ASPX file, ASHX file, Page Method and Web Service, with a choice of how
to call the ASPX file in particular. So which should you use and when?
The ASPX file approach is the one that will be most familiar to developers coming from
another technology such as classic ASP or PHP. It also provides easier access, or shorter code
with the load() method. Although not shown here, you can also return custom business
objects serialized to JSON, and use the getJSON() method that comes with jQuery. This helps
to maintain a separation of concerns. To aid this further, there is no reason why you cannot
group your ASPX files in a separate folder. They will be accessible to all pages in your
application. One final point in favour of the ASPX approach is that you can use an inline
coding method to return HTML rather than using Response.Write() to render the output. This
again will be most familiar to those migrating from other technologies.
ASHX files are nice and neat. They are more lightweight than ASPX files in that they won't
cause an entire Page class to be instantiated on the web server. However, just like ASPX
files, each one can only be responsible for one method. If you want overloaded methods, each
one will need to be in its own separate file.
Page Methods are great if you don't mind mixing data access with your presentation logic, or
want to keep a slimmed down approach with just 2 layers. Ideally they should be placed in
the same page where the method is going to be used, and not if they might be needed ny
multiple pages. That way may lead to confusion.
Full Web Services are at their most useful when you want to allow other applications to make
use of your data access services. They are also a good way to keep clear separation of
different functionality within your application, or if you have an aversion to the ASPX file
approach. Finally, web services allow multiple related methods to reside in the same place
which makes logical grouping and maintenance easier.
http://www.mikesdotnetting.com/article/105/asp-net-mvc-partial-views-and-strongly-typed-
custom-viewmodels

Retrieve Data from the Database using jQuery

Uploaded by

Retrieve Data from the Database using jQuery

Uploaded by

Retrieve Data from the Database using

Also in this example I have demonstrated how to use a splash

You can generte a loading image through bellow mentioned url:

Add bellow mentioned script/styles/html to "JqueryJsonDataSet.aspx" page

Add jQuery script file to the page:

<script src="jQuery/jquery-1.7.2.js" type="text/javascript"></script>

Add bellow styles:

Add bellow script:

Add bellow html:

Add bellow C# code to "JqueryJsonDataSet.aspx.cs" page

Complete Source Code

<%@ Page Language="C#" AutoEventWireup="true"

SQL that returns large amount of data...

string query = "select * from Orders";

Error during serialization or deserialization using the JSON

In that case you need to add bellow mentoned configurations to

AJAX ASP.NET 3.5 jQuery

The bare bones of Customer.aspx are as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Customer.aspx.cs"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

public partial class Customer : System.Web.UI.Page

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

<%@ WebHandler Language="C#" Class="FetchCustomer" %>

public class FetchCustomer : IHttpHandler {

public void ProcessRequest (HttpContext context) {

public bool IsReusable {

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

public class Company

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

ASP.NET Web Services

<%@ WebService Language="C#" Class="FetchCustomer" %>

public class FetchCustomer : WebService

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>

You might also like