Call HTTPhandler from jQuery, Pass data and retrieve in JSON format

Let’s go step by step



•First create a HTTP Handler say “MyHandler.ashx” and put your logic there

•As we are using jQuery here. So include the jQuery script in your aspx page

•Now write the script to call your Handler at your aspx page in javascript block or write it in a separate script file and include it in your page.

•OnSucessfull complete of your request receive the data and process it as required.

Now lets see the example:

I have created one Website type application and included the jQuery library in my application. Now first lets see , how to call HTTP handler.

function CallHandler() {



$.ajax({


url: "Handler/MyHandler.ashx",


contentType: "application/json; charset=utf-8",


success: OnComplete,


error: OnFail


});


return false;


}

Here url is the url of your Handler. contentType defines the content of the request. On successful completion of the request the OnComplete method will be called. If there is any error of the request the OnFail will be called. The dummy methods are
 
function OnComplete(result) {



alert('Success');


}


function OnFail(result) {


alert('Request failed');


}

Now what you’ll do if you need to pass some data to your handler.  For this you can add one more parameter data in you call. Here you need to give data in form of Name value parameter as
 
data: { 'Id': '100002','Type': 'Employee'}




// Now the updated method as

function CallHandler() {


$.ajax({


url: "Handler/MyHandler.ashx",


contentType: "application/json; charset=utf-8",


data: { 'Id': '10000', 'Type': 'Employee' },


success: OnComplete,


error: OnFail


});


return false;


}
 
Now you can access the data in handler’s ProcessRequest method as
 
string Id = context.Request["Id"];



string type = context.Request["Type"];

Now, If you want to receive data from Handler at Client side. How will you move ahead.


It’s very easy to return data in JSON format.

Here in my sample example, I have created one Class Employee and returning it from handler after serializing with the help of JavaScriptSerializer. My Class is as.
public class Employee



{


public int Id { get; set; }


public string Name { get; set; }


public int Age { get; set; }


public string Department { get; set; }


}


Now let’s see the handler part. I am sending the Id of employee from Client
 
public class MyHandler : IHttpHandler {







public void ProcessRequest (HttpContext context) {






var employee = GetData(Convert.ToInt32(context.Request["Id"]));






//Do the operation as required






JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();


string serEmployee = javaScriptSerializer.Serialize(employee);


context.Response.ContentType = "text/html";\


context.Response.Write(serEmployee);


}






public bool IsReusable {


get {


return false;


}


}






private Employee GetData(int Id)


{


var employee = new Employee();


employee.Id = Id;


employee.Name = "Brij";


employee.Age = 27;


employee.Department = "Research and Development";






//Write your logic here






return employee;


}


}


Now the CallHandler method will be as
 
function CallHandler() {



$.ajax({


url: "Handler/MyHandler.ashx",


contentType: "application/json; charset=utf-8",


dataType: "json",


data: { 'Id': '10000' },


responseType: "json",


success: OnComplete,


error: OnFail


});


return false;


}






function OnComplete(result) {


alert([result.Id, result.Name, result.Age, result.Department]);


}


function OnFail(result) {


alert('Request Failed');


}

Now you can receive the data and use it as per your requirement at client side. Above here I have just shown as alert popup.




reference: http://brijbhushan.net/2011/05/29/call-httphandler-from-jquery-pass-data-and-retrieve-in-json-format/