Arquivos da categoria: AJAX

AngularJS – Requisições Assíncronas (AJAX)

pic_angularEste post foi construído com base na documentação oficial: https://docs.angularjs.org/api/ng/service/$http.

A comunicação entre cliente e servidor no AngularJS é gerenciada pelo serviço $http.

Os métodos disponíveis para realizar requisições são:

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

Por padrão, estes métodos estão configurados com o Content-Type “application/json;charset=UTF-8”.

Vamos a um simples exemplo que obtém uma cidade a partir de um UF selecionado.


var myApp = angular.module("myApp", []);

myApp.controller("carregaCidade", ['$scope','$http', function ($scope, $http) {

	$scope.uf = "";
	$scope.cidades = [];
	$scope.buscarCidades = function () {

		var params = "?UF=" + $scope.uf;
		var $http.req = get("BuscarCidades.aspx" + params , dados);

		req.success(function (retornoServidor, status) {
			$scope.cidades = retornoServidor;
		});

		req.error(function (retornoServidor, status) {

	   });
	};
}]);
<body ng-app="myApp">
    <div ng-controller="carregaCidade">

		<select id="ddlUf" name="uf" ng-model="uf" ng-change="buscarCidades()">
			<option selected="selected" value="">Selecione</option>
			<option value="SP">SP</option>
			<option value="AC">AC</option>
			<!--...-->
			<option value="TO">TO</option>
		</select>

		<select id="ddlCidades" name="ddlCidades">
			<option value="">selecione...</option>
			<option ng-repeat="cidade in cidades" value="{{cidade.Id}}">{{cidade.Nome}}</option>
		</select>
	
  </div>
</body>	

Os eventos success e error tratam o resultado da operação.

É possível usar diretamente o serviço $http fazendo toda a configuração manualmente.

var req = $http({
   method: "GET",
   url: "BuscarCidades.apsx" + params
});

req.success(function (data, status, headers, config, statusText) {
	$scope.cidades = data;
   
});

req.error(function (data, status, headers, config, statusText) {
	console.log(status);
});

Os exemplos acima utilizaram o método de envio GET, passando dados diretamente pela URL. Para usar o método POST também é simples, bastando organizar os dados para envio no formato JSON.

var dados = JSON.stringify({ UF: $scope.uf });
 
var req = $http({
	url: "BuscarCidades.aspx",
	data: dados,
	method: "POST",
	headers: "Content-Type: application/json;charset=UTF-8"

});

Ou

var req = $http.post("BuscarCidades.aspx", dados);

É claro, que pensando no conceito de aplicações que usam a arquitetura REST, este tipo de requisições (busca de dados) deve ser sempre GET.

Consumindo WebServices sem adicionar referências no VisualStudio

aspnet-tutorial1Olá pessoal.

Recentemente precisei consumir vários WebServices num mesmo projeto, sendo não queria criar uma referência estática pelo VS com cada um deles.
Pesquisando sobre essa necessidade, me deparei com o código abaixo. É uma classe capaz e invocar WebServices manualmente, montando a mensagem SOAP (inclusive com parâmetros) e enviando ao servidor e recuperando o retorno.

    internal class WebService
    {
        public string Url { get; set; }
        public string MethodName { get; set; }
        public Dictionary<string, string> Params = new Dictionary<string, string>();
        public XDocument ResultXML;
        public string ResultString;

        public WebService()
        {

        }

        public WebService(string url, string methodName)
        {
            Url = url;
            MethodName = methodName;
        }

        /// <summary>
        /// Invokes service
        /// </summary>
        public void Invoke()
        {
            Invoke(false);
        }

        /// <summary>
        /// Invokes service
        /// </summary>
        /// <param name="encode">Added parameters will encode? (default: true)</param>
        public void Invoke(bool encode)
        {
            string soapStr =
                @"<?xml version=""1.0"" encoding=""utf-8""?>
                  <soap:Envelope xmlns:xsi=""http://www.w3.org/2001/XMLSchema-instance""
                     xmlns:xsd=""http://www.w3.org/2001/XMLSchema""
                     xmlns:soap=""http://schemas.xmlsoap.org/soap/envelope/"">
                     <soap:Body>
                         <{0} xmlns=""http://tempuri.org/"">
                          {1}
                        </{0}>
                     </soap:Body>
                  </soap:Envelope>";

            HttpWebRequest req = (HttpWebRequest)WebRequest.Create(Url);
            req.Headers.Add("SOAPAction", "\"http://tempuri.org/" + MethodName + "\"");
            req.ContentType = "text/xml;charset=\"utf-8\"";
            req.Accept = "text/xml";
            req.Method = "POST";

            using (Stream stm = req.GetRequestStream())
            {
                string postValues = "";
                foreach (var param in Params)
                {
                    if (encode)
                        postValues += string.Format("<{0}>{1}</{0}>", HttpUtility.UrlEncode(param.Key), HttpUtility.UrlEncode(param.Value));
                    else
                        postValues += string.Format("<{0}>{1}</{0}>", param.Key, param.Value);
                }

                soapStr = string.Format(soapStr, MethodName, postValues);
                using (StreamWriter stmw = new StreamWriter(stm))
                {
                    stmw.Write(soapStr);
                }
            }

            using (StreamReader responseReader = new StreamReader(req.GetResponse().GetResponseStream()))
            {
                string result = responseReader.ReadToEnd();
                ResultXML = XDocument.Parse(result);
                ResultString = result;
            }
        }

    }

Na hora de usar fica assim:

WebService ws = new WebService("service_url", "method_name");
ws.Params.Add("param1", "value_1");
ws.Params.Add("param2", "value_2");
ws.Invoke();
Response.Write(ws.ResultString);

Após invocar o WS basta acessar as propriedades ResultString ou ResultXML para recuperar o retorno no formato desejado.

Achei bem bacana a solução, ainda mais por dispensar a criação de referências diretamente no VisualStudio.

Fonte: http://stackoverflow.com/questions/9482773/web-service-without-adding-a-reference

Chamadas XMLHttpRequest (AJAX) enviando JSON para páginas aspx ou GenericHandler – Deserialização manual

json160 csharplogoOlá pessoal,

Realmente é muito simples realizar uma chamada XMLHttpRequest (AJAX) para um WebMethod ASP.NET. E mais fácil ainda é enviar dados no formato JSON para o WebMethod, pois por padrão o WebMethod deserealizada a string JSON conforme seus parâmetros.

Mas quando não temos um WebMethod para receber os dados no formato JSON e fazer todo o trabalho de sujo de deserialização? Por exemplo, ao fazer chamadas XMLHttpRequest para uma página ou um Generic Handler passando dados no formato JSON. Nesta situação é necessário realizar a deserialização dos dados manualmente, vamos a um exemplo.

Chamada XMLHttpRequest no lado cliente:

var request = $.ajax({
type: &quot;POST&quot;,
dataType: &quot;json&quot;,
url: &quot;/meusite/processa.ashx&quot;,
cache: false,
data: JSON.stringify({ p1: &quot;oi&quot;, p2: 1000, vet: [{ vp1: {vp2: &quot;xxxx&quot;}},2] })

});

request.done(function (r) {
console.log(r);
});

request.fail(function () {
alert(&quot;Não foi possível processar sua requisição.&quot;);
});

O código acima utiliza a biblioteca jQuery para encapsular o uso da biblioteca javascript XMLHttpResquest e enviar dados ao servidor. Em sua configuração, a propriedade “URL” indica um GenericHandler no servidor (processa.ashx), mas que também pode ser substituído por uma página aspx. E a propriedade “data” foi configurada com um objeto literal com propriedades simples e complexas, que antes de ser enviado ao servidor será transformando numa string JSON pelo método JSON.stringify.

No lado servidor (no GenericHandler ou no método page_load da página), a recepção dos dados fica assim:

JavaScriptSerializer jss = new JavaScriptSerializer();
string json = new StreamReader(context.Request.InputStream).ReadToEnd();

Dictionary&lt;string, object&gt; values = jss.Deserialize&lt;Dictionary&lt;string, object&gt;&gt;(json);

string p1 = values[&quot;p1&quot;].ToString();
int p2 = Convert.ToInt32(values[&quot;p2&quot;]);

var vet = (ArrayList)values[&quot;vet&quot;];
var vp1 = ((Dictionary&lt;string, object&gt;)vet[0])[&quot;vp1&quot;];
var vp2 = ((Dictionary&lt;string, object&gt;)vp1)[&quot;vp2&quot;];

No código de servidor acima, a propriedade InputStream do objeto Request representa o conteúdo do corpo de entrada de conteúdo HTTP vindo do cliente, portanto, representa a string JSON enviada pelo cliente.

O inputString é recuperado e deserializado em um objeto Dictionary (espécie de lista indexada por chaves). Cada propriedade da string JSON torna-se uma chave do dicionário, sendo facilmente acessada:

int p1 = values[&quot;p1&quot;].ToString();
int p2 = Convert.ToInt32(values[&quot;p2&quot;]);

E também podemos acessar estruturas JSON mais complexas, como é o caso da propriedade “vet”, que mantém um vetor, cujo seu índice 0 (zero) contém outro objeto JSON.

vet: [{ vp1: {vp2: &quot;xxxx&quot;}},2]

Após recuperação do vetor, foi necessário converte o objeto de índíce 0 (zero) em outro Dictionary, desta forma, as propriedades do objeto contido no índice 0 (zero) da propriedade “vet” são acessadas por chaves do Dictionary.

var vp1 = ((Dictionary&lt;string, object&gt;)vet[0])[&quot;vp1&quot;];
var vp2 = ((Dictionary&lt;string, object&gt;)vp1)[&quot;vp2&quot;];

E fim.

Gerando estruturas JSON em C# e ASP.NET

json160Dando continuidade ao post Introdução ao JSON – Javascript Object Notation, mostro agora como construir em C# as estruturas dos exemplos utilizados no post anterior.

No C# podemos criar objetos de tipo anônimos (anonymous types) para definir a estrutura e dados, e depois realizar a serialização para o formato JSON.

Vamos aos exemplos:

1 – Criando um objeto.

public static string retornaObjetoJSON()
{
    //{“nome” : “Bill”, “idade” : 32, “salario”: 121232.67}

    var obj = new { nome = "Bill", idade = 32, salario = 121232.67};

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(obj);
    return strJson;
}

2 – Criando um array.

public static string retornaArrayJSON()
{
    //["Huguinho","Zezinho","Luizinho", 3]

    var objVet = new object[] { "Huguinho", "Zezinho", "Luizinho", 3 };

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(objVet);
    return strJson;
}

3 – Criando um array de objetos.

public static string retornaVetorDeObjetoJSON()
{
    /*
        [{ "nome" : "Huguinho", "idade" : 10 },
        { "nome" : "Zezinho", "idade" : 12 },
        { "nome" : "Luizinho", "idade" : 10 }]
    */

    var objVet = new object[] { new { nome = "Huguinho", idade = 10 },
                                new { nome = "Zezinho", idade = 12 },
                                new { nome = "Luizinho", idade = 10 }};

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(objVet);
    return strJson;
}

4 – Criando um objeto contendo um propriedade array de objetos.

public static string retornaObjetoComVetorJSON()
{
    /*
        {"tio" : "Pato Donald",
        "idade" : 40,
        "sobrinhos" :
                [{ "nome" : "Huguinho",     "idade" : 10 },
                { "nome" : "Zezinho", "idade" : 12 },
                { "nome" : "Luizinho", "idade" : 10 }]
        }
    */

    var obj = new {tio = "Pato Donald",
                    idade = 40,
                    sobrinhos = new object[] { new { nome = "Huguinho", idade = 10 },
                                                new { nome = "Zezinho", idade = 12 },
                                                new { nome = "Luizinho", idade = 10 }}
                    };

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(obj);
    return strJson;
}

A biblioteca System.Web.Script.Serialization é a responsável por realizar a serialização dos objetos anônimos.

Logo mais num outro post mostro como realizar chamadas assíncronas por Javascript ao JSON gerado no C# no servidor.

Até…

Introdução ao JSON – Javascript Object Notation

json160JSON é um formato para troca de dados baseado em estruturas de texto, o que lhe dá a característica de ser completamente independente de linguagem. É a mesma ideia do XML, só que mais simples e leve.

No site oficial (http://www.json.org/) o autor ainda afirma:

Para seres humanos, é fácil de ler e escrever.
Para máquinas, é fácil de interpretar e gerar.

A forma simples de representar dados no formato JSON tem difundido seu uso, e vem se tornando uma alternativa ao XML para implementações AJAX.

Em JSON podemos estruturar dados em (1) coleções de pares de nome e valor e também em (2) lista/array ordenadas de valores.

Os valores dos dados são representando em três formas: object, value e array, e ainda podem ser combinadas.

Object: é um conjunto de pares de nome/valores. A sintaxe de um object é


{ "nome da propriedade" : "valor da propriedade" }

O object começa com { e termina com }. E cada par de nome/valores é separado por ,(vírgula), sendo que os valores podem assumir diferente tipos de dados. Exemplo:


{“nome” : “Bill”, “idade” : 32, “salario”: 121232.67}

Array: é uma coleção de valores ordenados. A sintaxe de um array JSON é:


[ "valor1",  "valor2", "valor3" ]

O array começa com [ e termina com ], e cada parte  é separa por , (vírgula) e podem divergir o tipo de dados. Exemplo:


["Huguinho","Zezinho","Luizinho", 3]

Tanto a estrutura object como o array do JSON podem ser combinadas, formando diversas estruturas de dados.

Exemplo – Um array de objects:


[{ "nome" : "Huguinho", "idade" : 10 },
 { "nome" : "Zezinho", "idade" : 12 },
 { "nome" : "Luizinho", "idade" : 10 }]

Exemplo – Object contendo uma propriedade array:


{"tio" : "Pato Donald",
 "idade" : 40,
 "sobrinhos" :
        [{ "nome" : "Huguinho",     "idade" : 10 },
          { "nome" : "Zezinho", "idade" : 12 },
          { "nome" : "Luizinho", "idade" : 10 }]
}

JSON nasceu com um subconjunto da linguagem Javascript para representar objetos e atualmente qualquer linguagem de programação moderna tem suporte (via pacotes de terceiros) a esse formato de troca de informação.

Os sites jsonviewer.stack.hu e  jsonformatter.curiousconcept.com/ são bons lugares para validar a estrutura JSON

Num futuro post demonstrarei o uso do JSON com ASP.NET em chamada assíncronas.

UpdatePanel e JQuery

Para quem usa ASP.NET é comum o uso do UpdatePanel para realizar atualizações parciais. Atualmente também é comum o uso JQuery.

O problema é quando os dois recursos devem conviver juntos. O problema que ocorre é que após a atualização parcial da página pelo UpdatePanel a implementação JQuery deixa de funcionar, provavelmente devido a estrutura da página ter mudado após a atualização.

Uma forma que encontrei, é executar as funções Javascript que usam JQuery novamente após a renderização pelo UpdatePanel.

No ASP.NET Ajax é possível gerenciar a renderização parcial da página através da classe PageRequestManager. A classe define eventos que podem ser usados na personalização da renderização parcial. O seu metódo getInstance() recupera sua instância atual/ativa e seu método add_endRequest permite adicionar uma chamada a uma função Javascript exatamente após o fim da renderização parcial, é neste momento que devemos chamar a função Javascript que mantem código JQuery.

Exemplo:

$(document).ready(function () {

	//Inicializando na após a carga da página
	inicializa();

	//função com o código JQuery
	function inicializa()
	{
		$(&quot;buttonX&quot;).click(function () {
			fazAlgumaCoisa();
		});
	}

	function fazAlgumaCoisa()
	{
		alert('Feito');
	}

	//Recuperando a instância ativa da classe PageRequestManager.
       var prm = Sys.WebForms.PageRequestManager.getInstance();
       if (prm != null) {
   	   //Registrando uma chamada a função inicializa() após o fim da renderização parcial da página.
           prm.add_endRequest(function () {
               inicializa();
           });
       }
})

Mais informações sobre a classe PageRequestManager em http://msdn.microsoft.com/pt-br/library/bb311028(v=VS.90).aspx

Até mais.

Retornar dados no formato JSON usando ASP.NET

Olá pessoal.

Com o advento das chamadas assíncronas diretamente do cliente ao servidor via Javascript, muitas vezes é necessário retornar ao cliente dados estruturados,  que pode ser uma estrutura XML, uma simples string separada por um caractere especial, ou ainda no formato JSON.

Uma boa opção devido sua padronização e facilidade de manipulação é o formato JSON.

Serializar um objeto que é uma instância de uma classe para o formato JSON no C# é bem simples. O problema é quando queremos serializar dados que não representam um objeto de instancia de classe. Neste caso, a técnica mais comum é concatenar strings formando a estrutura desejada (já fiz muito isso), além de complicar uma futura manutenção, não é elegante.

No C# podemos criar objetos de tipo anônimos (anonymous types), definir sua estrutura e dados, e depois serializar para o formato  JSON enviando tudo  ao cliente.

Exemplo de criação de um vetor de tipo de anônimo e com dados:

var vetorAnonimo = new object[] { new { nome = "nome 1", id = 1 },
                                  new { nome = "nome 2", id = 2 }};

Com o objeto anônimo definido e carregado é possível fazer sua serialização para enviar ao cliente:

using System.Web.Script.Serialization;

JavaScriptSerializer js = new JavaScriptSerializer();
string strJson = js.Serialize(vetorAnonimo);

Pronto. É só devolver a variável strJson para a função de callback no Javascript/JQuery e manipular o retorno.

Veja como chega no cliente o vetor serializado, uma string estruturada no formato JSON. Lindo!!!

[{"nome":"nome 1","id":1},{"nome":"nome 2","id":2}]

Este post teve ajuda do @victorvhpg ninja do JQuery.

Criando uma janela Popup estilo Facebook com JQuery e ASP.NET.

O legal de usar o Facebook é copiar as ideias de suas implementações e aplicá-las em nossos projetos. 😛

Vou mostrar como fiz para criar uma janela Popup parecida com as que são usadas no Facebook. Acho que ficou legal :-).

Primeiramente, no projeto ASP.NET devemos criar um arquivo do tipo Generic Handler. O Generic Handler é como se fosse uma página ASP.NET mais leve, pois não tem interface HTML e eventos no servidor, etc. Possui apenas um método, o ProcessRequest(HttpContext context) que é responsável por processar as requisições que chegam.

No método ProcessRequest deve ser codificado o HTML que será enviado à página que fez a requisição ao Generic Handler.

public class HandlerJanelaExemplo : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string containerId = &quot;#&quot; + context.Request.QueryString[&quot;containerId&quot;];

        string html = @&quot;
            &lt;div class=&quot;&quot;divPopup&quot;&quot;
                    style=&quot;&quot;left: 323.5px; top: 145.5px; width: 600px; position: fixed; z-index: 10001;&quot;&quot;&gt;
                    &lt;div style=&quot;&quot;margin: 10px&quot;&quot;&gt;
						AQUI VOCÊ COLOCA O TÍTULO DA JANELA
                        &lt;div style=&quot;&quot;overflow: auto; height: 150px&quot;&quot;&gt;
                            AQUI VOCÊ COLOCA CONTEÚDO DA JANELA
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;div style=&quot;&quot;width: 590px; background-color: #CCCCCC; text-align: right; padding: 5px;&quot;&quot;&gt;
                    &lt;input type=&quot;&quot;button&quot;&quot; value=&quot;&quot;Fechar&quot;&quot; onclick=&quot;&quot;@acaoFechar&quot;&quot; class=&quot;&quot;botaoFerramenta&quot;&quot;/&gt;
                &lt;/div&gt;
            &lt;/div&gt;&quot;;

        //DEFININDO A AÇÃO DO BOTÃO FECHAR (SIMPLEMENTE LIMPA O HTML DO SPAN DA PÁGINA QUE REQUISITOU A JANELA).
        string acaoFechar = &quot;$('&quot; + containerId + @&quot;').html('')&quot;;
        html = html.Replace(&quot;@acaoFechar&quot;, acaoFechar);

        context.Response.ContentType = &quot;text/plain&quot;;
        context.Response.Write(html);
        context.Response.Flush();
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Na página HTML que vai chamar a janela Popup deve existir um link e um elemento span. O link irá chamar uma função Javascript que utilizará JQuery para fazer uma requisição ao Generic Handler criado anteriormente. E o Generic Handler retornará o HTML contendo a janela Popup para função Javascript, que por sua vez atualizará o elemento span.

Código HTML da página.

&lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
&lt;div&gt;
    &lt;h1&gt;Minha Página&lt;/h1&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;asp:HyperLink ID=&quot;hlkJanela&quot; runat=&quot;server&quot; NavigateUrl=&quot;javascript:;&quot;&gt;Chamar janela...&lt;/asp:HyperLink&gt;
    &lt;span id=&quot;spanPopup&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/form&gt;

Na página é necessário associar a função Javacript ao link pelo C#.

protected void Page_Load(object sender, EventArgs e)
{
    hlkJanela.Attributes.Add(&quot;onclick&quot;, &quot;chamarJanela()&quot;);
}

A função Javascript usa JQuery para fazer a requisição ao Generic Handler. A informação URL recebe o endereço do Generic Handler e como parâmetro o ID do elemento span. O ID do elemento span será usado dentro do Handler para implementação do botão fechar da Popup.

function chamarJanela() {
    $.ajax({
        type: &quot;GET&quot;,
        url: &quot;HandlerJanelaExemplo.ashx?containerId=spanPopup&quot;,
        dataType: &quot;text&quot;,
        success: function (retorno) {
            $(&quot;#spanPopup&quot;).html(retorno);

        },
        error: function (retorno) {
            alert('Erro');
        }
    });
}

Veja o resultado.

E é isso pessoal. É um exemplo bem simples que pode ser evoluido para uma solução robusta.
Baixe o exemplo para ver os detalhes da implementação.

Até mais…