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

От Майкрософт

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

Цель этого руководства — объяснить, как использовать расширитель элементов управления AJAX Control Toolkit ColorPicker. Расширитель элемента управления 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 отображает диалоговое окно для выбора цвета при перемещении фокуса на текстовое поле (см. рисунок 2).

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

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

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

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

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

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

Самый простой способ добавить расширитель элемента управления ColorPicker на страницу — в режиме проектирования. Если навести указатель мыши на txtCardColor TextBox, появится параметр смарт-задачи, позволяющий добавить расширитель (см. рис. 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). При нажатии этой кнопки диалоговое окно выбора цветов появится над текстовым полем. Если выбрать цвет из диалогового окна, выбранный цвет отображается как цвет фона элемента управления lblSample Label.

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

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

Отображение диалогового окна выбора цвета с помощью кнопки

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

Сводка

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

Далее

  • Last updated on