Vytvoření vlastního rozšiřujícího ovládacího prvku AJAX Control Toolkit (VB)
od Microsoftu
Vlastní extendery umožňují přizpůsobit a rozšířit možnosti ovládacích prvků ASP.NET bez nutnosti vytvářet nové třídy.
V tomto kurzu se naučíte vytvořit vlastní rozšiřující ovládací prvek AJAX Control Toolkit. Vytvoříme jednoduchý, ale užitečný, nový extender, který změní stav buttonu ze zakázaného na povolený, když zadáte text do textového pole. Po přečtení tohoto kurzu budete schopni rozšířit sadu ASP.NET AJAX Toolkit o vlastní rozšiřující ovládací prvky.
Vlastní rozšiřující ovládací prvky můžete vytvořit pomocí sady Visual Studio nebo Visual Web Developer (ujistěte se, že máte nejnovější verzi aplikace Visual Web Developer).
Přehled extenderu DisabledButton
Náš nový extender ovládacího prvku má název DisabledButton extender. Tento extender bude mít tři vlastnosti:
- TargetControlID – TextBox, který ovládací prvek rozšiřuje.
- TargetButtonIID – tlačítko, které je zakázané nebo povolené.
- DisabledText – text, který se na začátku zobrazí v tlačítku. Když začnete psát, tlačítko zobrazí hodnotu vlastnosti Text tlačítka.
Rozšíření DisabledButton připojíte k ovládacímu prvku TextBox a Button. Než začnete psát jakýkoli text, tlačítko se zakáže a textové pole a tlačítko budou vypadat takto:
(Kliknutím zobrazíte obrázek v plné velikosti.)
Jakmile začnete psát text, tlačítko se povolí a textové pole a tlačítko budou vypadat takto:
(Kliknutím zobrazíte obrázek v plné velikosti.)
K vytvoření rozšiřujícího ovládacího prvku je potřeba vytvořit následující tři soubory:
- DisabledButtonExtender.vb – tento soubor je třída ovládacího prvku na straně serveru, který bude spravovat vytváření rozšíření a umožní vám nastavit vlastnosti v době návrhu. Definuje také vlastnosti, které lze nastavit v extenderu. Tyto vlastnosti jsou přístupné prostřednictvím kódu a v době návrhu a odpovídají vlastnostem definovaným v souboru DisableButtonBehavior.js.
- DisabledButtonBehavior.js – do tohoto souboru přidáte veškerou logiku klientského skriptu.
- DisabledButtonDesigner.vb – tato třída umožňuje funkce v době návrhu. Tuto třídu potřebujete, pokud chcete, aby extender ovládacího prvku správně fungoval s Designer Visual Studio nebo Visual Web Developer.
Rozšiřující ovládací prvek se tedy skládá z ovládacího prvku na straně serveru, chování na straně klienta a třídy návrháře na straně serveru. V následujících částech se dozvíte, jak vytvořit všechny tři tyto soubory.
Vytvoření vlastního webu a projektu extenderu
Prvním krokem je vytvoření projektu a webu knihovny tříd v sadě Visual Studio nebo Visual Web Developer. V projektu knihovny tříd vytvoříme vlastní extender a na webu ho otestujeme.
Začněme webem. K vytvoření webu použijte tento postup:
- Vyberte možnost nabídky Soubor, Nový web.
- Vyberte šablonu webu ASP.NET .
- Nový web pojmenujte Web1.
- Klikněte na tlačítko OK .
Dále musíme vytvořit projekt knihovny tříd, který bude obsahovat kód rozšiřujícího ovládacího prvku:
- Vyberte možnost nabídky Soubor, Přidat, Nový projekt.
- Vyberte šablonu Knihovna tříd .
- Pojmenujte novou knihovnu tříd názvem CustomExtenders.
- Klikněte na tlačítko OK .
Po dokončení těchto kroků by okno Průzkumník řešení mělo vypadat jako Na obrázku 1.
Obrázek 01: Řešení s webem a projektem knihovny tříd (kliknutím zobrazíte obrázek v plné velikosti)
Dále musíte přidat všechny potřebné odkazy na sestavení do projektu knihovny tříd:
Klikněte pravým tlačítkem na projekt CustomExtenders a vyberte možnost nabídky Přidat odkaz.
Vyberte kartu .NET.
Přidejte odkazy na následující sestavení:
- System.Web.dll
- System.Web.Extensions.dll
- System.Design.dll
- System.Web.Extensions.Design.dll
Vyberte kartu Procházet.
Přidejte odkaz na sestavení AjaxControlToolkit.dll. Toto sestavení se nachází ve složce, do které jste stáhli sadu AJAX Control Toolkit.
To, že jste přidali všechny správné odkazy, můžete ověřit tak, že kliknete pravým tlačítkem na projekt, vyberete Vlastnosti a kliknete na kartu Reference (viz Obrázek 2).
Obrázek 02: Složka reference s požadovanými odkazy (kliknutím zobrazíte obrázek v plné velikosti)
Vytvoření extenderu vlastního ovládacího prvku
Teď, když máme knihovnu tříd, můžeme začít vytvářet náš rozšiřující ovládací prvek. Začněme holými kostmi vlastní třídy rozšiřujícího ovládacího prvku (viz výpis 1).
Výpis 1 – MyCustomExtender.vb
Imports AjaxControlToolkit
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
<Assembly: System.Web.UI.WebResource("CustomExtenders.MyControlBehavior.js", "text/javascript")>
<ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class MyControlExtender
Inherits ExtenderControlBase
<ExtenderControlProperty()> _
<DefaultValue("")> _
Public Property MyProperty() As String
Get
Return GetPropertyValue("MyProperty", "")
End Get
Set(ByVal value As String)
SetPropertyValue("MyProperty", value)
End Set
End Property
End Class
U rozšiřující třídy ovládacího prvku ve výpisu 1 si všimnete několika věcí. Nejprve si všimněte, že třída dědí ze základní třídy ExtenderControlBase. Všechny rozšiřující ovládací prvky AJAX Control Toolkit jsou odvozeny z této základní třídy. Základní třída například zahrnuje vlastnost TargetID, která je povinnou vlastností každého rozšiřujícího ovládacího prvku.
Dále si všimněte, že třída obsahuje následující dva atributy související s klientským skriptem:
- WebResource – způsobí, že soubor bude zahrnut jako vložený prostředek do sestavení.
- ClientScriptResource – způsobí načtení prostředku skriptu ze sestavení.
Atribut WebResource se používá k vložení souboru javascriptu MyControlBehavior.js do sestavení při kompilaci vlastního extenderu. Atribut ClientScriptResource se používá k načtení skriptu MyControlBehavior.js ze sestavení při použití vlastního extenderu na webové stránce.
Aby webResource a ClientScriptResource atributy fungovaly, musíte zkompilovat soubor JavaScript jako vložený prostředek. V okně Průzkumník řešení vyberte soubor, otevřete seznam vlastností a přiřaďte vlastnost Akce sestavení hodnotu Vložený prostředek.
Všimněte si, že rozšiřující ovládací prvek obsahuje také TargetControlType atribut. Tento atribut slouží k určení typu ovládacího prvku, který je rozšířen rozšířením ovládacího prvku. V případě výpisu 1 se rozšiřující ovládací prvek používá k rozšíření textového pole.
Nakonec si všimněte, že vlastní extender obsahuje vlastnost s názvem MyProperty. Vlastnost je označena atributem ExtenderControlProperty. Metody GetPropertyValue() a SetPropertyValue() se používají k předání hodnoty vlastnosti z rozšiřujícího ovládacího prvku na straně serveru chování na straně klienta.
Pojďme do toho implementovat kód pro náš extender DisabledButton. Kód tohoto extenderu najdete ve výpisu 2.
Výpis 2 – DisabledButtonExtender.vb
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports AjaxControlToolkit
<Assembly: System.Web.UI.WebResource("CustomExtenders.DisabledButtonBehavior.js", "text/javascript")>
<Designer(GetType(DisabledButtonExtender))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
Inherits ExtenderControlBase
<ExtenderControlProperty()> _
<DefaultValue("")> _
<IDReferenceProperty(GetType(Button))> _
Public Property TargetButtonID() As String
Get
Return GetPropertyValue("TargetButtonID", "")
End Get
Set(ByVal value As String)
SetPropertyValue("TargetButtonID", value)
End Set
End Property
<ExtenderControlProperty(), DefaultValue("")> _
Public Property DisabledText() As String
Get
Return GetPropertyValue("DisabledText", "")
End Get
Set(ByVal value As String)
SetPropertyValue("DisabledText", value)
End Set
End Property
End Class
Extender DisabledButton ve výpisu 2 má dvě vlastnosti s názvem TargetButtonID a DisabledText. IDReferenceProperty použitý na TargetButtonID vlastnost brání v přiřazení čehokoli jiného než ID ovládacího prvku Button k této vlastnosti.
WebResource a ClientScriptResource atributy přidružují chování na straně klienta umístěné v souboru s názvem DisabledButtonBehavior.js s tímto extenderem. Tento javascriptový soubor probereme v další části.
Vytvoření vlastního chování extenderu
Komponenta rozšiřujícího ovládacího prvku na straně klienta se nazývá chování. Skutečná logika pro zakázání a povolení buttonu je obsažena v chování DisabledButton. Kód JavaScriptu pro chování je součástí výpisu 3.
Výpis 3 – DisabledButton.js
Type.registerNamespace('CustomExtenders');
CustomExtenders.DisabledButtonBehavior = function(element) {
CustomExtenders.DisabledButtonBehavior.initializeBase(this, [element]);
this._targetButtonIDValue = null;
this._disabledTextValue = null;
}
CustomExtenders.DisabledButtonBehavior.prototype = {
initialize : function() {
CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'initialize');
// Initalization code
$addHandler(this.get_element(), 'keyup',
Function.createDelegate(this, this._onkeyup));
this._onkeyup();
},
dispose : function() {
// Cleanup code
CustomExtenders.DisabledButtonBehavior.callBaseMethod(this, 'dispose');
},
// Property accessors
//
get_TargetButtonID : function() {
return this._targetButtonIDValue;
},
set_TargetButtonID : function(value) {
this._targetButtonIDValue = value;
},
get_DisabledText : function() {
return this._disabledTextValue;
},
set_DisabledText : function(value) {
this._disabledTextValue = value;
},
_onkeyup : function() {
var e = $get(this._targetButtonIDValue);
if (e) {
var disabled = ("" == this.get_element().value);
e.disabled = disabled;
if ( this._disabledTextValue) {
if (disabled) {
this._oldValue = e.value;
e.value = this._disabledTextValue;
}
else
{
if(this._oldValue){
e.value = this._oldValue;
}
}
}
}
}
}
CustomExtenders.DisabledButtonBehavior.registerClass('CustomExtenders.DisabledButtonBehavior', AjaxControlToolkit.BehaviorBase);
Soubor JavaScriptu ve výpisu 3 obsahuje třídu na straně klienta s názvem DisabledButtonBehavior. Tato třída, stejně jako její dvojče na straně serveru, obsahuje dvě vlastnosti s názvem TargetButtonID a DisabledText, ke kterým můžete získat přístup pomocí get_TargetButtonID/set_TargetButtonID a get_DisabledText/set_DisabledText.
Metoda initialize() přidruží obslužnou rutinu události keyup k cílovému prvku pro chování. Pokaždé, když do textového pole přidruženého k tomuto chování zadáte písmeno, spustí se obslužná rutina keyup. Obslužná rutina keyup buď povolí nebo zakáže tlačítko v závislosti na tom, jestli textové pole přidružené k chování obsahuje nějaký text.
Nezapomeňte, že soubor JavaScriptu ve výpisu 3 musíte zkompilovat jako vložený prostředek. V okně Průzkumník řešení vyberte soubor, otevřete seznam vlastností a přiřaďte vlastnost Akce sestavení hodnotu Vložený prostředek (viz Obrázek 3). Tato možnost je dostupná v sadě Visual Studio i v sadě Visual Web Developer.
Obrázek 03: Přidání souboru JavaScriptu jako vloženého prostředku (kliknutím zobrazíte obrázek v plné velikosti)
Vytvoření vlastního Designer extenderu
Existuje jedna poslední třída, kterou musíme vytvořit k dokončení našeho extenderu. Potřebujeme vytvořit třídu návrháře ve výpisu 4. Tato třída je nutná k tomu, aby se extender správně choval se Designer Visual Studio/Visual Web Developer.
Výpis 4 – DisabledButtonDesigner.vb
Imports AjaxControlToolkit.Design
Public Class DisabledButtonDesigner
Inherits ExtenderControlBaseDesigner(Of DisabledButtonExtender)
End Class
Přidružíte návrháře ve výpisu 4 k extenderu DisabledButton s atributem Designer. Musíte použít atribut Designer na třídu DisabledButtonExtender takto:
<Designer(GetType(DisabledButtonDesigner))> _
<ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")> _
<TargetControlType(GetType(TextBox))> _
Public Class DisabledButtonExtender
Inherits ExtenderControlBase
Použití vlastního extenderu
Teď, když jsme dokončili vytváření extenderu ovládacího prvku DisabledButton, je čas ho použít na našem webu ASP.NET. Nejprve musíme do sady nástrojů přidat vlastní extender. Postupujte takto:
- Otevřete stránku ASP.NET poklikáním na stránku v okně Průzkumník řešení.
- Klikněte pravým tlačítkem myši na panel nástrojů a vyberte možnost nabídky Zvolit položky.
- V dialogovém okně Zvolit položky sady nástrojů přejděte na sestavení CustomExtenders.dll.
- Kliknutím na tlačítko OK zavřete dialogové okno.
Po dokončení těchto kroků by se měl na panelu nástrojů zobrazit extender ovládacího prvku DisabledButton (viz Obrázek 4).
Obrázek 04: DisabledButton v sadě nástrojů (kliknutím zobrazíte obrázek v plné velikosti)
Dále musíme vytvořit novou stránku ASP.NET. Postupujte takto:
- Vytvořte novou stránku ASP.NET s názvem ShowDisabledButton.aspx.
- Přetáhněte ScriptManager na stránku.
- Přetáhněte ovládací prvek TextBox na stránku.
- Přetáhněte ovládací prvek Tlačítko na stránku.
- V okno Vlastnosti změňte vlastnost ID tlačítka na hodnotu btnSave a vlastnost Text na hodnotu Save*.
Vytvořili jsme stránku se standardním ovládacím ASP.NET TextBox a Button.
Dále musíme rozšířit ovládací prvek TextBox o extender DisabledButton:
- Výběrem možnosti Přidat rozšíření otevřete dialogové okno Průvodce rozšířením (viz Obrázek 5). Všimněte si, že dialogové okno obsahuje náš vlastní extender DisabledButton.
- Vyberte extender DisabledButton a klikněte na tlačítko OK .
Obrázek 05: Dialogové okno Průvodce rozšířením (kliknutím zobrazíte obrázek v plné velikosti)
Nakonec můžeme nastavit vlastnosti extenderu DisabledButton. Vlastnosti extenderu DisabledButton můžete upravit úpravou vlastností ovládacího prvku TextBox:
- V Designer vyberte Textové pole.
- V okno Vlastnosti rozbalte uzel Extender (viz Obrázek 6).
- Přiřaďte hodnotu Save vlastnosti DisabledText a hodnotu btnSave vlastnosti TargetButtonID.
Obrázek 06: Nastavení vlastností rozšiřujícího modulu (kliknutím zobrazíte obrázek v plné velikosti)
Při spuštění stránky (stisknutím klávesy F5) je ovládací prvek Tlačítko zpočátku zakázán. Jakmile do textového pole začnete zadávat text, aktivuje se ovládací prvek Tlačítko (viz Obrázek 7).
Obrázek 07: Rozšíření DisabledButton v akci (kliknutím zobrazíte obrázek v plné velikosti)
Souhrn
Cílem tohoto kurzu bylo vysvětlit, jak rozšířit sadu NÁSTROJŮ AJAX Control Toolkit o vlastní rozšiřující ovládací prvky. V tomto kurzu jsme vytvořili jednoduchý extender ovládacího prvku DisabledButton. Tento extender jsme implementovali vytvořením třídy DisabledButtonExtender, chování JavaScriptu DisabledButtonBehavior a DisabledButtonDesigner třídy. Podobnou sadu kroků provedete při každém vytvoření vlastního rozšiřujícího ovládacího prvku.