Cutting Edge:使用客户端行为扩展ASP.NET DataGrid 控件-ASP教程,组件开发

dhtml behavior快速指南

dhtml behavior在我们的扩展的 datagrid 控件中扮演非常重要的角色。 一会儿你就会注意到：我并没有使用dave在他的原始form中使用的方法，为了使 behavior 在 asp.net 控件可以工作，我做了一点更改。 虽然使用这个修改后的组件不需要任何 javascript 技能，但是了解一下 dhtml behavior的技术可以使你更好的理解服务器端和客户端协同工作的机制。

dhtml behavior 就是利用 css（cascading style sheet层叠样式表）的 behavior 样式，绑定到一个 html 标记的脚本组件 对于那些不支持css或不识别 behavior 样式的老浏览器中，将自动怱略未识别的样式。要想深入了解 dhtml 请参见： asp?target=/mind/0499/htmlbehaviors/htmlbehaviors.asp”>scripting evolves to a more powerful technology: html behaviors in depth 一个 dhtml behavior 就是一个 javascrip 函数集，这个函数集中加入了一些由特殊句法定义的公共成员。一般来讲，这些公共成员是一些属性和事件，有时也可能是方法;behavior 工作在现有的 html 元素之上， 允许你覆盖和扩展 html 元素的 behavior 。方法是：behavior 把它自己定义的代码关联到 dhtml 的事件上。例如，提供拖动列功能的 behavior 操作 onmousedown 和 onmouseup 事件。而且，所有关键的 dhtml behavior 都支持 oncontentready 事件，当 html subtree(在指定元素内的所有 html)被解析完成时将激发这一事件。当 oncontentreadey 事件激发时，是初始化 behavior 的好时机。

其实，behavior 的核心就是向 microsoft internet explorer（4.0或更高版本）浏览器暴露一系列接口的 com 对象。最终就是你可以把它写成 c++ 元组件或 html 组件（htc）文本文件 htc文件可以布署在承载应用它们的文件（html，asp，asp.net）的服务器上，不需要在客户端安装。

下面代码表示如何通过使用 “dragdrop.htc”behavior 添加一个具有可拖动列功能的<table&gl;标签：

这里“dragdrop.htc”文件必须和使用它的文件布署于同一目录。

可拖动的 datagrid

在阅读了 dave massy 的文章之后，我下载了 dragdrop.htc 示例组件，然后我尝试在一个实验页面中把它绑定到 datagrid 组件。如下：

奇怪的是，组件没起作用。考虑到 datagrid 在客户端完全是一个 table 这一不争事实，我决定比较一下 dave 的示例 table 的代码和由 asp.net datagrid 生成的 html 代码有什么不同。我注意到：在 asp.net 1.x 中的 datagrid 生成的 html table 不包含 thead 和 tbody 元素。而这两个元素恰恰是示例 behavior 起作用的关键因素。虽然拖动和下压列并不直接需要 thead 和 tbody 两个元素，但是这两个元素 非常有助于定位 table 的表头和表体。

有两个办法解决这一问题：重写一个不使用 thead 和 tbody 的 behavior ;自己写一个生成带 thead 和 tbody 标签的 table 的 datagrid 控件。 对于一个象我这样的 asp.net 开发者来说，我相信开发一个自定义控件比编写一个 behavior 要容易。因为至少我们可以进行有效的进行代码根踪调试。 于是，我新建一个 visual studio .net 解决方案，添加一个 asp.net 应用程序工程和一个 web 控件库工程。就有了下面的新 datagrid 控件的雏形：

	[toolboxdata("<{0}:datagrid runat=\"server\" />")]
	public class datagrid : system.web.ui.webcontrols.datagrid
	{
		public datagrid() : base()
		{
			enablecolumndrag = true;
			dragcolor = color.empty;
			hitcolor = color.empty;
		}
		...
	}
			

构造器初始化三个公共自定义属性：enablecolumndrag、dragcolor和hitcolor。enablecolumndrag 是一个表示是否可以拖动列的布尔属性。 如果此属性设置成 false ，自定义 datagrid 控件将不会添加拖动列 behavior。另外两个属性分别表示被拖动的列的背景色和将下压列的颜色。

注意这两个颜色属性不会影响 datagrid 服务器控件的任何逻辑。他们是那种仅输出 html 值（这个值只对客户端 behavior 有用）的服务器端属性。 这两个属性的值被呈现为由 grid 的生成的 <table> 标签的自定义属性。datagrid 的标记代码是在控件的 render 方法中创建的,如下：

	protected override void render(htmltextwriter output)
	{
		// sets attributes for the dragdrop behavior
		if (enablecolumndrag)
		{
			if (dragcolor != color.empty)
				attributes["dragcolor"] = dragcolor.name.tolower();
			if (hitcolor != color.empty)
				attributes["hitcolor"] =
	    
	
		    hitcolor.name.tolower(); // capture
		the default
		output
			of the datagrid stringwriter
				writer = 
			 new stringwriter(); htmltextwriter
				buffer = 

			       
			 new  htmltextwriter(writer); base.render(buffer);
			string gridmarkup =  
			
			 writer.tostring();  //

			parse the markup to insert missing tags //

			find the first occurrence of >  and insert