Popolamento dinamico di un controllo (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.

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

Gradi

Prima di tutto, è necessario un servizio Web ASP.NET che implementa il metodo da chiamare da DynamicPopulate. La classe del 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 sul lato client per il servizio Web che a sua volta è richiesto da DynamicPopulate.

Il metodo Web deve prevedere un argomento di tipo string, denominato contextKey, perché 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 metodo getDate() come metodo di pagina all'interno della effettiva pagina ASP.NET con il controllo DynamicPopulate.

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

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

Aggiungere quindi un'etichetta di controllo (ad esempio usando il controllo HTML con lo stesso nome o il controllo Web <asp:Label>) che in seguito mostrerà 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 il popolamento dinamico:

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

Infine, abbiamo bisogno del controllo DynamicPopulateExtender per collegare tutto. Gli attributi seguenti verranno impostati (a parte quelli ovvi e IDrunat="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 o della pagina Web
• 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ò notare, il controllo richiede alcune informazioni, ma mettere tutto in posto è piuttosto semplice. 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 ; riceverai la data corrente in formato mese-giorno-anno.

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