Popolamento dinamico di un controllo tramite codice JavaScript (C#)

di Christian Wenz

Scaricare il PDF

Il controllo DynamicPopulate nel ASP.NET AJAX Control Toolkit chiama un servizio Web (o un metodo di pagina) e riempie 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.

Informazioni generali

Il DynamicPopulate controllo nel ASP.NET AJAX Control Toolkit chiama un servizio Web (o un metodo di pagina) e riempie 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.

Gradi

Prima di tutto, è necessario un servizio Web 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.cs.asmx) che recupera la data corrente in uno dei tre formati seguenti:

<%@ 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;
 }
}

Nel passaggio successivo creare un nuovo sito di ASP.NET e iniziare con il controllo ScriptManager AJAX ASP.NET:

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

Aggiungere quindi un controllo etichetta, ad esempio usando il controllo HTML con lo stesso nome o il <asp:Label /> controllo web, che successivamente visualizzerà il risultato della chiamata al servizio web.

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

Successivamente, includere un controllo DynamicPopulateExtender e fornire le informazioni sul servizio Web e sul controllo di destinazione; non indicare però il nome del controllo che attiva il popolamento dei dati. Questo verrà eseguito in un secondo momento, usando JavaScript personalizzato.

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

Passare ora alla parte JavaScript. La $find() funzione, definita dalla libreria AJAX ASP.NET, restituisce un riferimento agli oggetti lato server dell'ASP.NET AJAX Control Toolkit, DynamicPopulateExtenderad esempio . Nel file corrente, $find("dpe") restituisce un riferimento al DynamicPopulateExtender controllo nella pagina. Espone un metodo denominato populate() che attiva il processo di popolamento dinamico. Il populate() metodo richiede un argomento: la chiave di contesto che fungerà da argomento per il getDate() metodo Web. Ad esempio, $find("dpe").populate("format1") popola l'etichetta con la data corrente in formato mese-giorno-anno.

Per rendere l'esempio un po' più flessibile, l'utente può ora scegliere tra diversi formati di data. Per ognuno di essi, viene visualizzato un pulsante di scelta. Quando l'utente fa clic su un pulsante di opzione radio, il codice JavaScript popola dinamicamente l'etichetta con il formato di data selezionato. Ecco questi pulsanti di opzione:

<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>

Si noti che, nel contesto di un pulsante di opzione, l'espressione JavaScript this.value si riferisce al valore del pulsante corrente, che è esattamente la stessa informazione con cui il metodo getDate() può lavorare.

Un clic sul pulsante recupera la data dal server, nel formato specificato (fare clic per visualizzare l'immagine a dimensione intera)

PrecedenteAvanti