Ir para conteúdo
Fórum Script Brasil
  • 0

Integração entre o JQuery e o C#


quintelab

Pergunta

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:

Hello.gif

Espero que seja útil, abraços...

http://www.quintelab.com.br/Artigos/Json.asp

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

Comecei a programar .net e as vezes quando estou programando em c# preciso chamar uma função jquery dentro desse método c#.

Por exemplo:

public void chamarFuncaoJQuery(){
//código c#
//aqui queria chamar uma função jquery
}

Não consegui fazer com esse seu exemplo. Como devo proceder?

Edit: consegui fazer: https://www.scriptbrasil.com.br/forum/topic/180630-chamar-jquery-dentro-de-um-método-c/

Editado por diwillian
a melhora do comentário
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...