Dynamické naplnění ovládacího prvku javascriptovým kódem (C#)
Ovládací prvek DynamicPopulate v ASP.NET AJAX Control Toolkit volá webovou službu (nebo metodu stránky) a vyplní výslednou hodnotu do cílového ovládacího prvku na stránce bez aktualizace stránky. Populaci je také možné aktivovat pomocí vlastního kódu JavaScriptu na straně klienta.
Přehled
Ovládací DynamicPopulate prvek v ASP.NET AJAX Control Toolkit volá webovou službu (nebo metodu stránky) a vyplní výslednou hodnotu do cílového ovládacího prvku na stránce bez aktualizace stránky. Populaci je také možné aktivovat pomocí vlastního kódu JavaScriptu na straně klienta.
Postup
Nejprve potřebujete ASP.NET webovou službu, která implementuje metodu, která má být volána ovládacím DynamicPopulateExtender prvku. Webová služba implementuje metodu getDate() , která očekává jeden argument typu řetězec s názvem contextKey, protože DynamicPopulate ovládací prvek při každém volání webové služby odesílá jednu část kontextové informace. Tady je kód (soubor DynamicPopulate.cs.asmx), který načte aktuální datum v jednom ze tří formátů:
<%@ 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;
}
}
V dalším kroku vytvořte nový web ASP.NET a začněte ovládacím prvku ASP.NET AJAX ScriptManager:
<asp:ScriptManager ID="asm" runat="server" />
Pak přidejte ovládací prvek popisku (například pomocí ovládacího prvku HTML se stejným názvem nebo webového <asp:Label /> ovládacího prvku), který později zobrazí výsledek volání webové služby.
<label id="myDate" runat="server" />
Dále zahrňte DynamicPopulateExtender ovládací prvek a poskytněte informace o webové službě, cílový ovládací prvek, ale ne název ovládacího prvku, který aktivuje populaci, to se provede později pomocí vlastního JavaScriptu.
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="myDate" ServicePath="DynamicPopulate.cs.asmx"
ServiceMethod="getDate" />
Teď přejděte k části JavaScriptu. Funkce $find() definovaná knihovnou ASP.NET AJAX vrátí odkaz na objekty na straně serveru ASP.NET AJAX Control Toolkit, jako DynamicPopulateExtenderje . V aktuálním souboru $find("dpe") vrátí odkaz na jeden DynamicPopulateExtender ovládací prvek na stránce. Zveřejňuje metodu s názvem populate() , která aktivuje proces dynamického základního souboru. Metoda populate() vyžaduje jeden argument: kontextový klíč, který bude sloužit jako argument pro webovou metodu getDate() . $find("dpe").populate("format1") Například by popisek naplnil aktuálním datem ve formátu měsíc-den-rok.
Aby byla ukázka trochu flexibilnější, uživatel si teď může vybrat mezi několika formáty data. Pro každou z nich se zobrazí přepínač. Jakmile uživatel klikne na přepínač, kód JavaScriptu dynamicky naplní popisek vybraným formátem data. Tady jsou tyto přepínače:
<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>
Všimněte si, že v kontextu přepínače javascriptový výraz this.value odkazuje na hodnotu aktuálního tlačítka, což jsou přesně stejné informace getDate() , se kterými může metoda pracovat.
Kliknutím na tlačítko se ze serveru načte datum v zadaném formátu (kliknutím zobrazíte obrázek v plné velikosti).
