Front End

17 out, 2011

Chamar HTTPhandler do jQuery, Pass data e recuperar no formato JSON

Publicidade

Há alguns meses, eu
estava trabalhando com o handler HTTP. Fui obrigado a chamar o handler
a partir do script Client. Depois, descobri que eu precisava passar alguns
dados para o handler e também receber alguns dele.

Então, comecei a procurar por alguma maneira de passar alguns dados para o
handler, e receber dele também.

Aqui vou compartilhar como podemos chamar um HTTPHandler do jQuery e passar
alguns dados para o handler e recebê-los.

Vamos fazer isso passo a passo.

  • Primeiramente,
    crie um Handler HTTP , digamos “MyHandler.ashx”e coloque sua lógica ali.
  • Estamos
    usando o jQuery aqui, então inclua o script jQuery na sua página aspx.
  • Agora
    escreva o script para chamar seu Handler na sua página aspx no seu bloco
    javascript ou o escreva em um arquivo script separado e o inclua na sua
    página.
  • Obtendo uma resposta bem sucedida da sua requisição, processe os
    dados conforme requerido.

Agora vejamos o exemplo:

Eu criei uma aplicação web e inclui a biblioteca jQuery.  Primeiramente, vamos ver como chamar o handler HTTP.

1	function CallHandler() {
2 $.ajax({
3 url: "Handler/MyHandler.ashx",
4 contentType: "application/json; charset=utf-8",
5 success: OnComplete,
6 error: OnFail
7 });
8 return false;
9 }

Aqui, url é a url do seu Handler. contentType define o
conteúdo do pedido. Com o completo sucesso da requisição, o método OnComplete será chamado. Se houver algum
erro da requisição, OnFail será chamado. Os métodos modelo são:

1	function OnComplete(result) {
2 alert('Success');
3 }
4 function OnFail(result) {
5 alert('Request failed');
6
7 }

Agora veremos o que você precisa fazer para passar alguns dados para o
seu handler. Para isso, você pode adicionar um ou mais dados de parâmetro no
seu chamado. Aqui você precisa fornecer os dados em formulários de parâmetros
de Name Value, como:

01	data: { 'Id': '100002','Type': 'Employee'}
02
03 // Now the updated method as
04 function CallHandler() {
05 $.ajax({
06 url: "Handler/MyHandler.ashx",
07 contentType: "application/json; charset=utf-8",
08 data: { 'Id': '10000', 'Type': 'Employee' },
09 success: OnComplete,
10 error: OnFail
11 });
12 return false;
13 }

Agora você pode acessar os dados no método ProcessRequest do
handler:

1	string Id = context.Request["Id"];
2 string type = context.Request["Type"];

Agora, se você quiser receber dados do Handler no lado cliente, como
você seguiria em frente? É muito fácil retornar dados no formato JSON.

Aqui no meu exemplo, criei um classe Employee e o retornei a partir do handler
depois da serialização com a ajuda do JavaScriptSerializer. Minha classe
é a seguinte:

1	public class Employee
2 {
3 public int Id { get; set; }
4 public string Name { get; set; }
5 public int Age { get; set; }
6 public string Department { get; set; }
7 }

Agora vamos ver a parte do handler. estou enviando o ID do employee atraves do Client:

01	public class MyHandler : IHttpHandler {
02
03 public void ProcessRequest (HttpContext context) {
04
05 var employee = GetData(Convert.ToInt32(context.Request["Id"]));
06
07 //Do the operation as required
08
09 JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
10 string serEmployee = javaScriptSerializer.Serialize(employee);
11 context.Response.ContentType = "text/html";
12 context.Response.Write(serEmployee);
13 }
14
15 public bool IsReusable {
16 get {
17 return false;
18 }
19 }
20
21 private Employee GetData(int Id)
22 {
23 var employee = new Employee();
24 employee.Id = Id;
25 employee.Name = "Brij";
26 employee.Age = 27;
27 employee.Department = "Research and Development";
28
29 //Write your logic here
30
31 return employee;
32 }
33
34 }

Agora o método CallHandler será:

01	function CallHandler() {
02 $.ajax({
03 url: "Handler/MyHandler.ashx",
04 contentType: "application/json; charset=utf-8",
05 dataType: "json",
06 data: { 'Id': '10000' },
07 responseType: "json",
08 success: OnComplete,
09 error: OnFail
10 });
11 return false;
12 }
13
14 function OnComplete(result) {
15 alert([result.Id, result.Name, result.Age, result.Department]);
16 }
17 function OnFail(result) {
18 alert('Request Failed');
19 }

Agora você pode receber os dados e usá-los para seus requerimentos do
lado cliente. Acima eu apenas os mostrei como um alerta pop up.

Acredito que este artigo irá te ajudar muito. Como isso pode ser usado em
diferentes cenários, o exemplo clássico seria: “em muitas situações, temos
a tarefa de carregar arquivos em nossas aplicações com várias validações, e
essas validações poderiam ser tipo arquivo, tamanho do conteúdo e também de negócios.
Todas essas validações não poderiam ser tratadas somente no lado cliente. Uma
abordagem seria o HTTPHandler, o qual podemos usar para validações
contínuas”.

?

Texto original disponível em http://brijbhushan.net/2011/05/29/call-httphandler-from-jquery-pass-data-and-retrieve-in-json-format/