|
<< Click to Display Table of Contents >> Chamar método ASP.NET (Web Method) usando JavaScript |
  
|
|
<< Click to Display Table of Contents >> Chamar método ASP.NET (Web Method) usando JavaScript |
|
Introdução
Outro título deste artigo seria "Diga tchau para Postback".
Por exemplo, quando clicamos num botão ASP.NET na página web, por padrão efetua um post-back.
Então, como vamos parar isso mantendo code-behind adequada chamadas de método?
Vejamos um caso
Eu vou criar um formulário simples com duas caixas de texto e um botão Asp.net, vamos entrar em nosso nome e cidade nas caixas de texto e clicar com o botão irá chamar o code-behind métodos.
Para isso, precisamos ter a vantagem de PageMethod e configurar PageMethod precisamos instância de ScriptManager na página web.
PageMethod é uma abordagem mais fácil e mais rápido para ASP.NET AJAX.
Podemos facilmente melhorar a experiência do usuário e o desempenho de aplicações web, desencadeando o poder do AJAX.
Uma das melhores coisas que eu gosto em AJAX é PageMethod.
PageMethod é uma maneira através da qual podemos expor o método de página do lado do servidor em JavaScript.
Isto traz muitas oportunidades, podemos realizar muitas operações sem o uso de post backs lentos e irritantes.
Agora, no código abaixo, você pode ver um exemplo de ScriptManager e duas caixas de texto e um botão no final.
No controle de botão, você pode ver um atributo 'OnClientClick' para disparar o método JavaScript chamado 'ProcessarJS()' e este método JavaScript vai chamar o método de página code-behind C #.
Nota: Lembre-se de adicionar um novo EnablePageMethods atributo para true no ScriptManager.
aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function ProcessarJS() {
var nome = document.getElementById('<%=txtNome.ClientID %>').value;
var cidade = document.getElementById('<%=txtCidade.ClientID %>').value;
PageMethods.ProcessarCSharp(nome, cidade, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Algo errado.');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Diga tchau para PostBacks</p>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:TextBox ID="txtNome" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="txtCidade" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnConfirmar" runat="server" Text="Confirmar" OnClientClick="ProcessarJS(); return false;" />
</div>
</form>
</body>
</html>
cs
using System;
using System.Web.Services;
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string ProcessarCSharp(string nome, string cidade)
{
return string.Format("Bem vindo Sr.{0}. Sua cidade é {1}", nome, cidade);
}
}
}
Conclusão
No código acima, há uma 'ProcessarJS()' Método JavaScript com duas variaveis nome e cidade. Essas variáveis vão transportar os valores de caixas de texto.
Em seguida, um nome PageMethod 'ProcessarCSharp' está sendo chamado e passando dois nomes diferentes parâmetros.
Em seguida, a definição dos referidos resultados de sucesso.
No código acima, para que o método seja acessível através de JavaScript é necessário duas coisas.
Primeiro, esse método deve ser "public static".
Em segundo lugar deve haver uma marcação [WebMethod] acima método como escrito em código de cima.