Udostępnij za pośrednictwem

Korzystanie z rozszerzenia kontrolki ColorPicker (C#)

  • Artykuł

autor: Microsoft

ColorPicker to rozszerzenie ASP.NET AJAX, które zapewnia funkcję wybierania kolorów po stronie klienta za pomocą interfejsu użytkownika w kontrolce wyskakujących okienek. Można go dołączyć do dowolnej kontrolki TextBox ASP.NET. To.

Celem tego samouczka jest wyjaśnienie, jak można użyć rozszerzenia kontrolki ColorPicker zestawu narzędzi AJAX Control Toolkit. Rozszerzenie kontrolki ColorPicker wyświetla okno dialogowe wyskakujące, które umożliwia wybranie koloru. Platforma ColorPicker jest przydatna za każdym razem, gdy chcesz zapewnić intuicyjny interfejs użytkownika, aby użytkownik wybrał kolor.

Rozszerzanie kontrolki TextBox za pomocą rozszerzenia kontrolki ColorPicker

Załóżmy na przykład, że chcesz utworzyć witrynę internetową, która umożliwia odwiedzającym tworzenie dostosowanych wizytówek. Odwiedzający mogą wprowadzić tekst wizytówki i wybrać kolor. Strona ASP.NET na liście 1 zawiera dwie kontrolki TextBox o nazwie txtCardText i txtCardColor. Po przesłaniu formularza zostaną wyświetlone wybrane wartości (zobacz Rysunek 1).

Prosty formularz do tworzenia wizytówki

Rysunek 01. Prosty formularz do tworzenia wizytówki (kliknij, aby wyświetlić obraz pełnowymiarowy)

Lista 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>

Formularz w liście 1 działa, ale nie zapewnia doskonałego środowiska użytkownika. Użytkownik musi wpisać kolor w polu tekstowym. Jeśli użytkownik chce wyspecjalizowanego koloru — na przykład tylko odpowiedni odcień zielonego grochu — użytkownik musi ustalić kod koloru HTML bez żadnej pomocy.

Możesz użyć rozszerzenia kontrolki ColorPicker, aby utworzyć lepsze środowisko użytkownika. Podczas przenoszenia fokusu do kontrolki TextBox jest wyświetlane okno dialogowe ColorPicker (zobacz Rysunek 2).

Rozszerzenie kontrolki ColorPicker

Rysunek 02. Rozszerzenie kontrolki ColorPicker (kliknij, aby wyświetlić obraz pełnowymiarowy)

Należy wykonać dwa kroki, aby użyć rozszerzenia kontrolki ColorPicker z formularzem w liście 1:

  1. Dodawanie kontrolki ScriptManager do strony
  2. Dodawanie rozszerzenia kontrolki ColorPicker do strony

Aby można było użyć narzędzia ColorPicker, musisz dodać element ScriptManager do swojej strony. Dobrym miejscem do dodania skryptu ScriptManager jest tuż poniżej otwierającego tagu formularza> po stronie <serwera. Element ScriptManager można przeciągnąć na stronę z przybornika (element ScriptManager znajduje się na karcie Rozszerzenia AJAX). Możesz też wpisać następujący tag w widoku źródłowym pod tagiem formularza po stronie serwera otwierającego:

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

Najprostszym sposobem dodania rozszerzenia kontrolki ColorPicker do strony jest widok projektu. Jeśli umieścisz kursor myszy nad polem textBox txtCardColor, zostanie wyświetlona opcja inteligentnego zadania umożliwiająca dodanie rozszerzenia (zobacz Rysunek 3). Jeśli wybierzesz tę opcję, zostanie wyświetlony Kreator rozszerzania (zobacz Rysunek 4).

Dodawanie rozszerzenia

Rysunek 03. Dodawanie rozszerzenia (kliknij, aby wyświetlić obraz pełnowymiarowy)

Wybieranie rozszerzenia kontrolki za pomocą Kreatora rozszerzania

Rysunek 04. Wybieranie rozszerzenia kontrolki za pomocą Kreatora rozszerzania (kliknij, aby wyświetlić obraz pełnowymiarowy)

Rozszerzenie ColorPicker można wybrać, aby rozszerzyć pole textBox txtCardColor za pomocą rozszerzenia ColorPicker. Kliknij przycisk OK, aby zamknąć okno dialogowe.

Po wprowadzeniu tych zmian źródło strony będzie wyglądać następująco: Lista 2.

Lista 2 — CreateCard.aspx (z rozwiązaniem ColorPicker)

<%@ 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>

Zwróć uwagę, że strona zawiera teraz kontrolkę ColorPickerExtender wyświetlaną bezpośrednio poniżej kontrolki txtCardColor TextBox. Kontrolka ColorPickerExtender rozszerza kontrolkę txtCardColor, tak aby wyświetlała okno dialogowe selektora kolorów.

Uruchamianie okna dialogowego selektora kolorów za pomocą przycisku

Rozszerzenie ColorPicker obsługuje następujące właściwości:

  • PopupButtonId — identyfikator przycisku na stronie, który powoduje wyświetlenie okna dialogowego selektora kolorów.
  • PopupPosition — pozycja względem kontrolki docelowej okna dialogowego selektora kolorów. Możliwe wartości to Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right i Left (wartość domyślna to BottomLeft).
  • SampleControlId — identyfikator kontrolki, która wyświetla wybrany kolor.
  • SelectedColor — początkowy kolor wybrany przez platformę ColorPicker.

Możesz użyć tych właściwości, aby dostosować sposób wyświetlania okna dialogowego selektora kolorów i sposobu wyświetlania wybranego koloru. Strona w liście 3 ilustruje, jak można użyć kilku z tych właściwości.

Lista 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>

Strona w liście 3 zawiera przycisk Wybierz kolor (patrz Rysunek 5). Po kliknięciu tego przycisku okno dialogowe selektora kolorów pojawi się nad polem tekstowym. Jeśli wybierzesz kolor z okna dialogowego, wybrany kolor pojawi się jako kolor tła kontrolki lblSample Label.

Właściwość ColorPicker PopupButtonID służy do skojarzenia przycisku Wybierz kolor z rozszerzeniem ColorPicker. Po podaniu wartości właściwości PopupButtonID okno dialogowe selektora kolorów nie będzie już wyświetlane, gdy kontrolka docelowa ma fokus. Musisz kliknąć przycisk, aby wyświetlić okno dialogowe.

Właściwość SampleControlID służy do kojarzenia kontrolki, która wyświetla wybrany kolor z platformą ColorPicker. ColorPicker zmienia kolor tła tej kontrolki na aktualnie wybrany kolor.

Wyświetlanie okna dialogowego selektora kolorów za pomocą przycisku

Rysunek 05. Wyświetlanie okna dialogowego selektora kolorów z przyciskiem (Kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

W tym samouczku przedstawiono sposób używania rozszerzenia kontrolki ColorPicker do wyświetlania okna dialogowego selektora kolorów wyskakujących. Najpierw sprawdziliśmy, jak można wyświetlić okno dialogowe po przeniesieniu fokusu do kontrolki TextBox. Następnie przedstawiono sposób tworzenia przycisku, który wyświetla okno dialogowe selektora kolorów po kliknięciu przycisku.

Dalej