使用 ColorPicker 控件扩展程序 (C#)

  • 项目

由 Microsoft

ColorPicker 是一种 ASP.NET AJAX 扩展器，它通过弹出控件中的 UI 提供客户端颜色选取功能。 它可以附加到任何 ASP.NET TextBox 控件。 它。

本教程的目的是说明如何使用 AJAX 控件工具包 ColorPicker 控件扩展器。 ColorPicker 控件扩展器显示一个弹出对话框，可用于选择颜色。 每当你想要提供直观的用户界面供用户选择颜色时，ColorPicker 都很有用。

使用 ColorPicker 控件扩展器扩展 TextBox 控件

例如，假设你想要创建一个网站，使访问者能够创建自定义名片。 访问者可以输入企业卡的文本并选择颜色。 清单 1 中的 ASP.NET 页包含两个名为 txtCardText 和 txtCardColor 的 TextBox 控件。 提交表单时，将显示所选值 (见图 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 控件扩展器来创建更好的用户体验。 将焦点移动到 TextBox 控件时，ColorPicker 会显示颜色对话框 (请参阅图 2) 。

ColorPicker 控件扩展器

图 02：ColorPicker 控件扩展器 (单击以查看全尺寸图像)

需要完成两个步骤才能将 ColorPicker 控件扩展程序与清单 1 中的窗体配合使用：

  1. 将 ScriptManager 控件添加到页面
  2. 将 ColorPicker 控件扩展程序添加到页面

必须先将 ScriptManager 添加到页面，然后才能使用 ColorPicker。 添加 ScriptManager 的合适位置位于打开的服务器端 <表单> 标记下方。 可以将 ScriptManager 从工具箱拖到绘图页上， (ScriptManager 位于“AJAX 扩展”选项卡) 下。 或者，可以在打开的服务器端表单标记下的“源视图”中键入以下标记：

<asp：ScriptManager ID=“ScriptManager1” runat=“server” />

将 ColorPicker 控件扩展器添加到页面的最简单方法是在设计视图中。 如果将鼠标悬停在 txtCardColor TextBox 上，将显示一个智能任务选项，可用于添加扩展程序 (请参阅图 3) 。 如果选择此选项，则会显示扩展程序向导 (请参阅图 4) 。

添加扩展程序

图 03：添加扩展器 (单击以查看全尺寸图像)

使用扩展程序向导选择控件扩展程序

图 04：使用扩展程序向导选择控件扩展程序 (单击以查看全尺寸图像)

可以选择 ColorPicker 扩展器以使用 ColorPicker 扩展器扩展 txtCardColor TextBox。 单击“确定”，关闭对话框。

进行这些更改后，页面的源类似于清单 2。

清单 2 - 使用 ColorPicker) 的 CreateCard.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" />
            
        <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 - 页面上导致显示颜色选取器对话框的按钮的 ID。
  • PopupPosition - 颜色选取器对话框相对于目标控件的位置。 可能的值为 Absolute、Center、BottomLeft、BottomRight、TopLeft、TopRight、Right 和 Left (默认值为 BottomLeft) 。
  • SampleControlId - 显示所选颜色的控件的 ID。
  • 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 Label 控件的背景色。

ColorPicker PopupButtonID 属性用于将“选取颜色”按钮与 ColorPicker 扩展器相关联。 为 PopupButtonID 属性提供值时，当目标控件具有焦点时，颜色选取器对话框将不再显示。 必须单击该按钮才能显示对话框。

SampleControlID 属性用于将显示所选颜色的控件与 ColorPicker 相关联。 ColorPicker 将此控件的背景色更改为当前所选颜色。

显示带有按钮的颜色选取器对话框

图 05：显示带有按钮的颜色选取器对话框 (单击以查看全尺寸图像)

总结

本教程介绍了如何使用 ColorPicker 控件扩展器显示弹出颜色选取器对话框。 首先，我们了解了焦点移动到 TextBox 控件时如何显示对话框。 接下来，你学习了如何创建一个按钮，该按钮在单击按钮时显示颜色选取器对话框。

下一页