Použití ovládacího prvku DynamicPopulate s uživatelským ovládacím prvkem a JavaScriptem (C#)
Ovládací prvek DynamicPopulate v ASP.NET AJAX Control Toolkit zavolá 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. Základní soubor je také možné aktivovat pomocí vlastního kódu JavaScriptu na straně klienta. Je však třeba věnovat zvláštní pozornost, když se extender nachází v uživatelském ovládacím prvku.
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. Základní soubor je také možné aktivovat pomocí vlastního kódu JavaScriptu na straně klienta. Je však třeba věnovat zvláštní pozornost, když se extender nachází v uživatelském ovládacím prvku.
Postup
Nejprve potřebujete webovou službu ASP.NET, která implementuje metodu, kterou DynamicPopulateExtender má ovládací prvek volat. 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 odesílá jednu část kontextové informace při každém volání webové služby. 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ý uživatelský ovládací prvek (.ascx soubor) označený následující deklarací na prvním řádku:
<%@ Control Language="C#" ClassName="DynamicPopulate2" %>
Prvek <label> se použije k zobrazení dat pocházejících ze serveru.
<label id="myDate" runat="server" />
V uživatelském ovládacím souboru také použijeme tři přepínače, z nichž každé představuje jeden ze tří možných formátů kalendářních dat podporovaných webovou službou. Když uživatel klikne na jedno z přepínačů, prohlížeč spustí javascriptový kód, který bude vypadat takto:
$find("mcd1_dpe1").populate(this.value)
Tento kód získá DynamicPopulateExtender přístup k (zatím si nedělejte starosti s podivným ID, toto bude popsáno později) a aktivuje dynamický soubor dat. V kontextu aktuálního přepínače odkazuje na jeho hodnotu, která je format1, format2 nebo format3 přesně to, this.value co webová metoda očekává.
Jediné, co v uživatelském ovládacím prvku zatím chybí, je DynamicPopulateExtender ovládací prvek, který propojuje přepínače s webovou službou.
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="mcd1$myDate"
ServicePath="DynamicPopulate.cs.asmx" ServiceMethod="getDate"/>
Znovu si můžete všimnout podivného ID použitého v ovládacím prvku: mcd1$myDate místo .myDate Dříve se kód JavaScriptu používal mcd1_dpe1 pro přístup DynamicPopulateExtender k souboru místo dpe1. Tato strategie vytváření názvů je speciálním požadavkem při použití DynamicPopulateExtender v rámci uživatelského ovládacího prvku. Kromě toho musíte uživatelský ovládací prvek vložit určitým způsobem, aby vše fungovalo. Vytvořte novou stránku ASP.NET a zaregistrujte předponu značky pro uživatelský ovládací prvek, který jste právě implementovali:
<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.cs.ascx"%>
Potom na nové stránce zahrňte ovládací prvek ASP.NET AJAX ScriptManager :
<asp:ScriptManager ID="asm" runat="server" />
Nakonec na stránku přidejte uživatelský ovládací prvek. Musíte jenom nastavit jeho ID atribut (a runat="server", samozřejmě), ale musíte ho také nastavit na konkrétní název: mcd1 protože se jedná o předponu používanou v rámci uživatelského ovládacího prvku pro přístup k němu pomocí JavaScriptu.
<div>
<uc1:myCustomDate ID="mcd1" runat="server" />
</div>
A to je vše! Stránka se chová podle očekávání: Uživatel klikne na jedno z přepínačů, ovládací prvek v sadě nástrojů zavolá webovou službu a zobrazí aktuální datum v požadovaném formátu.
Přepínače se nacházejí v uživatelském ovládacím prvku (kliknutím zobrazíte obrázek v plné velikosti).
