In this article I will explain with an example, how to Call (Consume) JSON Generic HTTP Handler (ASHX) on Client Side using jQuery AJAX in ASP.Net.
When the JSON Generic HTTP Handler will be called using jQuery AJAX, it will pull records from database and return the records in JSON format to jQuery AJAX function.
Database
I have made use of the following table Customers with the schema as follows.
![Call (Consume) JSON Generic HTTP Handler (ASHX) using jQuery AJAX in ASP.Net]()
I have already inserted few records in the table.
![Call (Consume) JSON Generic HTTP Handler (ASHX) using jQuery AJAX in ASP.Net]()
Note: You can download the database table SQL by clicking the download link below.
Adding Generic Handler
You will need to add a new Generic Handler (ASHX) file using Add New Item Dialog of Visual Studio as shown below.
![Call (Consume) JSON Generic HTTP Handler (ASHX) using jQuery AJAX in ASP.Net]()
Building a JSON Generic HTTP Handler
The following JSON Generic HTTP Handler gets the records from the Customers table and returns it in JSON format.
There JSON Generic HTTP Handler accepts two optional QueryString parameters.
1. customerId – If a valid ID is passed, it will return the record only for the specific Customer.
2. callback – This parameter holds the value of the Callback function which will be executed by the client side script when the response is received.
The callback feature is generally used when calling the JSON Generic HTTP Handler using JavaScript or jQuery.
C#
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string callback = context.Request.QueryString["callback"];
int customerId = 0;
int.TryParse(context.Request.QueryString["customerId"], out customerId);
string json = this.GetCustomersJSON(customerId);
if (!string.IsNullOrEmpty(callback))
{
json = string.Format("{0}({1});", callback, json);
}
context.Response.ContentType = "text/json";
context.Response.Write(json);
}
private string GetCustomersJSON(int customerId)
{
List<object> customers = new List<object>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT * FROM Customers WHERE CustomerId = @CustomerId OR @CustomerId = 0";
cmd.Parameters.AddWithValue("@CustomerId", customerId);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new
{
CustomerId = sdr["CustomerId"],
Name = sdr["Name"],
Country = sdr["Country"]
});
}
}
conn.Close();
}
return (new JavaScriptSerializer().Serialize(customers));
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
VB.Net
<%@ WebHandler Language="VB" Class="Handler" %>
Imports System
Imports System.Web
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Collections.Generic
Imports System.Web.Script.Serialization
Public Class Handler : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim callback As String = context.Request.QueryString("callback")
Dim customerId As Integer = 0
Integer.TryParse(context.Request.QueryString("customerId"), customerId)
Dim json As String = Me.GetCustomersJSON(customerId)
If Not String.IsNullOrEmpty(callback) Then
json = String.Format("{0}({1});", callback, json)
End If
context.Response.ContentType = "text/json"
context.Response.Write(json)
End Sub
Private Function GetCustomersJSON(customerId As Integer) As String
Dim customers As New List(Of Object)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT * FROM Customers WHERE CustomerId = @CustomerId OR @CustomerId = 0"
cmd.Parameters.AddWithValue("@CustomerId", customerId)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New With { _
.CustomerId = sdr("CustomerId"), _
.Name = sdr("Name"), _
.Country = sdr("Country") _
})
End While
End Using
conn.Close()
End Using
Return (New JavaScriptSerializer().Serialize(customers))
End Using
End Function
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
Call (Consume) JSON Generic Handler (ASHX) using jQuery AJAX in ASP.Net
The following HTML Markup consists of an HTML TextBox and an
HTML Button assigned with a jQuery click event handler.
The GetCustomers JavaScript function is called inside the jQuery document ready event handler and also on Button Click event handler.
The JSON Generic HTTP Handler is called using the jQuery getJSON function. The value of the CustomerId parameter is fetched from the TextBox while the callback parameter is passed as “?” as there’s no callback function in this scenario.
Once the response is received, it is displayed in an HTML Table.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
GetCustomers();
$("#btnSearch").click(function () {
GetCustomers();
});
});
function GetCustomers() {
var table = $("#tblCustomers");
var customerId = $.trim($("#txtCustomerId").val());
$.getJSON('<%=ResolveUrl("~/Handler.ashx")%>' + '?customerId=' + customerId + '&callback=?', function (result) {
table.find("tr:not(:first)").remove();
$.each(result, function (i, customer) {
var row = table[0].insertRow(-1);
$(row).append("<td />");
$(row).find("td").eq(0).html(customer.CustomerId);
$(row).append("<td />");
$(row).find("td").eq(1).html(customer.Name);
$(row).append("<td />");
$(row).find("td").eq(2).html(customer.Country);
});
});
}
</script>
CustomerId:
<input type="text" id="txtCustomerId" />
<input type="button" id="btnSearch" value="Search" />
<hr />
<table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
<tr>
<th style="width: 90px">
Customer Id
</th>
<th style="width: 120px">
Name
</th>
<th style="width: 90px">
Country
</th>
</tr>
</table>
Screenshot
![Call (Consume) JSON Generic HTTP Handler (ASHX) using jQuery AJAX in ASP.Net]()
Demo
Downloads
