Utilização do DynamicPopulate com controlo do utilizador e JavaScript (C#)

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 (ficheiro DynamicPopulate.cs.asmx) que recupera a data atual num dos três formatos:

<%@ WebService Language="C#" Class="DynamicPopulate" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
public class DynamicPopulate : System.Web.Services.WebService
{
 [WebMethod]
 public string getDate(string contextKey)
 {
 string myDate = "";
 switch (contextKey)
 {
 case "format1":
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now);
 break;
 case "format2":
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now);
 break;
 case "format3":
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now);
 break;
 }
 return myDate;
 }
}

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.cs.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.cs.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)