Olá pessoal, continuando nossa série de artigos sobre Ajax utilizando jQuery , hoje vamos termina nossa estrutura JS e começar a testar e analisar as vantagens.
Vamos começar completando nosso código JavaScript, o seu código devera ficar assim.
<script type="text/javascript">
$(document).ready(function () {
var Control = {
_search: function (pNome) {
var Paramters = "{pNome:'" + pNome + "'}";
$.ajax({
type: "POST",
url: "Default.aspx/GetNomes",
contentType: "application/json",
data: Paramters,
success: function (data) {
$('#ddlTeste').find("option").remove();
$.each(data.d, function (index, value) {
$('#ddlTeste').append("" + value + "");
});
}
});
}
}
$('#aSearch').click(function () {
Control._search($('#txtSearch').val());
});
});
script>
Após completar o código inserimos dentro da função sucess o evento each para popular nosso dropdown, abaixo do objeto control, coloquei um evento click no botão de busca chamando o evento Search passando como parâmetro o valor do campo input.
Executando o projeto vamos ter como resultado a imagem 01, fazendo POST para servidor com 17bytes contando input de dados e resposta do servidor, na próxima imagem teremos o mesmo evento utilizando Ajax Microsoft com 846bytes para ter o mesmo resultado, com isso podemos perceber que existe uma grande diferença de performance quando utilizamos Jquery na maioria dos casos.
Imagem 01
Image 02 – Ajax Microsoft Agora vamos retorna um objeto, primeiro precisamos criar uma classe como mostra abaixo. public class Pessoa { public string _sobreNome { get; set; } public int _idade { get; set; } public Pessoa(string sobreNome,int idade) { this._sobreNome = sobreNome; this._idade = idade; } } Depois de criar a classe adicione esse novo método na sua página Default. [System.Web.Services.WebMethod] public static Pessoa LoadDados() { return new Pessoa("Jose", 20); } Após criar a classe e incluir o método precisamos colocar um novo botão e uma tag “p” aonde vamos adicionar o conteúdo após clicar no link. <a id="aLoad" href="javascript:void(0);">Load Conteúdoa> <p>p> Depois coloque no objeto control uma nova função e adicione um evento click para nosso novo link. _loadDetalhe: function () { $.ajax({ type: "POST", url: "Default.aspx/LoadDados", contentType: "application/json", data: "{}", success: function (data) { $('p').html("Sobrenome:" + data.d._sobreNome + " idade:" + data.d._idade + ""); } }); } Embaixo do outro evento click coloque esse novo evento responsável por chamar o método de _LoadDetalhe do objeto control. $('#aLoad').click(function () { Control._loadDetalhe(); });
Espero que vocês tenham gostado e não deixem de comentar qualquer duvida entre em contato. Att. Emerson Jose http://programmingcsharp.wordpress.com Código Fonte:
