Использование расширителя элемента управления ColorPicker (C#)

Статья
07/13/2023

ColorPicker — это расширитель ASP.NET AJAX, предоставляющий функции выбора цвета на стороне клиента с помощью пользовательского интерфейса во всплывающем элементе управления. Его можно присоединить к любому элементу управления TextBox ASP.NET. Это.

Цель этого руководства — объяснить, как использовать расширитель элемента управления ColorPicker набора элементов управления AJAX. Расширитель элемента управления ColorPicker отображает всплывающее диалоговое окно, позволяющее выбрать цвет. ColorPicker полезен всякий раз, когда требуется предоставить пользователю интуитивно понятный пользовательский интерфейс для выбора цвета.

Расширение элемента управления TextBox с помощью расширителя элемента управления ColorPicker

Представьте, например, что вы хотите создать веб-сайт, который позволяет посетителям создавать настраиваемые визитные карточки. Посетители могут ввести текст для бизнес-карта и выбрать цвет. Страница ASP.NET в листинге 1 содержит два элемента управления TextBox с именами txtCardText и txtCardColor. При отправке формы отображаются выбранные значения (см. рис. 1).

Рис. 01. Простая форма для создания бизнес-карта (щелкните для просмотра полноразмерного изображения)

Листинг 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>

Форма в листинге 1 работает, но не обеспечивает удобное взаимодействие с пользователем. Пользователь должен ввести цвет в текстовое поле. Если пользователю нужен специализированный цвет , например, правильный оттенок зеленого гороха, пользователь должен выяснить html-код цвета без какой-либо помощи.

Чтобы улучшить взаимодействие с пользователем, можно использовать расширитель элемента управления ColorPicker. ColorPicker отображает диалоговое окно цвета при перемещении фокуса на элемент управления TextBox (см. рис. 2).

Рис. 02. Расширитель элемента управления ColorPicker (щелкните для просмотра полноразмерного изображения)

Чтобы использовать расширитель элемента управления ColorPicker с формой, описанной в листинге 1, необходимо выполнить два шага:

Добавление элемента управления ScriptManager на страницу
Добавление расширителя элемента управления ColorPicker на страницу

Прежде чем использовать ColorPicker, необходимо добавить scriptManager на страницу. Хорошее место для добавления ScriptManager находится прямо под открывающим тегом формы> на стороне <сервера. Вы можете перетащить ScriptManager на страницу с панели элементов (scriptManager находится на вкладке Расширения AJAX). Кроме того, можно ввести следующий тег в представление источника под открывающимся тегом формы на стороне сервера:

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

Самый простой способ добавить расширитель элемента управления ColorPicker на страницу — в режиме конструктора. Если навести указатель мыши на элемент textBox txtCardColor, появится параметр смарт-задачи, позволяющий добавить расширитель (см. рис. 3). Если выбран этот параметр, откроется мастер расширителя (см. рис. 4).

Рис. 03. Добавление расширителя (щелкните для просмотра полноразмерного изображения)

Рис. 04. Выбор расширителя элемента управления с помощью мастера расширителя (щелкните для просмотра полноразмерного изображения)

Вы можете выбрать расширитель ColorPicker, чтобы расширить txtCardColor TextBox с помощью расширителя ColorPicker. Нажмите кнопку ОК, чтобы закрыть диалоговое окно.

После внесения этих изменений источник страницы выглядит так, как в листинге 2.

Листинг 2. CreateCard.aspx (с 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>

Обратите внимание, что страница теперь содержит элемент управления ColorPickerExtender, который отображается непосредственно под элементом управления txtCardColor TextBox. Элемент управления ColorPickerExtender расширяет элемент управления txtCardColor, чтобы он отображал диалоговое окно выбора цвета.

Использование кнопки для запуска диалогового окна выбора цвета

Расширитель ColorPicker поддерживает следующие свойства:

PopupButtonId — идентификатор кнопки на странице, которая вызывает появление диалогового окна выбора цвета.
PopupPosition — положение диалогового окна выбора цвета относительно целевого элемента управления. Возможные значения: Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right и Left (по умолчанию — BottomLeft).
SampleControlId — идентификатор элемента управления, отображающего выбранный цвет.
SelectedColor — начальный цвет, выбранный ColorPicker.

Эти свойства можно использовать для настройки отображения диалогового окна выбора цвета и способа отображения выбранного цвета. На странице в листинге 3 показано, как можно использовать некоторые из этих свойств.

Листинг 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>

Страница в листинге 3 содержит кнопку Выбрать цвет (см. рис. 5). При нажатии этой кнопки над элементом TextBox появится диалоговое окно выбора цвета. Если выбрать цвет в диалоговом окне, выбранный цвет будет отображаться в качестве цвета фона элемента управления "Метка lblSample".

Свойство PopupButtonID ColorPicker используется для связывания кнопки Выбрать цвет с расширителем ColorPicker. При указании значения для свойства PopupButtonID диалоговое окно выбора цвета больше не отображается, когда целевой элемент управления находится в фокусе. Для отображения диалогового окна необходимо нажать кнопку .

Свойство SampleControlID используется для связывания элемента управления, отображающего выбранный цвет, с ColorPicker. ColorPicker изменяет цвет фона этого элемента управления на текущий выбранный цвет.

Рис. 05. Отображение диалогового окна выбора цвета с помощью кнопки (Нажмите для просмотра полноразмерного изображения)

Итоги

В этом руководстве вы узнали, как использовать расширитель элемента управления ColorPicker для отображения диалогового окна выбора цвета всплывающего окна. Сначала мы рассмотрели, как можно отобразить диалоговое окно при перемещении фокуса на элемент управления TextBox. Затем вы узнали, как создать кнопку, которая отображает диалоговое окно выбора цвета при нажатии кнопки.

Вперед

Поделиться через

Использование расширителя элемента управления ColorPicker (C#)

Расширение элемента управления TextBox с помощью расширителя элемента управления ColorPicker

Использование кнопки для запуска диалогового окна выбора цвета

Итоги

Обратная связь

Дополнительные ресурсы