Preenchimento dinâmico de um controle com código de JavaScript (VB)

por Christian Wenz

Baixar PDF

O controle DynamicPopulate no ASP.NET kit de ferramentas de controle AJAX chama um serviço Web (ou método de página) e preenche o valor resultante em um controle de destino na página, sem uma atualização de página. Também é possível disparar a população usando código JavaScript personalizado do lado do cliente.

Visão geral

O DynamicPopulate controle no ASP.NET Kit de Ferramentas de Controle AJAX chama um serviço Web (ou método de página) e preenche o valor resultante em um controle de destino na página, sem uma atualização de página. Também é possível disparar a população usando código JavaScript personalizado do lado do cliente.

Etapas

Em primeiro lugar, você precisa de um serviço Web ASP.NET que implemente o método a ser chamado pelo DynamicPopulateExtender controle . O serviço Web implementa o método getDate() que espera um argumento de cadeia de caracteres de tipo, chamado contextKey, já que o DynamicPopulate controle envia uma parte das informações de contexto com cada chamada de serviço Web. Aqui está o código (arquivo DynamicPopulate.vb.asmx) que recupera a data atual em um dos três formatos:

<%@ WebService Language="VB" Class="DynamicPopulate" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
<ScriptService()> _
Public Class DynamicPopulate
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function getDate(ByVal contextKey As String) As String
 Dim myDate As String = ""
 Select Case contextKey
 Case "format1"
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now)
 Case "format2"
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now)
 Case "format3"
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now)
 End Select
 Return myDate
 End Function
End Class

Na próxima etapa, crie um novo site de ASP.NET e comece com o ASP.NET controle AJAX ScriptManager:

<asp:ScriptManager ID="asm" runat="server" />

Em seguida, adicione um controle de rótulo (por exemplo, usando o controle HTML de mesmo nome ou o <asp:Label /> controle web) que, posteriormente, mostrará o resultado da chamada do serviço Web.

<label id="myDate" runat="server" />

Em seguida, inclua um DynamicPopulateExtender controle e forneça informações de serviço Web, controle de destino, mas não o nome do controle que dispara a população que isso será feito posteriormente, usando JavaScript personalizado!

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="myDate" ServicePath="DynamicPopulate.vb.asmx"
 ServiceMethod="getDate" />

Agora para a parte JavaScript. A $find() função, definida pela biblioteca ASP.NET AJAX, retorna uma referência a objetos do lado do servidor do ASP.NET Kit de Ferramentas de Controle AJAX, como DynamicPopulateExtender. No arquivo atual, $find("dpe") retorna uma referência ao único DynamicPopulateExtender controle na página. Ele expõe um método chamado populate() que dispara o processo de população dinâmica. O populate() método requer um argumento: a chave de contexto que servirá como argumento para o getDate() método Web. Portanto, por exemplo, $find("dpe").populate("format1") preencheria o rótulo com a data atual no formato mês-dia-ano.

Para tornar o exemplo um pouco mais flexível, o usuário agora pode escolher entre vários formatos de data. Para cada um deles, um botão de opção é exibido. Depois que o usuário clica em um botão de opção, o código JavaScript preenche dinamicamente o rótulo com o formato de data selecionado. Estes são os botões de opção:

<asp:Panel ID="panel1" runat="server">
 <input type="radio" id="rb1" name="format" value="format1" runat="server"
 onclick="$find('dpe1').populate(this.value);" />m-d-y
 <input type="radio" id="rb2" name="format" value="format2" runat="server"
 onclick="$find('dpe1').populate(this.value);" />d.m.y
 <input type="radio" id="rb3" name="format" value="format3" runat="server"
 onclick="$find('dpe1').populate(this.value);" />y/m/d
</asp:Panel>

Observe que, dentro do contexto de um botão de opção, a expressão this.value JavaScript refere-se ao valor do botão atual, que por acaso são exatamente as mesmas informações com as quais o getDate() método pode trabalhar.

Um clique no botão recupera a data do servidor, no formato especificado (Clique para exibir a imagem em tamanho real)

AnteriorAvançar