ASP.NET 颜色选择器
4.17/5 (9投票s)
一个用于选择网页安全颜色的 Web 控制。
引言
在一个最近的项目中，我需要一个 ASP.NET 颜色选择器。我创建了一个 ASP.NET 2.0 WebControl，它渲染一些 HTML、CSS 和 JavaScript。不需要包含任何外部文件或库。
Using the Code
解压缩 zip 文件并在 Visual Studio 2005 中打开解决方案。运行测试页面 (default.aspx)。
颜色选择器是一个包含许多单元格的表格，这些单元格具有（网页安全）背景颜色。
colorpickerdiv += "<div id=\"colorpicker\">";
colorpickerdiv += " <table cellpadding=\"0\" cellspacing=\"0\" " +
"onclick=\"javascript:ColorPickerOnColorClick(event);\">";
string[] websafecolorlist = {"FFFFFF","CCCCCC","999999","666666","333333",
"000000","FFCC00","FF9900","FF6600","FF3300","FFFFFF",
"FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","99CC00",
"FFFFFF","FFFFFF","FFFFFF","FFFFFF","CC9900","FFCC33",
"FFCC66","FF9966","FF6633","CC3300","FFFFFF","FFFFFF",
"FFFFFF","FFFFFF","CC0033","CCFF00","CCFF33","333300",
"666600","999900","CCCC00","FFFF00","CC9933","CC6633",
"330000","660000","990000","CC0000","FF0000","FF3366",
"FF0033","99FF00","CCFF66","99CC33","666633","999933",
"CCCC33","FFFF33","996600","996600","663333","993333",
"CC3333","FF3333","CC3366","FF6699","FF0066","66FF00",
"99FF66","66CC33","669900","999966","CCCC66","FFFF66",
"996633","663300","996666","CC6666","FF6666","990033",
"CC3399","FF66CC","FF0099","33FF00","66FF33","339900",
"66CC00","99FF33","CCCC99","FFFF99","CC9966","CC6600",
"CC9999","FF9999","FF3399","CC0066","990066","FF33CC",
"FF00CC","00CC00","33CC00","336600","669933","99CC66",
"CCFF99","FFFFCC","FFCC99","FF9933","FFCCCC","FF99CC",
"CC6699","993366","660033","CC0099","330033","33CC33",
"66CC66","00FF00","33FF33","66FF66","99FF99","CCFFCC",
"FFFFFF","FFFFFF","FFFFFF","CC99CC","996699","993399",
"990099","663366","660066","006600","336633","009900",
"339933","669966","99CC99","FFFFFF","FFFFFF","FFFFFF",
"FFCCFF","FF99FF","FF66FF","FF33FF","FF00FF","CC66CC",
"CC33CC","003300","00CC33","006633","339966","66CC99",
"99FFCC","CCFFFF","3399FF","99CCFF","CCCCFF","CC99FF",
"9966CC","663399","330066","9900CC","CC00CC","00FF33",
"33FF66","009933","00CC66","33FF99","99FFFF","99CCCC",
"0066CC","6699CC","9999FF","9999CC","9933FF","6600CC",
"660099","CC33FF","CC00FF","00FF66","66FF99","33CC66",
"009966","66FFFF","66CCCC","669999","003366","336699",
"6666FF","6666CC","666699","330099","9933CC","CC66FF",
"9900FF","00FF99","66FFCC","33CC99","33FFFF","33CCCC",
"339999","336666","006699","003399","3333FF","3333CC",
"333399","333366","6633CC","9966FF","6600FF","00FFCC",
"33FFCC","00FFFF","00CCCC","009999","006666","003333",
"3399CC","3366CC","0000FF","0000CC","000099","000066",
"000033","6633FF","3300FF","00CC99","FFFFFF","FFFFFF",
"FFFFFF","FFFFFF","0099CC","33CCFF","66CCFF","6699FF",
"3366FF","0033CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
"3300CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
"FFFFFF","00CCFF","0099FF","0066FF","0033FF","FFFFFF",
"FFFFFF","FFFFFF","FFFFFF","FFFFFF"};
int rowcounter = 0;
bool needrowstart = true;
for (int i = 0; i < websafecolorlist.Length; i ++)
{
if (needrowstart)
{
needrowstart = false;
colorpickerdiv += " <tr> ";
}
string color = "#" + websafecolorlist[i];
colorpickerdiv += " <td style=\"background-color:" +
color + "\"></td>";
if (rowcounter++ == 16)
{
colorpickerdiv += " </tr>";
needrowstart = true;
rowcounter = 0;
}
}
colorpickerdiv += " </table>";
colorpickerdiv += "</div>";
if (!Page.ClientScript.IsClientScriptBlockRegistered("colorpickerdiv"))
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"colorpickerdiv", colorpickerdiv);
上面的代码有点冗余，可以简化，但颜色的数组组合在一起形成了一张不错的图像。该表格被一个不可见的 div 包围。当以下代码被触发时，表格将可见
opendialogscript += " var ActiveColorPicker;\n";
opendialogscript += " function OpenColorPicker(id)\n";
opendialogscript += " {\n";
opendialogscript += " ActiveColorPicker=id; \n";
opendialogscript += " var colorpickerdiv=document." +
"getElementById('colorpicker');\n";
opendialogscript += " colorpickerdiv.style.visibility='visible';\n";
opendialogscript += " colorpickerdiv.style.left=ActiveColorPicker" +
".style.left+ActiveColorPicker.style.width;\n";
opendialogscript += " colorpickerdiv.style.top=window.event.y;\n";
opendialogscript += " colorpickerdiv.style.left=window.event.x;\n";
opendialogscript += " }\n";
并在点击颜色后隐藏
opendialogscript += " function ColorPickerOnColorClick(e)\n";
opendialogscript += " {\n";
opendialogscript += " var td = (e.target) ? e.target : e.srcElement; \n";
opendialogscript += " var color=td.style.backgroundColor; \n";
opendialogscript += " ActiveColorPicker.style.backgroundColor=color;\n";
opendialogscript += " ActiveColorPicker.style.color=color;\n";
opendialogscript += " ActiveColorPicker.value=color;\n";
opendialogscript += " var colorpickerdiv=document.getElementById('colorpicker');\n";
opendialogscript += " colorpickerdiv.style.visibility='hidden';\n";
opendialogscript += " }\n";
以下代码用于渲染一个可点击的矩形。控件的 ID 使用 this.UniqueID 渲染。为了存储颜色值，我使用文本框的 value 属性。
protected override void Render(HtmlTextWriter output)
{
string html = "";
string onclicker="onclick=\"javascript:OpenColorPicker(" +
this.UniqueID + ");\"";
html += "<input style=\"background-color:" +
SelectedHexValue + ";color:" + SelectedHexValue +
";\" class=\"colorpickerbutton\" " +
onclicker + " readonly=\"true\" class=\"lookupmo" +
"dalvalue\" type=\"text\" name=\"" +
this.UniqueID + "\" value=\"" +
SelectedHexValue + "\">";
output.Write(html);
}
在发布回发后检索值是在 LoadPostData 中完成的
public bool LoadPostData(String postDataKey, NameValueCollection values)
{
SelectedHexValue = values[this.UniqueID];
return false;
}
可以使用 SelectedHexValue 属性获取或设置颜色代码。如果您需要一个 Color 对象或 RGB int，只需添加将 HEX 代码转换的属性即可。
Label1.Text = ColorPicker1.SelectedHexValue;
关注点
关于 Web 控件：LoadPostData 是一个棘手的事件。为了使其触发，您必须将其中一个 HTML 控件命名为与控件的 UniqueID 完全相同！
如果您对代码有任何意见，请随时通过以下方式给我发送电子邮件：colorpicker@toverstudio.nl。
历史
- 2006-07-11：发布 1.0。