Você está offline; aguardando reconexão

Implementando retornos de chamada assíncronos em controles DropDownList, nos controles ListBox e nos controles de rótulo no ASP.NET 2.0

IMPORTANTE: Este artigo foi traduzido por um sistema de tradução automática (também designado por Machine Translation ou MT), não tendo sido portanto traduzido ou revisto por pessoas. A Microsoft possui artigos traduzidos por aplicações (MT) e artigos traduzidos por tradutores profissionais, com o objetivo de oferecer em português a totalidade dos artigos existentes na base de dados de suporte. No entanto, a tradução automática não é sempre perfeita, podendo conter erros de vocabulário, sintaxe ou gramática. A Microsoft não é responsável por incoerências, erros ou prejuízos ocorridos em decorrência da utilização dos artigos MT por parte dos nossos clientes. A Microsoft realiza atualizações freqüentes ao software de tradução automática (MT). Obrigado.

Clique aqui para ver a versão em Inglês deste artigo: 910450
Aviso de Isenção de Responsabilidade sobre Conteúdo do KB Aposentado
Este artigo trata de produtos para os quais a Microsoft não mais oferece suporte. Por esta razão, este artigo é oferecido "como está" e não será mais atualizado.
Coluna de voz de suporte do ASP.NET

Implementando retornos de chamada assíncronos em controles DropDownList, nos controles ListBox e nos controles de rótulo no ASP.NET 2.0

para personalizar esta coluna às suas necessidades, queremos convidá-lo para enviar suas idéias sobre tópicos que interessam a você e problemas que você deseja ver abordados artigos do Knowledge Base no futuro e colunas de voz de suporte. Você pode enviar suas idéias e comentários usando o formulário Ask For It. Há também um link para o formulário na parte inferior desta coluna.
Bem-vindo à coluna do Microsoft ASP.NET suporte Voice! Estou Nilay B. Shah da equipe de suporte do desenvolvedor do ASP.NET. Eu tiver trabalhado com o grupo de suporte do ASP.NET mais de dois anos. Atualmente, eu estou me concentrando na funcionalidade retorno de chamada assíncrono (retornos de chamada do cliente) que foi adicionada para o ASP.NET 2.0. Nesta coluna, vou discutir alguns aplicativos de exemplo que podem ser integrados em qualquer dos aplicativos ASP.NET 2.0 para aprimorar a experiência do usuário. Eu gostaria de agradecer a Jerry Andrade da equipe de suporte do ASP.NET para sua contínua inspiração e Ajuda.
Introdução
O controle GridView e os controles TreeView no ASP.NET 2.0 fornecem uma experiência do usuário sofisticados e interativos sem postbacks de página inteira. No entanto, ter trabalhado com os clientes que desejar ajuda na realização de retornos de chamada assíncronos em outros controles de servidor Web. Este artigo descreve como a mesma funcionalidade pode ser implementada em controles ListBox e em controles DropDownList e inclui uma maneira de aumentar o valor de um controle Label assincronamente.

Os seguintes tópicos são abordados neste artigo:
  • Como atualizar o valor do controle ListBox Web servidor usando retornos de chamada assíncronos dependendo o valor do controle TextBox
  • Como atualizar o valor de controle de servidor de Web DropDownList usando retornos de chamada assíncronos dependendo do valor do controle DropDownList outro
  • Como incrementar um valor em um controle Label que baseia um clique de botão em retornos de chamada assíncronos
Mais Informações

Como atualizar o valor do controle de servidor ListBox Web usando retornos de chamada assíncronos dependendo o valor do controle TextBox

Para atualizar um valor de controle de servidor de Web ListBox usando retornos de chamada assíncronos, execute estas etapas:
  1. Registre manipuladores de retorno de chamada usando o método Page.ClientScript.GetCallbackEventReference .
  2. Adicione um atributo apropriado para o controle TextBox do servidor Web para instanciar o retorno de chamada assíncrono.
  3. Recuperar dados do controle ListBox com base no valor do controle TextBox que é passado como uma seqüência de caracteres do argumento da função de cliente e, em seguida, retornar os dados para o cliente no formulário de uma seqüência de caracteres.
  4. Escreva um script para analisar o DOM (Document Object Model) no navegador.
  5. Atualize o conteúdo.
O exemplo a seguir usa um controle TextBox do servidor Web e um controle ListBox do servidor Web para exibir a nova funcionalidade. Este exemplo utiliza tabela de funcionários do banco de dados de exemplo Northwind. Ao iniciar a inserção de texto do campo Sobrenome no controle TextBox , retornos de chamada assíncronos ocorrem. O valor do controle TextBox é passado para o servidor. Nome do funcionário é procurado da tabela de banco de dados funcionários dependendo o texto que é passado e os dados são retornados ao cliente em uma seqüência de caracteres formatada. Não há uma função de JavaScript do lado do cliente que processa o valor de seqüência de caracteres e o acrescenta ao controle ListBox .

No exemplo de código a seguir, o script ClientCallback assíncrono está registrado para evento de AoLiberarTecla do controle TextBox no evento Page_Load da página.
txtLastName.Attributes["OnKeyUp"] = TextBoxEventScript;
isso permite que os valores de controle ListBox ser recuperados com base no texto que é inserido no controle TextBox .

No método RaiseCallbackEvent , os valores de campo que corresponde ao valor sobrenome que é passado para o servidor são recuperados do banco de dados. Os resultados da chamada banco de dados são criados em uma lista delimitada por pipe no seguinte formato:
Nome | CódigoDoFuncionário || nome | CódigoDoFuncionário
A seqüência de caracteres resultante é enviada de volta para o cliente por meio da função GetCallbackResult . A função de JavaScript ReceiveServerData recupera valores de seqüência de caracteres delimitada e acrescenta os valores para o controle ListBox .
lstFirstName.appendChild(option);
marcação ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateListboxBasedOnTextbox.aspx.cs" Inherits="UpdateListboxBasedOnAnotherListbox" %><!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 runat="server">    <title>Untitled Page</title>    <!—JavaScript function that will run when the OnKeyUp event of the TextBox control runs on the client.  -->    <script language="javascript">    function ReceiveServerData(arg,context)    {        var lstFirstName = document.forms[0].elements['lstFirstName'];              lstFirstName.innerHTML= "";        var rows = arg.split('||');         for (var i = 0; i < rows.length - 1; ++i)        {         var fields = rows[i].split('|');          var firstname = fields[0];         var employeeid = fields[1];         var option = document.createElement("option");                  option.value = employeeid;         option.innerHTML = firstname;         lstFirstName.appendChild(option);        }          }    </script>  </head><body>    <form id="form1" runat="server">    <div>        <asp:TextBox ID="txtLastName" runat="server" 		Style="z-index: 100; left: 160px; position: absolute; top: 88px" Width="152px" >	</asp:TextBox>        <asp:ListBox ID="lstFirstName" runat="server" 		Style="z-index: 101; left: 160px; position: absolute;top: 112px" Width="160px">        </asp:ListBox>        &nbsp;        <asp:Label ID="lblLastName" runat="server" Height="16px" 		Style="z-index: 102; left: 32px; position: absolute; top: 88px" Text="Enter Last Name:" 		Width="120px">        </asp:Label>        <asp:Label ID="lblFirstName" runat="server" 		Style="z-index: 103; left: 64px; position: absolute;top: 112px" Text="First Name:" Width="88px">	</asp:Label>        	<asp:SqlDataSource ID="SqlDataSource1" runat="server" 		ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 		SelectCommand="SELECT [firstname], [lastname] FROM [Employees]">        </asp:SqlDataSource>        <asp:Label ID="lblText" runat="server" Font-Names="Arial" Font-Size="Small" Font-Underline="True" 		Style="z-index: 106; left: 32px; position: absolute; top: 56px" 		Text="Enter Employee's LastName in textbox and FirstName in Listbox Will Be Updated Asynchronously"		Width="600px">	</asp:Label>    </div>        	<asp:Label ID="lblTitle" runat="server" Font-Bold="True" Font-Names="Verdana" 		Style="z-index: 105;left: 8px; position: absolute; top: 16px" 		Text="Updating ListBox Control Asynchronously"            	Width="488px">	</asp:Label>        &nbsp;	<span id="message">	</span>    </form></body></html>
code-behind
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;using System.Text;using System.Data.SqlClient;using System.Web.Configuration;public partial class UpdateListboxBasedOnAnotherListbox : System.Web.UI.Page,ICallbackEventHandler{    //This object is used to build the results of the callback function    StringBuilder arg;    protected void Page_Load(object sender, EventArgs e)    {        //Do not process Page_Load if it is a clientscript callback.        if (IsCallback)            return;        if (!Page.IsPostBack)        {            //Generate an HTML script that can instantiate an asynchronous callback onKeyUp event of             //txtLastName             string TextBoxEventScript = Page.ClientScript.GetCallbackEventReference(this, "document.all['txtLastName'].value", "ReceiveServerData", "null");            txtLastName.Attributes["OnKeyUp"] = TextBoxEventScript;          }    }    // ********************************************************************    // Implement the RaiseCallbackEvent function of the callback interface    // ********************************************************************    public void RaiseCallbackEvent(String eventArgument)    {	//Connect to the database and look up the employee based on the value passed to the server.	//In this case, the textbox value is passed in the eventArgument.        SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);        try        {            SqlCommand cmd = new SqlCommand();            cmd.CommandText = "Select firstname,employeeid from Employees where LastName like @LastName";            cmd.Parameters.Add(new SqlParameter("@LastName", SqlDbType.NVarChar, 50));            cmd.Parameters["@LastName"].Value = eventArgument.ToString() + "%" ;            cmd.Connection = con;            con.Open();                        arg = new StringBuilder();                        SqlDataReader reader = cmd.ExecuteReader();            while (reader.Read())            {                arg.Append(reader["firstname"]);                arg.Append("|");                arg.Append(reader["employeeid"]);                arg.Append("||");            }            reader.Close();        }        catch (Exception ex)        {            Response.Write(ex.Message);        }        finally        {            con.Close();        }    }    // ********************************************************************    // Implement the GetCallbackResult function of the callback interface    // ********************************************************************    public string GetCallbackResult()    {        return arg.ToString();    }  }

Como atualizar o valor do controle de servidor DropDownList Web usando retornos de chamada assíncronos dependendo do valor do controle DropDownList outro

Para atualizar o valor de controle de servidor de Web DropDownList , usando retornos de chamada assíncronos dependendo do valor do controle DropDownList outro, execute estas etapas:
  1. Registre manipuladores de retorno de chamada usando o método Page.ClientScript.GetCallbackEventReference .
  2. Adicione atributos apropriados para o primeiro controle de servidor de Web DropDownList para instanciar retornos de chamada assíncronos.
  3. Recupere dados do controle DropDownList segundo com base no valor do controle DropDownList que é passado da função de JavaScript do lado do cliente.
  4. Retorne os valores para o cliente no formulário de uma seqüência de caracteres delimitado.
  5. Escreva um script para analisar o DOM no navegador e, em seguida, atualizar o conteúdo.
O exemplo de código a seguir usa dois controles DropDownList , drpEmployeeId e drpEmployeeName . Este exemplo usa a tabela de funcionários do banco de dados de exemplo Northwind. O controle drpEmployeeId é vinculado a dados para a coluna EmployeeId. Quando você seleciona um valor do controle drpEmployeeId , ocorre um retorno de chamada assíncrono. O valor do controle drpEmployeeId é passado para o servidor. Nome do funcionário é recuperado da tabela Funcionários com base nos dados EmployeeId que foi passados do cliente. O valor é retornado ao cliente em um seqüência de caracteres delimitada. A função de JavaScript do lado do cliente processa o valor de seqüência de caracteres e, em seguida, acrescenta os valores ao drpEmployeeName controle DropDownList .

marcação ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateDropDownboxBasedOnAnotherDropDownBox.aspx.cs" Inherits="UpdateDropDownboxBasedOnAnotherListbox" %><!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 runat="server">    <title>Asynchronous Callback - DropDownList</title>    <script language="javascript">        function ReceiveServerData(arg,context)        {        var drpEmployeeName = document.forms[0].elements['drpEmployeeName'];              drpEmployeeName.innerHTML= "";        var rows = arg.split('||');         for (var i = 0; i < rows.length - 1; ++i)        {         var fields = rows[i].split('|');          var firstname = fields[0];         var employeeid = fields[1];         var option = document.createElement("option");                  option.value = employeeid;         option.innerHTML = firstname;         drpEmployeeName.appendChild(option);                  document.getElementById('lblMessage').innerText = "You selected employeeid: " +  employeeid  + " for which FirstName is " + firstname ;                }        }    </script>     </head><body>    <form id="form1" runat="server">    <div>        <asp:DropDownList ID="drpEmployeeId" runat="server" DataSourceID="SqlDataSource1"            DataTextField="employeeid" DataValueField="employeeid" Style="z-index: 100; left: 144px;            position: absolute; top: 112px">        </asp:DropDownList>        <asp:DropDownList ID="drpEmployeeName" runat="server" Style="z-index: 101; left: 144px;            position: absolute; top: 136px">        </asp:DropDownList>        <asp:Label ID="lblEmployeeId" runat="server" Style="z-index: 102; left: 48px; position: absolute;            top: 112px" Text="EmployeeID:" Width="88px"></asp:Label>        <asp:Label ID="lblFirstName" runat="server" Style="z-index: 103; left: 48px; position: absolute;            top: 136px" Text="First Name" Width="88px"></asp:Label>        <asp:Label ID="lblText" runat="server" Font-Names="Arial" Font-Size="Small" Style="z-index: 104;            left: 48px; position: absolute; top: 80px" Text="Select EmployeeId from first DropDown and Second DropDown Will Be Updated Asynchronously"            Width="600px" Font-Underline="True"></asp:Label>        <asp:Label ID="lblTitle" runat="server" Font-Bold="True" Font-Names="Verdana" Style="z-index: 105;            left: 24px; position: absolute; top: 24px" Text="Updating DropDownListBox Control Asynchronously"            Width="488px"></asp:Label>        </div>        <asp:Label ID="lblMessage" runat="server" Style="z-index: 107; left: 48px; position: absolute;    top: 192px" Width="592px" Font-Names="Arial" Font-Size="Small" ForeColor="MediumBlue"></asp:Label>    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"            SelectCommand="SELECT [employeeid], [firstname] FROM [Employees]">    </asp:SqlDataSource>    </form></body></html>
code-behind
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;using System.Web.Configuration;using System.Text;using System.Data.SqlClient;public partial class UpdateDropDownboxBasedOnAnotherListbox : System.Web.UI.Page, ICallbackEventHandler{    StringBuilder arg;    protected void Page_Load(object sender, EventArgs e)    {        //Do not process Page_Load if it is a clientscript callback.        if (IsCallback)            return;        if (!Page.IsPostBack)        {            //Generate an HTML script that can instantiate an asynchronous callback on the click of             //the first DropDownListBox, and add it to the "onClick" attribute of the same.            string FirstDropDownCallbackScript = Page.ClientScript.GetCallbackEventReference(this, "document.all['drpEmployeeId'].value", "ReceiveServerData", "null");                        drpEmployeeId.Attributes["onClick"] = FirstDropDownCallbackScript;                         }    }    // *******************************************************    // Implement the callback interface    public void RaiseCallbackEvent(String eventArgument)    {        SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);        try        {                        SqlCommand cmd = new SqlCommand();            cmd.CommandText = "Select firstname,employeeid from Employees where employeeid= @EmployeeId";            cmd.Parameters.Add(new SqlParameter("@EmployeeId", SqlDbType.Int, 4));            cmd.Parameters["@EmployeeId"].Value = Int32.Parse(eventArgument);            cmd.Connection = con;            arg = new StringBuilder();            con.Open();            SqlDataReader reader = cmd.ExecuteReader();            while (reader.Read())            {                arg.Append(reader["firstname"]);                arg.Append("|");                arg.Append(reader["employeeid"]);                arg.Append("||");            }            reader.Close();        }        catch (Exception ex)        {            Response.Write(ex.Message);         }        finally        {            con.Close();        }    }    public string GetCallbackResult()    {        return arg.ToString() ;    }    // *******************************************************}

Como incrementar um valor em um controle Label que baseia um clique de botão em retornos de chamada assíncronos

No exemplo de código a seguir, um contador é incrementado a cada clique no botão e o valor do contador é colocado em um controle Label . O valor de contagem é mantido em uma variável de sessão que é chamada de contagem para controlar o valor nas solicitações.

Este exemplo usa estado de sessão para armazenar o contador porque não há suporte para controlar a propriedade de ViewState em retornos de chamada assíncronos. Quando você implementa as propriedades da página ou propriedades de controle que precisam ser atualizados durante operações de retorno de chamada de script, evite usar a propriedade de ViewState .

marcação ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="IncrementingCountInLabelControl.aspx.cs" Inherits="IncrementingCountInLabelControl" %><!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 runat="server">    <title>Asynchronous Callback - Label</title>    <script language="javascript">        function ReceiveServerData(arg,context)        {        document.getElementById('lblCounter').innerText = arg;        }    </script> </head><body>    <form id="form1" runat="server">    <div>        <asp:Label ID="lblCount" runat="server" Style="z-index: 100; left: 48px; position: absolute;            top: 80px" Text="Count :" Width="56px" Font-Names="Arial"></asp:Label>        <asp:Label ID="lblTitle" runat="server" Font-Bold="True" Font-Names="Verdana" Style="z-index: 101;            left: 8px; position: absolute; top: 16px" Text="Incrementing Count on each Button-Click Asynchronously"            Width="552px"></asp:Label>        &nbsp;&nbsp;        <input id="btnClickMe" style="z-index: 104; left: 48px; position: absolute; top: 104px"            type="button" onclick="CallServer('', '')" value="Click Me" />        <asp:Label ID="lblText" runat="server" Font-Names="Arial" Font-Size="Small" Font-Underline="True"            Style="z-index: 102; left: 32px; position: absolute; top: 48px" Text="Click Button and Observe count:"            Width="600px"></asp:Label>        <asp:Label ID="lblCounter" runat="server" Font-Names="Arial" Font-Size="Large" Style="z-index: 105;            left: 104px; position: absolute; top: 80px" Text="0" Width="24px"></asp:Label>        </div>    </form></body></html>
code-behind
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;using System.Text; public partial class IncrementingCountInLabelControl : System.Web.UI.Page,ICallbackEventHandler {    protected void Page_Load(object sender, EventArgs e)    {        //Do not process Page_Load if it is a clientscript callback.        if (IsCallback)            return;        if (!Page.IsPostBack)        {            Session["Count"] = "0";            ClientScriptManager cm = Page.ClientScript;            String cbReference = cm.GetCallbackEventReference(this, "arg", "ReceiveServerData", "");            String callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";            cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);        }     }    // *******************************************************    // Implement the callback interface    public void RaiseCallbackEvent(String eventArgument)    {          Session["Count"]  = int.Parse((Session["Count"].ToString())) + 1;    }    public string GetCallbackResult()    {        return Session["Count"].ToString();     }    // *******************************************************    }

Conclusão

Embora retornos de chamada assíncronos são limitados em termos de passar os valores do cliente para o servidor como uma seqüência de caracteres e exigir que você escrever alguns JavaScript, é possível atualizar controles do servidor Web diferente no controle GridView e o controle TreeView assincronamente. Um pouco de esforço extra pode aprimorar a experiência do usuário em grande parte!

Links relacionados

Para obter mais informações, visite os seguintes sites: Para obter mais informações sobre HTML DOM, visite o seguinte site da World Wide Web Consortium (W3C):
Espero que você encontrou essas informações úteis. Lembre-se, as colunas de voz de suporte são para você! Como sempre, vontade enviar idéias sobre tópicos desejado no futuro abordada colunas ou na Base de dados de Conhecimento usando o formulário Ask For It.

Aviso: este artigo foi traduzido automaticamente

Propriedades

ID do Artigo: 910450 - Última Revisão: 12/14/2006 18:51:43 - Revisão: 1.2

Microsoft ASP.NET 2.0

  • kbmt kbhowto kbasp KB910450 KbMtpt
Comentários
r m=document.createElement('meta');m.name='ms.dqp0';m.content='true';document.getElementsByTagName('head')[0].appendChild(m);" onload="var m=document.createElement('meta');m.name='ms.dqp0';m.content='false';document.getElementsByTagName('head')[0].appendChild(m);" src="http://c1.microsoft.com/c.gif?">