Uso di DynamicPopulate con un controllo utente e JavaScript (VB)
Il controllo DynamicPopulate nel ASP.NET AJAX Control Toolkit chiama un servizio Web (o un metodo di pagina) e inserisce il valore risultante in un controllo di destinazione nella pagina, senza un aggiornamento della pagina. È anche possibile attivare il popolamento usando codice JavaScript lato client personalizzato. Tuttavia, è necessario prestare particolare attenzione quando l'extender risiede in un controllo utente.
Panoramica
Il DynamicPopulate controllo nel ASP.NET AJAX Control Toolkit chiama un servizio Web (o un metodo di pagina) e inserisce il valore risultante in un controllo di destinazione nella pagina, senza un aggiornamento della pagina. È anche possibile attivare il popolamento usando codice JavaScript lato client personalizzato. Tuttavia, è necessario prestare particolare attenzione quando l'extender risiede in un controllo utente.
Passaggi
Prima di tutto, è necessario un servizio Web di ASP.NET che implementa il metodo da chiamare dal DynamicPopulateExtender controllo . Il servizio Web implementa il metodo getDate() che prevede un argomento di tipo stringa, denominato contextKey, poiché il DynamicPopulate controllo invia una parte di informazioni di contesto con ogni chiamata al servizio Web. Ecco il codice (file DynamicPopulate.vb.asmx) che recupera la data corrente in uno dei tre formati:
<%@ 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
Nel passaggio successivo creare un nuovo controllo utente (.ascx file), indicato dalla dichiarazione seguente nella prima riga:
<%@ Control Language="C#" ClassName="DynamicPopulate2" %>
Verrà usato un <label> elemento per visualizzare i dati provenienti dal server.
<label id="myDate" runat="server" />
Inoltre, nel file di controllo utente verranno usati tre pulsanti di opzione, ognuno dei quali rappresenta uno dei tre formati di data possibili supportati dal servizio Web. Quando l'utente fa clic su uno dei pulsanti di opzione, il browser eseguirà codice JavaScript simile al seguente:
$find("mcd1_dpe1").populate(this.value)
Questo codice accede a DynamicPopulateExtender (non preoccuparsi ancora dell'ID strano, che verrà trattato più avanti) e attiva la popolazione dinamica con i dati. Nel contesto del pulsante di opzione corrente, this.value fa riferimento al relativo valore , format1format2 o format3 esattamente a quello previsto dal metodo Web.
L'unica cosa mancante nel controllo utente è ancora il DynamicPopulateExtender controllo che collega i pulsanti di opzione al servizio Web.
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="mcd1$myDate"
ServicePath="DynamicPopulate.vb.asmx" ServiceMethod="getDate"/>
Anche in questo caso è possibile notare lo strano ID usato nel controllo : mcd1$myDate invece di myDate. In precedenza, il codice JavaScript usato mcd1_dpe1 per accedere DynamicPopulateExtender a anziché dpe1a . Questa strategia di denominazione è un requisito speciale quando si usa DynamicPopulateExtender all'interno di un controllo utente. Inoltre, è necessario incorporare il controllo utente in un modo specifico per renderlo tutto funzionante. Creare una nuova pagina ASP.NET e registrare un prefisso di tag per il controllo utente appena implementato:
<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>
Includere quindi il controllo ASP.NET AJAX ScriptManager nella nuova pagina:
<asp:ScriptManager ID="asm" runat="server" />
Aggiungere infine il controllo utente alla pagina. Devi solo impostare il relativo ID attributo (e runat="server", naturalmente), ma devi anche impostarlo su un nome specifico: mcd1 poiché questo è il prefisso usato all'interno del controllo utente per accedervi usando JavaScript.
<div>
<uc1:myCustomDate ID="mcd1" runat="server" />
</div>
Ecco fatto! La pagina si comporta come previsto: un utente fa clic su uno dei pulsanti di opzione, il controllo nel Toolkit chiama il servizio Web e visualizza la data corrente nel formato desiderato.
I pulsanti di opzione si trovano in un controllo utente (fare clic per visualizzare l'immagine a dimensione intera)
