postback,设计器支持 ASP.NET 2.0颜色选取器自定义控件

分享于 

12分钟阅读

Web开发

  繁體

介绍

这里有很多JavaScript颜色选择器控件可以用,但是无法容易分发和完全支持设计器。 此外,将JavaScript颜色选取器集成到 ASP.NET 应用程序中是一个非常糟糕的体验。 因这里,我真的觉得在工具箱中需要一个颜色选择器控件,但是很容易使用,但是很强大。 我的一个颜色选择器是给用户一个绑定的控件,他可以轻松地从工具箱中拖放。 这里外,该控件应该是因为每次选择颜色时它都不是 postback。

本文不是关于颜色选择器,但是我尝试在 ASP.NET 2.0中创建和部署自定义控件。

要求

除非你必须有 Visual Studio 2005版本中可以用的一个版本,否则不需要使用这里控件。 另外,我将该控件打包为VSI文件。 因此,如果你的电脑中安装了 managementstudio express,那么VSI软件包可能无法正确安装。 原因是它覆盖了一些注册表设置。 因此,你可能需要执行以下步骤:

  • 在 HKEY_LOCAL_MACHINESOFTWAREMicrosoftVisualStudio8.0Packages 下
    如果要使用 Visual Studio 8.0位置,请更改代码CodeBase值,以便使用 比如 file:///D:Program FilesMicrosoft Visual Studio 8 Common7IDEMicrosoft.VisualStudio.ToolBoxControlInstaller.dll。
  • 在 HKEY_LOCAL_MACHINESOFTWAREMicrosoftVisualStudio8.0Packages 下
    在 {36839529-3AF3-47fa-8194-F4A3FA9F0ED7}SatelliteDll 中,更改路径值以指向 Common7IDE folder D:Program FilesMicrosoft Visual Studio 8 Common7IDE。
  • 打开 Visual Studio 命令提示,并运行 devenv/设置。

或者,你可以在 Visual Studio的工具菜单的"添加工具箱项"选项中引用 colorpickerLib.dll,以便在工具箱中包含控件。

在控件后面

构建控件的第一件事是构造颜色矩阵,这非常简单。 创建三个变量 rgb。 将初始值设置为5,并构造一个嵌套循环来减少每个迭代中的每个值。 将该值转换为十六进制,并将值 inside 设置为适当的行的位置。 在水平方向上,它将有 18个框,垂直,12个框。 颜色已经分为两集,使较轻的集填充第一部分,颜色集填充它的他半部分。

int onrow = 1;int oncol = 1;int count = 1;
string s = string.Empty;
string set1 = string.Empty;
string set2 = string.Empty;for (int r = 5; r> = 0; r--)
{
 for (int g = 5; g> = 0; g--)
 {
 for (int b = 5; b> = 0; b--)
 {
 if (oncol == 1) s += "<tr>n";
 s += "t<td onmouseover="colorOver(this);"" + 
 "onclick="colorClick(this);" style="cursor:pointer;" +
 "background:#" + ReturnHex(r) + ReturnHex(g) + 
 ReturnHex(b) + ";" class=cc></td>n";
 oncol++;
 if (oncol> = 19)
 {
 s += "</tr>n";
 oncol = 1;
 if (onrow % 2 == 0)
 {
 set2 += s;
 }
 else {
 set1 += s;
 }
 s = "";
 onrow++;
 }
 count++;
 }
 }
}

这个挑战性部分,我必须用一个可能高代价的z 索引( ) 呈现矩阵,以便其他控件不会重叠。 另外,我必须确保当用户选择一个颜色时,它用适当的十六进制值填充文本框,而不将页面发送回服务器。 为了达到这个目的,我创建了一个包含HTML和 div ID ( 它就会把矩阵)的JavaScript文件,我在资源文件中嵌入了它。

为了嵌入资源和获取文件的引用,我必须执行以下操作:

  • 右键单击该文件,将生成操作设置为 embedded resource
  • 添加一行( [ 程序集:WebResource ("colorpickerlib默认的。js","文本/javascript"。PerformSubstitution = true ) ] ) 到 assemblyInfo.cs 文件。

现在,ASP.NET 有一个叫做 GetWebResourceUrl的酷函数,它在运行时从程序集提取出内容。 我将在 CreateChildControls 方法的范围内使用这些代码,在宿主页面中添加了包含必需的JS脚本的下列行:

ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptInclude("popscript", 
 cs.GetWebResourceUrl(this.GetType(), 
 "ColorPickerLib.default.js"));

我创建了颜色矩阵,并创建了JS脚本来渲染它。 在这个过程中,我需要把创建图像按钮。浮动矩阵 div 和将颜色值从矩阵设置为适当的文本框( 没有 postback )的内容。 为这里,我将自定义控件分为两部分,一个将保存图像按钮,将呈现包含矩阵HTML的内容 div。 我的目标是从主流程中分离矩阵呈现逻辑,以便维护它。 虽然这不是必需的,但是我可以通过创建一个矩阵呈现方法来返回相同的HTML。 但是,在这种情况下,我将不能使用 ASP.NET 2.0复合控件特性。 例如我将手动编写数据控件的持久化逻辑。

首先,我们必须从矩阵呈现控件中获取内容,它位于 ColorPickerPalate.cs。 在每个Web控件中都有称为 RenderContents的方法,它接受对 HtmlWriter的引用作为参数。 如果创建 HtmlWriter 对象并将它的传递给 RenderContents 方法,则将使用控件输出的HTML填充它。 所以,我使用这个技巧在 string 中编写控件的内容。 然后,我将字符串 inside 呈现为浮动 div

StringWriter builder = new StringWriter();
Html32TextWriter writer = new Html32TextWriter(builder);
ColorPickerPalate details = new ColorPickerPalate(this);
details.RenderControl(writer);
builder.Close();
string popup = builder.ToString();
popup = popup.Replace("r", string.Empty);
popup = popup.Replace("n", string.Empty);
popup = popup.Replace("t", string.Empty);
popup = HttpUtility.HtmlEncode(popup);

你必须注意到我编码了HTML输出。 这是为了避免JavaScript错误( 我在调用 showDiv 函数时遇到了一个JavaScript错误,因为有HTML标记),所以在传递HTML之前,我将它编码并通过 showDiv 函数传递它。

// Inside showDiv Function (Part of the code)_Source = docSource; 
document.getElementById(element).innerHTML = divText;
displayFloatingDiv(element, "Color Picker", 300, 200, x, y);

displayFloatingDiv 函数中,内容被解码并设置为浮动 div

originalDivHTML = document.getElementById(divId).innerHTML;
originalDivHTML = decode(originalDivHTML);
document.getElementById(divId).innerHTML = 
 addHeader + originalDivHTML; //+ originalDivHTML;

最后,我必须链接 showDiv 函数,而且当用户单击矩阵时,返回值将转到相应的文本框。 这里我做了一个简单的技巧,这是 inside的CreateChildControl 方法。 我添加了一个函数来查找指定控件的客户端 ID。 实际上,函数遍历页控件层次结构以查找为它的提供服务器端ID的控件。 找到控件后,它将客户端of传递给JavaScript函数,该函数将客户端of存储在控件( 如果有多个控制,事情就不会被搞乱) 范围的全局变量中。

FindControl 中,代码如下所示:

if (Root.ID == Id)
 return Root;
foreach (Control Ctl in Root.Controls)
{
 Control FoundCtl = FindControlRecursive(Ctl, Id);
 if (FoundCtl!= null)
 return FoundCtl;
}returnnull;

和 inside的CreateChildControl,我必须具有以下代码的block:

if (!base.DesignMode)
{
 try {
 TextBox controlToFind = null;
 if (this.Page.Master!= null)
 {
 controlToFind = FindControlRecursive(this.Page.Master, 
 _Control.ID) as TextBox;
 }
 else {
 controlToFind = FindControlRecursive(this.Page, 
 _Control.ID) as TextBox;
 }
 docSource = controlToFind.UniqueID;
 string popup = CreateColorTemlate();
 _Link.Attributes.Add("onclick", "showDiv( 'windowContent','" + 
 docSource + "',"" + popup + "")");
 }
 catch {
 thrownew Exception("ControlToSet Property can not be left blank");
 }

另外,我必须单独遍历 PagePage.Master,如母版页中,控件层次结构在 Page.Master 中找到。 在这种情况下,Page.Controls 所以,我应该有一个条件。

部署控件

在 ASP.NET 2.0中,你可以通过创建VSI文件轻松地分发自定义控件。 这个过程很简单。 创建一个文件夹,放置所有内容 inside,并创建一个保存内容信息的Manifest。 finally,压缩文件夹,并将文件扩展名从ZIP更改为 msp430. 完成。

在 Manifest 中,对于自定义控件,我必须编写以下信息:

<?xmlversion="1.0"encoding="utf-8"?><VSContentxmlns="http://schemas.microsoft.com/developer/vscontent/2005"><Content><FileName>ColorPickerLib.dll</FileName><DisplayName>Color Picker</DisplayName><Description>Postback less easy to use color picker</Description><FileContentType>Toolbox Control</FileContentType><ContentVersion>2.0</ContentVersion></Content></VSContent>

用法

将控件从工具箱拖放到页上。 从文本框列表中,选择 ControlToSet 属性中适当的一个。 按 F5.

修订

  • July 11,2006 - 支持完整的IE 支持
  • Nov 11,2006 - 补丁( 适用于 Mozilla )
  • Aug 20,2008 - 母版页修复( Firefox 和 IE ) [User request ]
  • Sept 11,2008 - 演示更新

控制  asp-net  SUP  设计  POST  挖掘  
相关文章