In this article I will explain with an example, how to return JSON data (object) from WebMethod (PageMethod) in ASP.Net using C# and VB.Net.
In this example, the JSON data (object) will be populated from database and it will be returned 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.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
The Property Class
The following property class is created to hold the data returned from database and it is returned to the Client Side script as a JSON object.
C#
public class Customer
{
public string CustomerId { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}
VB.Net
Public Class Customer
Public Property CustomerId() As String
Public Property ContactName() As String
Public Property City() As String
Public Property Country() As String
Public Property PostalCode() As String
Public Property Phone() As String
Public Property Fax() As String
End Class
WebMethod (PageMethod) returning JSON data (object)
The following WebMethod (PageMethod) will return JSON data (object). When a call is made to the WebMethod (PageMethod), it first fetches the records from the database and populates a Generic list of Customer class objects and then the list is returned as a JSON object back to the Client Side function.
C#
[WebMethod]
public static List<Customer> 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;
List<Customer> customers = new List<Customer>();
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new Customer
{
CustomerId = sdr["CustomerId"].ToString(),
ContactName = sdr["ContactName"].ToString(),
City = sdr["City"].ToString(),
Country = sdr["Country"].ToString(),
PostalCode = sdr["PostalCode"].ToString(),
Phone = sdr["Phone"].ToString(),
Fax = sdr["Fax"].ToString(),
});
}
}
con.Close();
return customers;
}
}
}
VB.Net
<WebMethod()> _
Public Shared Function GetCustomers() As List(Of Customer)
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 customers As New List(Of Customer)()
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New Customer() With { _
.CustomerId = sdr("CustomerId").ToString(), _
.ContactName = sdr("ContactName").ToString(), _
.City = sdr("City").ToString(), _
.Country = sdr("Country").ToString(), _
.PostalCode = sdr("PostalCode").ToString(), _
.Phone = sdr("Phone").ToString(), _
.Fax = sdr("Fax").ToString() _
})
End While
End Using
con.Close()
Return customers
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, a loop is executed over the items of the received JSON object.
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.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(response) {
var table = $("#dvCustomers table").eq(0).clone(true);
var customers = response.d;
$("#dvCustomers table").eq(0).remove();
$(customers).each(function () {
$(".name", table).html(this.ContactName);
$(".city", table).html(this.City);
$(".postal", table).html(this.PostalCode);
$(".country", table).html(this.Country);
$(".phone", table).html(this.Phone);
$(".fax", table).html(this.Fax);
$("#dvCustomers").append(table).append("<br />");
table = $("#dvCustomers table").eq(0).clone(true);
});
}
</script>
Screenshot
![Return JSON data (object) from WebMethod (PageMethod) in ASP.Net using C# and VB.Net]()
Demo
Downloads
