Vytvoření vlastního rozšiřujícího ovládacího prvku AJAX Control Toolkit (C#)

Článek
07/13/2023

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 dozvíte, jak vytvořit vlastní rozšíření ovládacího prvku AJAX Control Toolkit. Vytvoříme jednoduchý, ale užitečný nový extender, který změní stav tlačítka z zakázaného na povolený, když zadáte text do textového pole. Po přečtení tohoto kurzu budete moct rozšířit 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 sady Visual Web Developer).

Přehled zařízení DisabledButton Extender

Náš nový rozšiřující ovládací prvek má název DisabledButton extender. Tento extender bude mít tři vlastnosti:

TargetControlID – textové pole, 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, zobrazí tlačítko hodnotu vlastnosti Text tlačítka.

Rozšíření DisabledButton připojíte k ovládacímu prvku TextBox a Button. Před zadáním libovolného textu je tlačítko zakázané a textové pole a tlačítko vypadají 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šíření ovládacího prvku potřebujeme vytvořit následující tři soubory:

DisabledButtonExtender.cs – tento soubor je třída ovládacího prvku na straně serveru, který bude spravovat vytváření extenderu 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.cs – tato třída umožňuje funkci v době návrhu. Tuto třídu potřebujete, pokud chcete, aby rozšiřující ovládací prvek správně fungoval s Designer Visual Studio nebo Visual Web Developer.

Rozšiřující modul ovládacího prvku 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 tyto tři 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. Web vytvoříte takto:

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 obrázek 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 do projektu knihovny tříd přidat všechny potřebné odkazy na sestavení:

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í:
1. System.Web.dll
2. System.Web.Extensions.dll
3. System.Design.dll
4. 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.

Po dokončení těchto kroků by složka Reference projektu knihovny tříd měla vypadat jako Obrázek 2.

Obrázek 02: Složka odkazů s požadovanými odkazy (kliknutím zobrazíte obrázek v plné velikosti)

Vytvoření vlastního extenderu 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 ovládacího prvku extenderu (viz Výpis 1).

Výpis 1 – MyCustomExtender.cs

using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

[assembly: System.Web.UI.WebResource("CustomExtenders.MyControlBehavior.js", "text/javascript")]

namespace CustomExtenders
{
    [ClientScriptResource("CustomExtenders.MyControlBehavior", "CustomExtenders.MyControlBehavior.js")]
    [TargetControlType(typeof(TextBox))]
    public class MyControlExtender : ExtenderControlBase
    {

        [ExtenderControlProperty]
        [DefaultValue("")]
        public string MyProperty
        {
            get
            {
                return GetPropertyValue("MyProperty", "");
            }
            set
            {
                SetPropertyValue("MyProperty", value);
            }
        }
    }
}

U třídy rozšiřujícího ovládacího prvku v seznamu 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. Například základní třída zahrnuje TargetID vlastnost, která je požadovaná 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 atributy WebResource a ClientScriptResource fungovaly, musíte zkompilovat javascriptový soubor jako vložený prostředek. Vyberte soubor v okně Průzkumník řešení, otevřete seznam vlastností a přiřaďte hodnotu Vložený prostředek vlastnosti Akce sestavení.

Všimněte si, že rozšiřující ovládací prvek obsahuje také TargetControlType atribut. Tento atribut se používá 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 k rozšíření textového pole používá rozšiřující ovládací prvek.

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šíření 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.cs

using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

[assembly: System.Web.UI.WebResource("CustomExtenders.DisabledButtonBehavior.js", "text/javascript")]

namespace CustomExtenders
{
    [ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")]
    [TargetControlType(typeof(TextBox))]
    public class DisabledButtonExtender : ExtenderControlBase
    {
        [ExtenderControlProperty]
        [DefaultValue("")]
        [IDReferenceProperty(typeof(Button))]
        public string TargetButtonID
        {
            get
            {
                return GetPropertyValue("TargetButtonID", "");
            }
            set
            {
                SetPropertyValue("TargetButtonID", value);
            }
        }

        [ExtenderControlProperty]
        [DefaultValue("")]
        public string DisabledText
        {
            get
            {
                return GetPropertyValue("DisabledText", "");
            }
            set
            {
                SetPropertyValue("DisabledText", value);
            }
        }

    }
}

Extender DisabledButton v 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 této vlastnosti.

Atributy WebResource a ClientScriptResource 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í tlačítka 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 v seznamu 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ázvy TargetButtonID a DisabledText, ke kterým můžete přistupovat 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 klávesové zkratky tlačítko buď povolí nebo zakáže 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. Vyberte soubor v okně Průzkumník řešení, 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 aplikaci 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, abychom dokončili náš extender. 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 s Visual Studio nebo Visual Web Developer Designer.

Výpis 4 – DisabledButtonDesigner.cs

using System.Web.UI.WebControls;
using System.Web.UI;

namespace CustomExtenders
{
    class DisabledButtonDesigner : AjaxControlToolkit.Design.ExtenderControlBaseDesigner
    {
    }
}

Návrháře ve výpisu 4 přidružíte k extenderu DisabledButton s atributem Designer. Na třídu DisabledButtonExtender musíte použít atribut Designer takto:

[Designer(typeof(DisabledButtonDesigner))]
[ClientScriptResource("CustomExtenders.DisabledButtonBehavior", "CustomExtenders.DisabledButtonBehavior.js")]
[TargetControlType(typeof(TextBox))]
public class DisabledButtonExtender : ExtenderControlBase
{

Použití vlastního extenderu

Teď, když jsme dokončili vytváření rozšíření ovládacího prvku DisabledButton, je čas ho použít na našem webu ASP.NET. Nejprve musíme do panelu 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 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 CustomExtenders.dll sestavení.
Kliknutím na tlačítko OK dialogové okno zavřete.

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 na panelu 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 extender 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 Extendery (viz obrázek 6).
Přiřaďte hodnotu Save do 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 začnete zadávat text do textového pole, ovládací prvek Tlačítko se povolí (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 můžete rozšířit sadu 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 Třídy DisabledButtonDesigner. Podobnou sadu kroků provedete při každém vytvoření vlastního rozšiřujícího ovládacího prvku.

Předchozí Další

Sdílet prostřednictvím