Popolamento dinamico di un controllo (C#)

di Christian Wenz

Scarica il PDF

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.

Panoramica

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. Questa esercitazione illustra come configurare questa operazione.

Passaggi

Prima di tutto, è necessario un servizio Web ASP.NET che implementa il metodo da chiamare da DynamicPopulate. La classe di servizio Web richiede l'attributo ScriptService definito all'interno Microsoft.Web.Script.Servicesdi ; in caso contrario, ASP.NET AJAX non può creare il proxy JavaScript lato client per il servizio Web che a sua volta è richiesto da DynamicPopulate.

Il metodo Web deve prevedere un argomento di stringa di tipo, denominato contextKey, poiché il DynamicPopulate controllo invia una parte di informazioni di contesto con ogni chiamata al servizio Web. Il servizio Web seguente restituisce la data corrente in un formato rappresentato dall'argomento contextKey :

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

Il servizio Web viene quindi salvato come DynamicPopulate.cs.asmx. In alternativa, è possibile implementare il getDate() metodo come metodo di pagina all'interno della pagina ASP.NET effettiva con il DynamicPopulate controllo.

Nel passaggio successivo creare un nuovo file di ASP.NET. Come sempre, il primo passaggio consiste nell'includere nella ScriptManager pagina corrente per caricare la libreria ASP.NET AJAX e per rendere funzionante Control Toolkit:

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

Aggiungere quindi un controllo etichetta (ad esempio usando il controllo HTML dello stesso nome o il <asp:Label> controllo Web) che mostrerà in seguito il risultato della chiamata al servizio Web.

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

Un pulsante HTML (come controllo HTML, poiché non è necessario un postback al server) verrà quindi usato per attivare la popolazione dinamica:

<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />

Infine, abbiamo bisogno del DynamicPopulateExtender controllo per collegare le cose. Gli attributi seguenti verranno impostati (a parte quelli ovvi e ID=runat"server"):

• TargetControlID dove inserire il risultato dalla chiamata al servizio Web
• ServicePath percorso del servizio Web (omettere se si vuole usare un metodo di pagina)
• ServiceMethod nome del metodo web o del metodo di pagina
• ContextKey informazioni sul contesto da inviare al servizio Web
• PopulateTriggerControlID elemento che attiva la chiamata al servizio Web
• ClearContentsDuringUpdate se svuotare l'elemento di destinazione durante la chiamata al servizio Web

Come si può vedere, il controllo richiede alcune informazioni, ma mettere tutto in posto è abbastanza dritto. Ecco il markup per il DynamicPopulateExtender controllo nello scenario corrente:

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

Eseguire la pagina ASP.NET nel browser e fare clic sul pulsante; si riceverà la data corrente nel formato mese-giorno-anno.

Un clic sul pulsante recupera la data dal server (fare clic per visualizzare l'immagine full-size)