ASP.NET控件开发入门系列之PlanItem控件

在portal项目第一迭代中，我主要负责控件库这一块的工作。所谓知识需要分享，阅读丰富人生。我希望和大家分享一下控件经验并相互探讨以求共同进步，一起成长。

以下是所需控件和其功能描述：

名称	说明	备注
ScollGridView	带滚动的GridVIew，与asp.net GridView有别，Asp.net GridView在数据过多时采用的是分页，而ScollGridView在数据过多时采用垂直滚动条解决	运用于各种统计页面
PlanItem	具体表现为图片的宽度为进度的百分比。	运用于进度的表示
StatusItem	利用不同的图片与文字表现不同的状态
BiasItem	将偏差的正负值转换为落后与超前及相应的色彩	用于表示偏差方向

今天先讲一下PlanItem控件吧

首先，我们先回忆一下VS2010中自带的.NET控件都有些什么特征，如属性、事件等等，并且都可以自己设置相关属性和编写事件实现的相关代码...是吧，而现在我们要写控件也要让它拥有这些特征，暴露出其相关的属性和事件，我们会用到面向对象编程里的继承，继承属性、事件、方法...在我看来，好的控件应该满足活字印刷中的一些特征，如灵活性、可扩展性、可复用性...另外最重要的一点，也是我们不得不考虑的问题——兼容性。
关于兼容性问题可以参考：Portal项目的Hackhttp://blog.youkuaiyun.com/zouyujie1127/article/details/6903278

1、打开VS2010，新建一个空白的解决方案。

2、在空白解决方案中新建类库，类库名为PlanItem，选择PlanItem并右键单击“引用”，选择“添加引用”，添加System.Web和System.Web.Extension的引用

在PlanItem类库中新建一个类MyPlanItem.cs用于描述PlanItem控件

3、介绍一下控件开发中常用的属性的设计时特性

[Category("显示")]：设置该控件在属性面板中显示的组名。

[Description("进度文本，保留两位小数")]：设置属性说明，在选中该控件后，可以在属性面板的底部看到属性的说明。
[DefaultValue("0.00")]：设置属性的默认值。

4、首先，我应该知道控件其实也是一个类，而控件的最终基类就是Control类，在.NET控件开发中，我们常用到三个类，它们分别是Control、WebControl、CompositeControl（复合控件）这里我们让其继承Control，WebControl是Control的一个子类，所以其具有比Control更多的属性，如Style样式等等...

在接下来的.NET控件开发中，我们会使用一个Render（）的重写方法，从而将控件输出到页面中去，要知道，.NET控件的最终显示形式就是以HTML标记显示的。

所以，我们可以在要开发什么控件之前，先用Dreamver8将其画出来，然后在对其进行编码实现。

最后，将PlanItem.cs编译成dll类库，然后在工具箱面板对其进行添加后，就可以像使用.NET控件一样将其拖放到将要放置的位置进行使用了。

编译命令，大家还记得吧。（csc /target:library PlanItem.cs)

protected override void Render(HtmlTextWriter writer) 160. { 161. string div1 = "<div style='position:static;float:left;width:" + this.DivWidth + "px;height:" + this.DivHeight + "px;z-index:1;background-image: url(" + this.BgImageDown + ");_background-image: none;'/>"; 162. writer.Write(div1); 163. string div2 = "<div style='position:static;width:" + this.ImgWidth + "%;height:" + this.DivHeight + "px;z-index:2;float:left;background-image: url(" + this.BgImageUp + ");_background-image: none; '/>"; 164. writer.Write(div2); 165. string div3 = "<div style='position:static;margin-left:auto;margin-right:auto;width:" + DivWidth + "px;height:" + DivHeight + "px;line-height:" + DivHeight + "px;z-index:3; text-align:center; vertical-align:middle;color:" + TextColor + ";font-size:12px;'>"; 166. writer.Write(div3); 167. writer.Write(this.Text + "%"); 168. writer.Write("</div>"); 169. }

细心的朋友可能会发现，在Render(HtmlTextWriter writer)方法中，出现了 _background-image: none;这是为了解决IE6中的侵吞现象而设的。如下图（左边为正常显示，右边为IE6中侵吞现象的结果）：

IE6的侵吞现象：两个设置了背景的div叠加在一起，哪怕上面那个div的宽度小于下面的那个div的宽度，上面的div也会将下面的div完全覆盖。由于我这里使用到了三个div，无法解决其侵吞现象，如果是两个div的话可以在代码加上 override：hiddren 即可，这里我让其在IE6中不显示进度背景只显示进度文字了(为了过测试部那一关）。这里我简单提一下，解决IE6中侵吞现象最直接的办法是将IE升级到7.0，微软于两年前已经宣布IE6正式淘汰，呼吁全世界的朋友使用更高版本的IE浏览器。

不知道大家发现了没有，我这个控件使用的是三个div叠加，从而实现项目进度的显示，下面两个div都设置了背景图片，最下面的div表示总宽度，中间的那个div的背景图片的宽度表示的是项目的进度，而最上面的div用文字显示项目进度（居中显示），这里我使用到了position:static;而不是让父div相对定位，子div绝对定位。这是有原因的，因为考虑到这个控件会嵌套使用在collGridView控件中，如果不设置为position:static;一旦出现滚动，则在谷歌浏览器中div会飘起来，出现如下现象：

这个控件的实现比较简单，难点事浏览器的兼容性问题。临渊羡鱼，不如退而结网，动手试一下吧！

MyPlanItem.cs源码：

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.ComponentModel; namespace PlanItem { public class MyPlanItem : Control { private string text; [Category("显示")] [Description("进度文本，保留两位小数")] [DefaultValue("0.00")] public string Text { get { if (text== null||text=="") { return "0.00"; } else { decimal num = Convert.ToDecimal(text); int index = num.ToString().IndexOf('.'); if (index < 1) { return Math.Round(num, 2).ToString() + ".00"; } else { int sum = (num.ToString().Length - index - 1); if (sum == 1) { return Math.Round(num, 2).ToString() + "0"; } else { return Math.Round(num, 2).ToString(); } } } } set { text= value; } } [Category("显示")] [Description("进度图片宽度")] [DefaultValue(0)] public UInt64 ImgWidth { get { return (Text =="0.00") ? 0 : Convert.ToUInt64(Convert.ToDouble(text)); } } [Category("显示")] [Description("背景图片路径")] public string BgImageDown { get { string s = (string)ViewState["ImageDownUrl"]; return s; } set { ViewState["ImageDownUrl"] = value; } } [Category("显示")] [Description("进度图片路径")] public string BgImageUp { get { string s = (string)ViewState["ImageUpUrl"]; return s; } set { ViewState["ImageUpUrl"] = value; } } private int divWidth; [Category("显示")] [Description("宽度")] [DefaultValue(100)] public int DivWidth { get { return divWidth; } set { divWidth = value; } } private int divHeight; [Category("显示")] [Description("高度")] [DefaultValue(30)] public int DivHeight { get { return divHeight; } set { divHeight = value; } } private string textColor; [Category("显示")] [Description("文本颜色")] [DefaultValue("black")] public string TextColor { get { return textColor; } set { textColor = value; } } private string bgColor; [Category("显示")] [Description("进度背景颜色")] [DefaultValue("blue")] public string BgColor { get { return bgColor; } set { bgColor = value; } } //将控件呈现到浏览器中显示 protected override void Render(HtmlTextWriter writer) { string div1 = "<div style='position:static;float:left;width:" + this.DivWidth + "px;height:" + this.DivHeight + "px;z-index:1;background-image: url(" + this.BgImageDown + ");_background-image: none;'/>"; writer.Write(div1); string div2 = "<div style='position:static;width:" + this.ImgWidth + "%;height:" + this.DivHeight + "px;z-index:2;float:left;background-image: url(" + this.BgImageUp + ");_background-image: none; '/>"; writer.Write(div2); string div3 = "<div style='position:static;margin-left:auto;margin-right:auto;width:" + DivWidth + "px;height:" + DivHeight + "px;line-height:" + DivHeight + "px;z-index:3; text-align:center; vertical-align:middle;color:" + TextColor + ";font-size:12px;'>"; writer.Write(div3); writer.Write(this.Text + "%"); writer.Write("</div>"); } } }