在 ASP.NET2.0 下制作自定义可视控件

自定义可视控件，由 <div> 标签作为模板生成。

  属性：

    Text:控件显示的文字内容
    Href:控件显示的文字的超链接地址
    Target:控件显示超链接的目标框架
    StyleBackGround:控件背景样式
    StyleMouseOut:控件鼠标离开后样式
    StyleMouseOver:控件鼠标移上后样式
    StyleLine:控件分隔线样式
    DisplayPipe:控件是否显示分隔符"|"
    Width:控件宽度
   
  用途：
 
    作为类似链接或按钮标签，构成导航栏菜单条使用。
   
  功能：
 
    显示提示文字，可设置链接，可以响应鼠标覆盖/离开事件，变换控件外观。可以显示或隐藏分割符。 

代码:

App_Code/SelfControls.cs:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace SelfControls
{
    public class MainControl : System.Web.UI.WebControls.WebControl
    {
        #region 定义变量及其默认值
        private string text = "";
        private string href = "";
        private string target = "_self";
        private string stylebackground = "";
        private string stylemouseout = "";
        private string stylemouseover = "";
        private string styleline = "";
        private bool displayPipe = true;
        #endregion

        #region 构造函数
        public MainControl(): base(HtmlTextWriterTag.Div)
        {

        }
        #endregion

        #region 定义属性

        //控件显示的文字内容
        public string Text
        {
            get
            {
                return text;
            }

            set
            {
                text = value;
            }
        }

        //控件显示的文字的超链接地址
        public string Href
        {
            get
            {
                return href;
            }

            set
            {
                href = value;
            }
        }

        //控件显示超链接的目标框架
        public string Target
        {
            get
            {
                return target;
            }
            set
            {
                target = value;
            }
        }
       
        //控件背景样式
        public string StyleBackGround
        {
            get
            {
                return stylebackground;
            }
            set
            {
                stylebackground = value;
            }
        }

        //控件鼠标离开后样式
        public string StyleMouseOut
        {
            get
            {
                return stylemouseout;
            }
            set
            {
                stylemouseout = value;
            }
        }

        //控件鼠标移上后样式
        public string StyleMouseOver
        {
            get
            {
                return stylemouseover;
            }
            set
            {
                stylemouseover = value;
            }
        }

        //控件分隔线样式
        public string StyleLine
        {
            get
            {
                return styleline;
            }
            set
            {
                styleline = value;
            }
        }       

        //控件是否显示分隔符"|"
        public bool DisplayPipe
        {
            get
            {
                return displayPipe;
            }

            set
            {
                displayPipe = value;
            }
        }

        //控件宽度
        public override Unit Width
        {
            get
            {
                return base.Width;
            }
            set
            {
                base.Width = value;
            }
        }
        #endregion

        ///将自定义样式写到 HTTP 输出流中:
        protected override void AddAttributesToRender(HtmlTextWriter output)
        {
            output.Write("<!-自定义控件示例-->");
            output.AddAttribute(HtmlTextWriterAttribute.Class, StyleBackGround);
            output.AddStyleAttribute("width", Width.ToString());

            base.AddAttributesToRender(output);
        }

        /// 呈现控件的方法 RenderContents
        protected override void RenderContents(HtmlTextWriter output)
        {
            //定义样式
            output.AddStyleAttribute(HtmlTextWriterStyle.Width, "10px");
            output.AddStyleAttribute(HtmlTextWriterStyle.FontSize, "12px");
            output.AddStyleAttribute(HtmlTextWriterStyle.FontFamily, "宋体");
            output.RenderBeginTag(HtmlTextWriterTag.Span);

            output.AddAttribute(HtmlTextWriterAttribute.Class, StyleMouseOut);
            output.AddAttribute("onmouseout", "this.className='" + StyleMouseOut + "'");
            output.AddAttribute("onmouseover", "this.className='" + StyleMouseOver + "'");
            output.AddAttribute(HtmlTextWriterAttribute.Href, Href);
            output.AddAttribute(HtmlTextWriterAttribute.Target, Target);
            output.RenderBeginTag(HtmlTextWriterTag.A);

            output.Write(text);
            output.RenderEndTag();
            output.RenderEndTag();

            //定义分隔符及样式
            if (DisplayPipe)
            {
                output.AddAttribute(HtmlTextWriterAttribute.Class, StyleLine);
                output.RenderBeginTag(HtmlTextWriterTag.Span);
                output.Write("|");
                output.RenderEndTag();
            }
            else
            {
                output.RenderBeginTag(HtmlTextWriterTag.Span);
                output.Write(" ");
                output.RenderEndTag();
            }

            //使用默认逻辑来呈现子控件
            base.RenderContents(output);
        }
    }
}

调用示例:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Top.aspx.cs" Inherits="Top" %>
<%@ Register TagPrefix="SelfControl" Namespace="SelfControls" %>
<%@ OutputCache Duration="1000" VaryByParam="None" %>
<html>
<head>
    <title></title>
    <LINK REL='stylesheet' TYPE='text/css' HREF='styles/style.css'></LINK>
    <LINK REL='stylesheet' TYPE='text/css' HREF='styles/SelfControl.css'></LINK>
</head>

<body leftmargin="0" topmargin="0">

<table cellspacing="0" cellpadding="0" width="100%" border="0">
    <tr>
        <td width="100%">
            <table height="22" cellspacing="0" cellpadding="0" width="100%" border="0">
                <tr>
                    <td bgcolor="#4b92d9" width="30%" height="22"><span style="font-size:12px; color: #ffffff;">自定义控件测试页面</span></td>
                    <td style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#4B92D9', endColorStr='#CEDFF6', gradientType='1')" width="35%"> </td>
                    <td style="filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#CEDFF6', endColorStr='#1E77D3', gradientType='1')" width="35%"> </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table id="Table5" width0="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
    <SelfControl:MainControl ID="CustomControl1" runat="server"
       StyleBackGround="GrayBackGround"
       StyleMouseOut="GrayStyleOut"
       StyleMouseOver="GrayStyleOver"
       StyleLine="GrayLine"
       DisplayPipe="true"
       Target="MainFrame"
       Text="测试主页"
       Href="bott.aspx">
     </SelfControl:MainControl>
   </td>
  <td>
    <SelfControl:MainControl ID="Customcontrol2" runat="server"
       StyleBackGround="GrayBackGround"
       StyleMouseOut="GrayStyleOut"
       StyleMouseOver="GrayStyleOver"
       StyleLine="GrayLine"
       DisplayPipe="true"
       Target="MainFrame"
       Text="电脑学习网"
       Href="http://www.why100000.com/" />
  </td>
  <td>
    <SelfControl:MainControl ID="Customcontrol3" runat="server"
       StyleBackGround="GrayBackGround"
       StyleMouseOut="GrayStyleOut"
       StyleMouseOver="GrayStyleOver"
       StyleLine="GrayLine"
       DisplayPipe="true"
       Target="MainFrame"
       Text="电脑《问吧》"
       Href="http://bbs.why100000.com" />
  </td>
  <td>
    <SelfControl:MainControl ID="Customcontrol4" runat="server"
       StyleBackGround="BlueBackGround"
       StyleMouseOut="BlueStyleOut"
       StyleMouseOver="BlueStyleOver"
       StyleLine="BlueLine"
       DisplayPipe="false"
       Target="_blank"
       Text="网络学院"
       Href="http://edu.why100000.com/edu" />
  </td>
  <td width="100%" bgcolor="#f1f1f1"></td> 
</tr>
</table>

</body>
</html>