Použití extenderu ovládacího prvku ColorPicker (C#)

Článek
07/13/2023

ColorPicker je extender ASP.NET AJAX, který poskytuje funkci výběru barev na straně klienta s uživatelským rozhraním v místním ovládacím prvku. Lze jej připojit k libovolnému ovládacímu prvku ASP.NET TextBox. To je.

Cílem tohoto kurzu je vysvětlit, jak můžete použít rozšiřující ovládací prvek ColorPicker sady nástrojů AJAX Control Toolkit. Extender ovládacího prvku ColorPicker zobrazí automaticky otevírané dialogové okno, které vám umožní vybrat barvu. ColorPicker je užitečný, když chcete uživateli poskytnout intuitivní uživatelské rozhraní, aby si vybral barvu.

Rozšíření ovládacího prvku TextBox pomocí extenderu ovládacího prvku ColorPicker

Představte si například, že chcete vytvořit web, který návštěvníkům umožní vytvářet přizpůsobené vizitky. Návštěvníci můžou zadat text vizitky a vybrat barvu. Stránka ASP.NET ve výpisu 1 obsahuje dva ovládací prvky TextBox s názvem txtCardText a txtCardColor. Při odeslání formuláře se zobrazí vybrané hodnoty (viz obrázek 1).

Obrázek 01: Jednoduchý formulář pro vytvoření vizitky (kliknutím zobrazíte obrázek v plné velikosti)

Výpis 1 – CreateCard.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // Show the panel
        pnlResults.Visible = true;
        
        // Show the selected values
        lblSelectedText.Text = txtCardText.Text;             
        lblSelectedColor.Text = txtCardColor.Text;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            Runat="server" />
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>
 
            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Formulář v seznamu 1 funguje, ale neposkytuje skvělé uživatelské prostředí. Uživatel musí do textového pole zadat barvu. Pokud chce uživatel speciální barvu – například správný odstín hrachové zelené – musí bez pomoci zjistit kód barvy HTML.

K vytvoření lepšího uživatelského prostředí můžete použít extender ovládacího prvku ColorPicker. Při přesunutí fokusu na ovládací prvek TextBox (viz Obrázek 2) zobrazí ColorPicker dialogové okno barvy.

Obrázek 02: Rozšiřující ovládací prvek ColorPicker (kliknutím zobrazíte obrázek v plné velikosti)

Pokud chcete použít extender ovládacího prvku ColorPicker s formulářem ve výpisu 1, musíte provést dva kroky:

Přidání ovládacího prvku ScriptManager na stránku
Přidání extenderu ovládacího prvku ColorPicker na stránku

Než budete moct použít ColorPicker, musíte na stránku přidat ScriptManager. Vhodné místo pro přidání scriptmanageru je přímo pod počáteční značku formuláře> na straně <serveru. ScriptManager můžete přetáhnout na stránku z panelu nástrojů (SkriptManager se nachází na kartě Rozšíření AJAX). Případně můžete do zobrazení zdroje pod počáteční značku formuláře na straně serveru zadat následující značku:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

Nejjednodušší způsob, jak přidat extender ovládacího prvku ColorPicker na stránku, je v návrhovém zobrazení. Pokud najedete myší na textové pole txtCardColor, zobrazí se možnost inteligentní úlohy, která vám umožní přidat extender (viz Obrázek 3). Pokud vyberete tuto možnost, zobrazí se Průvodce rozšířením (viz Obrázek 4).

Obrázek 03: Přidání rozšiřujícího prvku (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 04: Výběr rozšiřujícího ovládacího prvku pomocí Průvodce rozšířením (kliknutím zobrazíte obrázek v plné velikosti)

Můžete vybrat extender ColorPicker rozšířit txtCardColor TextBox s extenderEm ColorPicker. Kliknutím na OK zavřete dialogové okno.

Po provedení těchto změn bude zdroj stránky vypadat takto: Výpis 2.

Výpis 2 – CreateCard.aspx (s ColorPickerem)

<%@ Page Language="C#" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // Show the panel
        pnlResults.Visible = true;
        
        // Show the selected values
        lblSelectedText.Text = txtCardText.Text;             
        lblSelectedColor.Text = txtCardColor.Text;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
            
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>
 
            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Všimněte si, že stránka nyní obsahuje ColorPickerExtender ovládací prvek, který se zobrazí přímo pod txtCardColor TextBox ovládací prvek. ColorPickerExtender ovládací prvek rozšiřuje txtCardColor ovládací prvek tak, aby zobrazoval dialogové okno pro výběr barvy.

Spuštění dialogového okna Výběr barvy pomocí tlačítka

Extender ColorPicker podporuje následující vlastnosti:

PopupButtonId – ID tlačítka na stránce, které způsobuje, že se zobrazí dialogové okno pro výběr barvy.
PopupPosition – pozice dialogového okna pro výběr barvy vzhledem k cílovému ovládacímu prvku. Možné hodnoty jsou Absolutní, Střed, BottomLeft, BottomRight, TopLeft, TopRight, Right a Left (výchozí hodnota je BottomLeft).
SampleControlId – ID ovládacího prvku, který zobrazuje vybranou barvu.
SelectedColor – počáteční barva vybraná v ColorPickeru.

Pomocí těchto vlastností můžete přizpůsobit způsob zobrazení dialogového okna pro výběr barvy a zobrazení vybrané barvy. Stránka ve výpisu 3 ukazuje, jak můžete použít několik těchto vlastností.

Výpis 3 – CreateCardButton.aspx

<%@ Page Language="C#" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // Show the panel
        pnlResults.Visible = true;
        
        // Show the selected values
        lblSelectedText.Text = txtCardText.Text;             
        lblSelectedColor.Text = txtCardColor.Text;
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Create a Business Card</h1>
    
        <asp:Label 
            ID="lblCardText" 
            Text="Card Text"
            AssociatedControlID="txtCardText"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardText"
            Runat="server" />
            
        <br /><br />    
    
        <asp:Label 
            ID="lblCardColor" 
            Text="Card Color"
            AssociatedControlID="txtCardColor"
            runat="server" />
        <br />
        <asp:TextBox
            ID="txtCardColor"
            AutoCompleteType="None"
            Runat="server" />
        <asp:Button
            ID="btnPickColor"
            Text="Pick Color"
            Runat="server" />
        <asp:Label
            ID="lblSample"
            Runat="Server"> Sample </asp:Label>        
        <cc1:ColorPickerExtender 
            ID="txtCardColor_ColorPickerExtender"  
            TargetControlID="txtCardColor"
            PopupButtonID="btnPickColor"
            PopupPosition="TopRight"
            SampleControlID="lblSample"            
            Enabled="True" 
            runat="server">
        </cc1:ColorPickerExtender>
            
        <br /><br />
        
        <asp:Button
            ID="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />

        <asp:Panel ID="pnlResults" Visible="false" runat="server">
 
            <h2>Your Selection</h2>
 
            Selected Card Text:
            <asp:Label
                ID="lblSelectedText"
                Runat="server" />
            <br />        
            Selected Card Color:
            <asp:Label
                ID="lblSelectedColor"
                Runat="server" />
        
        </asp:Panel>
    
    </div>
    </form>
</body>
</html>

Stránka ve výpisu 3 obsahuje tlačítko Vybrat barvu (viz Obrázek 5). Po kliknutí na toto tlačítko se nad textovým polem zobrazí dialogové okno pro výběr barvy. Pokud vyberete barvu z dialogového okna, zobrazí se vybraná barva jako barva pozadí ovládacího prvku lblSample Popisek.

Vlastnost ColorPicker PopupButtonID slouží k přidružení tlačítka Vybrat barvu k extenderu ColorPicker. Když zadáte hodnotu vlastnosti PopupButtonID, dialogové okno pro výběr barvy se již nezobrazuje, pokud je fokus na cílovém ovládacím prvku. Kliknutím na tlačítko zobrazíte dialogové okno.

Vlastnost SampleControlID slouží k přidružení ovládacího prvku, který zobrazuje vybranou barvu s ColorPicker. ColorPicker změní barvu pozadí tohoto ovládacího prvku na aktuálně vybranou barvu.

Obrázek 05: Zobrazení dialogového okna pro výběr barvy pomocí tlačítka (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

V tomto kurzu jste zjistili, jak použít extender ovládacího prvku ColorPicker k zobrazení dialogového okna pro výběr barvy automaticky otevírané obrazovky. Nejprve jsme prozkoumali, jak můžete dialogové okno zobrazit, když se fokus přesune na ovládací prvek TextBox. Dále jste se dozvěděli, jak vytvořit tlačítko, které při kliknutí na tlačítko zobrazí dialogové okno pro výběr barvy.

Další

Sdílet prostřednictvím

Použití extenderu ovládacího prvku ColorPicker (C#)

Rozšíření ovládacího prvku TextBox pomocí extenderu ovládacího prvku ColorPicker

Spuštění dialogového okna Výběr barvy pomocí tlačítka

Souhrn

Váš názor

Další materiály