Popolamento dinamico di un controllo tramite codice JavaScript (C#)
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.
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.
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.cs.asmx) che recupera la data corrente in uno dei tre formati:
<%@ 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 in seguito mostrerà il risultato della chiamata al servizio Web.
<label id="myDate" runat="server" />
Includere quindi un DynamicPopulateExtender controllo e fornire informazioni sul servizio Web, il controllo di destinazione, ma non il nome del controllo che attiva il popolamento, che 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 ASP.NET AJAX, restituisce un riferimento agli oggetti lato server dell'ASP.NET AJAX Control Toolkit, DynamicPopulateExtenderad esempio . Nel file $find("dpe") corrente restituisce un riferimento a un 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 opzione. Quando l'utente fa clic su un pulsante di opzione, 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 this.value JavaScript fa riferimento al valore del pulsante corrente, che corrisponde esattamente alle stesse informazioni con cui il getDate() metodo può funzionare.
Un clic sul pulsante recupera la data dal server, nel formato specificato (fare clic per visualizzare l'immagine a dimensione intera)
