In this article I will explain with an example, how to return DataSet (DataTable) from WebMethod (PageMethod) to JavaScript or jQuery in ASP.Net using C# and VB.Net.
In this example, the DataSet (DataTable) will be populated from database and it will be returned as XML string by the WebMethod (PageMethod) to jQuery AJAX function.
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
HTML Markup
The following HTML Markup consists of an HTML DIV with an HTML Table. The HTML table will be used for displaying the returned JSON data (object) from ASP.Net WebMethod (PageMethod).
<div id = "dvCustomers">
<table class="tblCustomer" cellpadding="2" cellspacing="0" border="1">
<tr>
<th>
<b><u><span class="name"></span></u></b>
</th>
</tr>
<tr>
<td>
<b>City: </b><span class="city"></span><br />
<b>Postal Code: </b><span class="postal"></span><br />
<b>Country: </b><span class="country"></span><br />
<b>Phone: </b><span class="phone"></span><br />
<b>Fax: </b><span class="fax"></span><br />
</td>
</tr>
</table>
</div>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
WebMethod (PageMethod) returning DataSet (DataTable)
The following WebMethod (PageMethod) will return DataSet (DataTable). When a call is made to the WebMethod (PageMethod), it first fetches the records from the database and populates a DataSet and then returns it back to the Client Side function as XML string.
C#
[WebMethod]
public static string GetCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 * FROM Customers"))
{
cmd.Connection = con;
DataSet ds = new DataSet();
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.Fill(ds, "Customers");
}
return ds.GetXml();
}
}
}
VB.Net
<WebMethod()> _
Public Shared Function GetCustomers() As String
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT TOP 10 * FROM Customers")
cmd.Connection = con
Dim ds As New DataSet()
Using sda As New SqlDataAdapter(cmd)
sda.Fill(ds, "Customers")
End Using
Return ds.GetXml()
End Using
End Using
End Function
Client Side functionality
Inside the jQuery document ready event handler, an AJAX call is made to the WebMethod (PageMethod). Inside the Success event handler, the XML string is parsed to an XML document and a loop is executed over the nodes of the XML document.
Inside the loop, the HTML Table is cloned and the columns values are set to their respective fields using the CSS class names.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
var table = $("#dvCustomers table").eq(0).clone(true);
$("#dvCustomers table").eq(0).remove();
$(customers).each(function () {
$(".name", table).html($(this).find("ContactName").text());
$(".city", table).html($(this).find("City").text());
$(".postal", table).html($(this).find("PostalCode").text());
$(".country", table).html($(this).find("Country").text());
$(".phone", table).html($(this).find("Phone").text());
$(".fax", table).html($(this).find("Fax").text());
$("#dvCustomers").append(table).append("<br />");
table = $("#dvCustomers table").eq(0).clone(true);
});
}
</script>
Screenshot
![Return DataSet (DataTable) from WebMethod (PageMethod) to JavaScript / jQuery in ASP.Net using C# and VB.Net]()
Demo
Downloads
