quintelab 91 Denunciar post Postado Julho 10, 2010 Muito se fala do JQuery e eu particularmente estou usando muito, não só para aproveitar os recursos visuais dele, mas para executar servicos que do lado do cliente são feitos de maneira muito mais rápida. Mas para quem ta começando a se aventurar nesse mundo fica uma dúvida que é como fazer a comunicação entre o lado do cliente e o lado do servidor. Para isto iremos utilizar json. Neste artigo precisamos apenas do script do JQuery: http://docs.jquery.com/Downloading_jQuery. Neste exemplo eu usei a versão que é adicionada automaticamente quando criamos um projeto Web Application no Visual Studio 2010 o jquery-1.4.1.min.js. Após a tag Title do seu formulário adicione as referências aos scripts. <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> Vamos criar um método em C# para ser chamado através do JQuery. Algumas regras devem ser seguidas, o método deve ser estático e ter o atributo WebMethod, você precisará adicionar a namespace System.Web.Services, o tipo do retorno deve ser do tipo object também. Criei um método simples para retornar um Hello World! [WebMethod] public static object GetHelloWorld(string nome) { return new { retorno = string.Format("Hello World {0}!", nome) }; } Repare o nome do "objeto" que é retornado, chamei de retorno, você pode utilizar qualquer nome! A parte do lado do servidor esta OK, agora iremos criar o script em jquery. Coloque o script do jquery logo a baixo da chama do jquery, dentro da tag head. <script type="text/javascript"> $(document).ready(function() { $.ajax({ type: "POST", url: "WebForm1.aspx/GetHelloWorld", data: "{nome:'quintelab'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { alert(msg.d.retorno); } }); }); </script> Acima temos nosso script em jquery usando o ajax para consumir o método do lado do servidor. Vamos a partes importantes: Na minha primeira linha: $(document).ready(function() { é para executar tudo que estiver dentro deste bloco logo quando a o documento for carregado, ou seja a página web. Na segunda linha é aberto o bloco de chamada do ajax, e informamos os parâmetros para localizar e chamar o método. O parâmetro url indica o caminho do formulário onde esta o método e em seguida o nome do método. O parâmetro data contém o parâmetro de entrada do método feito em c# e seu respectivo valor. Caso tudo ocorra sem erros será executado o bloco que esta dentro de success e consequentemente será exibido um alert com o valor retornado pelo método C# do lado do servidor. Eu declarei com nome de msg o objeto que irá ter o retorno, utilizando este objeto, msg.d.retorno teremos o resultado do processo feito no C#. Quando abrir sua página web terá o resultado: Espero que seja útil, abraços... http://www.quintelab.com.br/Artigos/Json.asp Compartilhar este post Link para o post Compartilhar em outros sites
Ivan.Teles 23 Denunciar post Postado Julho 11, 2010 Parabéns Bruno, ótimo artigo. Compartilhar este post Link para o post Compartilhar em outros sites
Altieri Pereira 0 Denunciar post Postado Julho 14, 2010 Ótimo artigo quintelab, vai ajudar muita gente isso heim ... até mais. Compartilhar este post Link para o post Compartilhar em outros sites
