Exemplo de implementação (C#) callback de cliente

Artigo
10/15/2014

Demonstra um página da Web do ASP.NET que implementa um callback de cliente.Para obter mais informações, consulte Implementando Callbacks de Clientes Através de Programação Sem Postbacks nas Páginas ASP.NET.

Exemplo

Descrição

O exemplo de código a seguir possui duas partes.A primeira parte do exemplo mostra uma página da Web do ASP.NET (a página.aspx).A segunda parte exibe o arquivo code-behind correspondente que fica por trás (arquivo .apsx.cs.).

Código

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="ClientCallback.aspx.cs" Inherits="ClientCallback" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
  1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
  <title>Client Callback Example</title>
  <script type="text/ecmascript">
    function LookUpStock()
    {
        var lb = document.getElementById("ListBox1");
        var product = lb.options[lb.selectedIndex].text;
        CallServer(product, "");
    }

    function ReceiveServerData(rValue)
    {   
        document.getElementById("ResultsSpan").innerHTML = rValue;

    }
  </script>
</head>
<body>
  <form id="form1" >
    <div>
      <asp:ListBox ID="ListBox1" Runat="server"></asp:ListBox>
      <br />
      <br />
      <button type="Button" onclick="LookUpStock()">Look Up Stock</button>
      <br />
      <br />
      Items in stock: <span id="ResultsSpan" ></span>
      <br />
    </div>
  </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ClientCallback : System.Web.UI.Page,
     System.Web.UI.ICallbackEventHandler
{
    protected System.Collections.Specialized.ListDictionary catalog;
    protected String returnValue;
    protected void Page_Load(object sender, EventArgs e)
    {
        String cbReference =
            Page.ClientScript.GetCallbackEventReference(this,
            "arg", "ReceiveServerData", "context");
        String callbackScript;
        callbackScript = "function CallServer(arg, context)" +
            "{ " + cbReference + ";}";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
            "CallServer", callbackScript, true);

        catalog = new System.Collections.Specialized.ListDictionary();
        catalog.Add("monitor", 12);
        catalog.Add("laptop", 10);
        catalog.Add("keyboard", 23);
        catalog.Add("mouse", 17);

        ListBox1.DataSource = catalog;
        ListBox1.DataTextField = "key";
        ListBox1.DataBind();

    }

    public void RaiseCallbackEvent(String eventArgument)
    {
        if (catalog[eventArgument] == null)
        {
            returnValue = "-1";
        }
        else
        {
            returnValue = catalog[eventArgument].ToString();
        }
    }
    public String GetCallbackResult()
    {
        return returnValue;
    }
}

Comentários

A página da Web emula uma pesquisa de banco de dados para determinar o número de itens que estão disponíveis, ou em estoque, para uma série de produtos (monitores, teclados, e assim por diante).Para simplificar este exemplo de código, o banco de dados é representado por uma lista dicionário que contém um conjunto pequeno de itens.Para cada item na tabela, a chave é o nome do item (como monitor) e o valor é o número de itens que estão em estoque.Em um aplicativo comercial, um banco de dados deve ser usado em vez disso.

Quando a página é executada, um controle ListBox é vinculado à tabela de hash para que o controle ListBox exiba a lista de produtos.A página também contém um elemento button (não um controle de servidor Web Button), cujo evento onclick está vinculado a uma função do cliente chamada LookUpStock.Quando usuários clicam no botão, o botão executa a função LookUpStock, que obtém a seleção atual na caixa de listagem e, em seguida, executa o retorno de chamada do cliente, ao chamar a função CallServer.

A página code-behind adiciona script do lado do cliente para a página via o método RegisterClientScriptBlock.O script que é adicionado à página inclui uma função chamada CallServer, que obtém o nome do método que irá postar de volta para o servidor a partir do método GetCallbackEventReference.

O retorno de chamada do cliente chama o método RaiseCallbackEvent, para determinar o estoque disponível para o produto passado para ele.O método GetCallbackResult retorna o valor.Observe que os argumentos enviados entre o script de cliente e o código do servidor só pode ser sequências.Para passar ou receber vários valores, você pode concatenar valores na sequência de caracteres de entrada ou de retorno, respectivamente.

Observação de segurança:
Quando você usa esse recurso, não existem possíveis riscos de segurança.Argumentos de retorno de chamada não são validados e portanto devem ser considerados perigosos.Você sempre deve verificar o conteúdo dos argumentos antes de usá-los.Para obter detalhes, consulte:Visão Geral de Scripts Maliciosos.