Chamar método ASP.NET (Web Method) usando JavaScript

<< Click to Display Table of Contents >>

Navigation:  Miscelânea >

Chamar método ASP.NET (Web Method) usando JavaScript

Previous pageReturn to chapter overviewNext page

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

 

webmethods

 

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.