使用 ColorPicker 控件扩展器 (VB)
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
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
' Show the panel
pnlResults.Visible = true
' Show the selected values
lblSelectedText.Text = txtCardText.Text
lblSelectedColor.Text = txtCardColor.Text
End Sub
</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) 。
图 02：ColorPicker 控件扩展器 (单击以查看全尺寸图像)
需要完成两个步骤才能将 ColorPicker 控件扩展器与列表 1 中的窗体配合使用：
- 将 ScriptManager 控件添加到页面
- 将 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="VB" %>
<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
' Show the panel
pnlResults.Visible = true
' Show the selected values
lblSelectedText.Text = txtCardText.Text
lblSelectedColor.Text = txtCardColor.Text
End Sub
</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="VB" %>
<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
' Show the panel
pnlResults.Visible = true
' Show the selected values
lblSelectedText.Text = txtCardText.Text
lblSelectedColor.Text = txtCardColor.Text
End Sub
</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 控件时如何显示对话框。 接下来，你学习了如何创建一个按钮，用于在单击该按钮时显示颜色选取器对话框。
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈