Demonstra Passo a passo: Criando e usando serviço Web habilitado para AJAX

Artigo
10/15/2014

Visual Studio 2008 e Microsoft Visual Web Developer Express Edition permitem que você crie serviços Web ASP.NET personalizados (arquivos .asmx) que você possa acessar de um script de cliente.Nesse passo a passo, você poderá criar um serviço Web com AJAX habilitado e chamar seus métodos utilizando um script de cliente.

Quando você cria serviços Web ASP.NET e os expõe ao script de cliente, ASP.NET automaticamente cria classes proxy JavaScript para os serviços Web.Você pode chamar um método de serviço Web chamando o método correspondente da classe de proxy JavaScript.

Essa explicação passo a passo mostra:

Como criar um serviço Web com AJAX habilitado em Visual Studio 2008 ou Microsoft Visual Web Developer Express Edition.

Pré-requisitos

Para concluir esta explicação passo a passo, você precisa:

Visual Studio 2008 ou Microsoft Visual Web Developer Express Edition.
Microsoft Internet Information Services (IIS) instalado localmente em seu computador.

Criando um serviço Web com AJAX habilitado

Essa seção exibe como criar um serviço Web com AJAX habilitado.

Observação:
Você deve usar um site do IIS para esta explicação passo a passo.

Criando um serviço Web com AJAX habilitado

Abra Visual Studio 2008, ou Microsoft Visual Web Developer Express Edition.
Sobre o Arquivo menu, clicar Novo site.

The Novo site caixa de diálogo é exibida.
Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.
Clique em Browse.
Clique em Local IIS.
Clique em Default Web Site.
No canto superior direito, clique no ícone Criar Nova Aplicação Web.

Visual Studio cria uma nova aplicação Web IIS.
Especifique o nome HelloWorldService.

Observação:

O nome do Web site que você está criando não é importante.
Clique em Open.

A caixa de diálogo Novo Web Site aparece com o nome do novo site no canto mais à direita da lista Localização.A localidade inclui o protocolo (http://) e a localidade (localhost).Isso Indica que você está trabalhando com um site local do IIS.
Na lista Language, selecione a linguagem de programação que você preferir trabalhar.
Clique em OK.

Observação:
O nome do Web site que você está criando não é importante.

Gravando o Serviço de Personalização Web

Essa seção descreve como gravar um serviço Web com AJAX habilitado que provê um método que retorna a string "Hello World" e o tempo do servidor atual.

Gravando o Serviço de Personalização Web

No Solution Explorer, clique com o botão direito no nome do site (https://localhost/HelloWorldService), e clique em Adicionar Novo Item.
Em Modelos Visual Studio instalados, clique em Serviço Web, e na caixa Nome, digite HelloWorld.asmx.
Certifique-se de que a caixa de seleção Place code in separate file está selecionada e clique em Add.

Visual Studio 2008 cria um novo serviço Web que consiste de dois arquivos.O arquivo HelloWorld.asmx é o arquivo que pode ser invocado para chamar os métodos do serviço Web.Aponta para o código do serviço Web.O código em si é um arquivo classe (HelloWorld.vb ou HelloWorld.cs, dependendo da linguagem de programação) na pasta App_Code.O arquivo de código contém um modelo para um serviço da Web.

Excluir o código existente na classe e substitui-lo com o código a seguir:

Imports System
Imports System.Web
Imports System.Collections
Imports System.Web.Services
Imports System.Web.Services.Protocols

Namespace Samples.Aspnet
    <WebService([Namespace]:="http://mycompany.org/"), _
    WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1), _
    System.Web.Script.Services.ScriptService()> _
    Public Class HelloWorld
        Inherits System.Web.Services.WebService

        Public Sub New()

        End Sub 'New


        'Uncomment the following line if using designed components 
        'InitializeComponent(); 

        <WebMethod()> _
        Public Function Greetings() As String
            Dim serverTime As String = _
                String.Format("Current date and time: {0}.", DateTime.Now)
            Dim greet As String = "Hello World. <br/>" + serverTime
            Return greet

        End Function 'Greetings
    End Class 'HelloWorld

End Namespace

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

namespace Samples.Aspnet
{
    [WebService(Namespace="http://mycompany.org")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // The following attribute allows the service to 
    // be called from script using ASP.NET AJAX.
    [System.Web.Script.Services.ScriptService]
    public class HelloWorld : System.Web.Services.WebService
    {

        public HelloWorld()
        {

            //Uncomment the following line if using designed components 
            //InitializeComponent(); 
        }

        [WebMethod]
        public string Greetings()
        {
            string serverTime =
                String.Format("Current date and time: {0}.", DateTime.Now);
            string greetings = "Hello World! <br/>" + serverTime;
            return greetings;
        }

    }
}

Observe que os nomes das funções são precedidos com os atributos WebMethodAttribute como parte de uma declaração da função.Além disso, a HelloWorld classe é qualificado com o ScriptServiceAttribute atributo.

Esses atributos habilitam o serviço Web para ser chamado do script em páginas Web ASP.NET com AJAX habilitado.

Salve o arquivo e feche-o.

Abra o arquivo HelloWorld.asmx e adicione a seguinte diretiva:

<%@ WebService Language="VB" CodeBehind="~/App_Code/HelloWorld.vb" Class="Samples.Aspnet.HelloWorld" %>

<%@ WebService Language="C#" CodeBehind="~/App_Code/HelloWorld.cs" Class="Samples.Aspnet.HelloWorld" %>

Salve o arquivo e feche-o.

Agora você pode testar o serviço da Web no seu navegador.Esse teste não utiliza script para chamar os métodos do serviço Web.Isso é apenas para verificar que o serviço Web está funcionando corretamente.

Para testar o serviço da Web

Abra o navegador e digite a seguinte URL: https://localhost/HelloWorldService/HelloWorld.asmx

O serviço da Web é chamado e aparece uma página no navegador que mostra os métodos que são expostos pelo serviço da Web.
Clique Saudações.A página aparece com o botão Invocar.
Clique no botão Invocar para chamar o método e ver o valor retornado no formato XML.
Feche o navegador.

Você terminou de criar um serviço Web com AJAX habilitado.

Usando o serviço da Web

O próximo passo é chamar o serviço Web de um script de cliente.

Para chamar serviço Web a partir de script de cliente

No Solution Explorer, clique com o botão direito no nome do site (https://localhost/HelloWorldService), e clique em Adicionar Novo Item.
Em Modelos Visual Studio instalados, clique em Arquivo JScript, e na caixa Nome, digite HelloWorld.js.
Clique em OK.

Adicione o seguinte código ao arquivo script:

var helloWorldProxy;

// Initializes global and proxy default variables.
function pageLoad()
{
    // Instantiate the service proxy.
    helloWorldProxy = new Samples.Aspnet.HelloWorld();

    // Set the default call back functions.
    helloWorldProxy.set_defaultSucceededCallback(SucceededCallback);
    helloWorldProxy.set_defaultFailedCallback(FailedCallback);
}


// Processes the button click and calls
// the service Greetings method.  
function OnClickGreetings()
{
    var greetings = helloWorldProxy.Greetings();
}

// Callback function that
// processes the service return value.
function SucceededCallback(result)
{
    var RsltElem = document.getElementById("Results");
    RsltElem.innerHTML = result;
}

// Callback function invoked when a call to 
// the  service methods fails.
function FailedCallback(error, userContext, methodName) 
{
    if(error !== null) 
    {
        var RsltElem = document.getElementById("Results");

        RsltElem.innerHTML = "An error occurred: " + 
            error.get_message();
    }
}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

Esse script de cliente usará a página Default.aspx para chamar os métodos do serviço HelloWorld.

Em Visual Studio 2008, abra a página Default.aspx.

Exclua a marcação existente na página e substitua com o seguinte código:

<%@ Page Language="VB" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" >
        <style type="text/css">
            body {  font: 11pt Trebuchet MS;
                    color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Using AJAX Enabled ASP.NET Service</title>

    </head>

    <body>
        <form id="Form1" >
            <asp:ScriptManager  ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="~/HelloWorld.asmx" />
                </Services>
                <Scripts>
                    <asp:ScriptReference Path="~/HelloWorld.js" />
                </Scripts>
            </asp:ScriptManager>
            <div>
                <h3>Using AJAX Enabled ASP.NET Service</h3>

                <table>
                    <tr align="left">
                        <td>Click to call the Hello World service:</td>
                        <td>
                            <button id="Button1" 
                                onclick="OnClickGreetings(); return false;">Greetings</button>
                        </td>
                    </tr>
                </table>
            </div>
        </form>

        <hr/>

        <div>
            <span id="Results"></span>
        </div>   

    </body>

</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" >
        <style type="text/css">
            body {  font: 11pt Trebuchet MS;
                    color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Using AJAX Enabled ASP.NET Service</title>

    </head>

    <body>
        <form id="Form1" >
            <asp:ScriptManager  ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="~/HelloWorld.asmx" />
                </Services>
                <Scripts>
                    <asp:ScriptReference Path="~/HelloWorld.js" />
                </Scripts>
            </asp:ScriptManager>
            <div>
                <h3>Using AJAX Enabled ASP.NET Service</h3>

                <table>
                    <tr align="left">
                        <td>Click to call the Hello World service:</td>
                        <td>
                            <button id="Button1" 
                                onclick="OnClickGreetings(); return false;">Greetings</button>
                        </td>
                    </tr>
                </table>
            </div>
        </form>

        <hr/>

        <div>
            <span id="Results"></span>
        </div>   

    </body>

</html>

A página contém um controle ScriptManager.O atributo path no elemento ServiceReference da seção Services referencia o serviço HelloWorld que você construiu anteriormente.O atributo path no elemento ServiceReference da seção Script referencia o script HelloWorld.js.

Abra o navegador e digite a seguinte URL:

http://<localhost>/HelloWorldService/Default.aspx
Na página exibida, clique no botão Saudações.

Isso gera uma chamada ao serviço Web que retorna uma mensagem de saudação e a data e hora do servidor atual.

Próximas etapas

Esse passo a passo ilustra os princípios básicos da criação de um serviço Web e a chamada da página Web de um script de cliente.Você pode desejar testar com adicionais, e mais complexos recursos de serviços Web.Sugestões para exploração adicional incluem o seguinte:

Entenda como os clientes acessam os serviços Web.Para obter mais informações, consulte Acessando Web Services em código gerenciado.
Entenda os fundamentos dos serviços Web.Para obter mais informações, consulte Programação Web com serviços da Web.
Entenda como acessar os serviços Web de um navegador.Para obter mais informações, consulte Como: Serviços da Web Acessar XML de um navegador.

Consulte também

Conceitos

Expondo Serviços Web a Script Cliente

Chamando Serviços da Web de Scripts Clientes

Usando Serviço Web AJAX ASP.NET

Demonstra Passo a passo: Criando e usando serviço Web habilitado para AJAX

Pré-requisitos

Criando um serviço Web com AJAX habilitado

Criando um serviço Web com AJAX habilitado

Gravando o Serviço de Personalização Web

Gravando o Serviço de Personalização Web

Para testar o serviço da Web

Usando o serviço da Web

Para chamar serviço Web a partir de script de cliente

Próximas etapas

Consulte também

Conceitos

Recursos adicionais