Usar o DynamicPopulate com um Controlo do Utilizador e JavaScript (VB)

por Christian Wenz

Descarregar PDF

O controlo DynamicPopulate no ASP.NET AJAX Control Toolkit chama um serviço web (ou método de página) e preenche o valor resultante num controlo-alvo na página, sem necessidade de atualização da página. Também é possível desencadear a população usando código JavaScript personalizado do lado do cliente. No entanto, é necessário ter especial cuidado quando o extensor está sob controlo do utilizador.

Descrição geral

O DynamicPopulate controlo no ASP.NET AJAX Control Toolkit chama um serviço web (ou método de página) e preenche o valor resultante num controlo-alvo na página, sem necessidade de atualizar a página. Também é possível desencadear a população usando código JavaScript personalizado do lado do cliente. No entanto, é necessário ter especial cuidado quando o extensor está sob controlo do utilizador.

Passos

Antes de mais, precisas de um ASP.NET Web Service que implemente o método a ser chamado pelo DynamicPopulateExtender controlo. O serviço web implementa o método getDate() que espera um argumento de tipo string, chamado contextKey, uma vez que o DynamicPopulate controle envia informação de contexto com cada chamada de serviço web. Aqui está o código (ficheiros DynamicPopulate.vb.asmx) que recupera a data atual num de 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

No passo seguinte, crie um novo controlo de utilizador (.ascx ficheiro), denotado pela seguinte declaração na sua primeira linha:

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

Um <label> elemento será usado para mostrar os dados provenientes do servidor.

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

Também no ficheiro de controlo do utilizador, usaremos três botões de rádio, cada um representando um dos três formatos de data possíveis suportados pelo serviço web. Quando o utilizador clica num dos botões de acesso, o navegador executa código JavaScript que se apresenta assim:

$find("mcd1_dpe1").populate(this.value)

Este código acede ao DynamicPopulateExtender (não te preocupes ainda com o ID estranho, isso será abordado mais tarde) e ativa a população dinâmica com dados. No contexto do botão de opção atual, this.value refere-se ao seu valor que é format1, format2 ou format3 exatamente o que o método web espera.

A única coisa que ainda falta no controlo do utilizador é o DynamicPopulateExtender controlo que liga os botões de rádio ao serviço web.

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

Mais uma vez, pode notar o ID estranho usado no controlo: mcd1$myDate em vez de myDate. Anteriormente, o código JavaScript usava mcd1_dpe1 para aceder ao DynamicPopulateExtender em vez de dpe1. Esta estratégia de nomenclatura é um requisito especial quando usada DynamicPopulateExtender dentro do controlo de utilizador. Além disso, tens de incorporar o controlo do utilizador de uma forma específica para que tudo funcione. Crie uma nova página ASP.NET e registe um prefixo de tag para o controlo de utilizador que acabou de implementar.

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>

Depois, inclua o controlo ASP.NET AJAX ScriptManager na nova página:

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

Finalmente, adicione o controlo do utilizador à página. Só tens de definir o seu ID atributo (e runat="server", claro), mas também tens de o definir com um nome específico: mcd1 já que este é o prefixo usado dentro do controlo do utilizador para o aceder usando JavaScript.

<div>
 <uc1:myCustomDate ID="mcd1" runat="server" />
</div>

E é isso! A página comporta-se como esperado: um utilizador clica num dos botões de rádio, o controlo no Toolkit chama o serviço web e mostra a data atual no formato desejado.

Os botões de rádio estão num controlo do utilizador (Clique para ver a imagem em tamanho real)