ASP.NET简单的等级星自定义控件

在ASP.NET WebForm 中常常需要我们自定义控件来实现特定的功能，比如分页控件等等。相比用户控件（User Control），它在使用更加灵活，完成的工作也就更强大。
下面是我写的一个小的Demo，来演示如何自定义控件。

先看VS解决方案截图：

 

 

自定义控件的核心代码如下：

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

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

[assembly: WebResource("CustomerConLibrary.Image.stars.gif", "image/gif")]
namespace CustomerConLibrary
{

    [ToolboxData("<{0}:Star runat=\"server\"></{0}:Star>")]
    public class Star : WebControl
    {
        [Category("NewAttribute")]
        [Description("分数")]
        [Browsable(true)]
        [DefaultValue(0)]
        public int Score
        {
            get
            {
                object obj = ViewState["Score"];
                return obj == null ? 0 : Convert.ToInt32(obj);
            }
            set
            {
                ViewState["Score"] = value;
            }
        }

        [Category("NewAttribute")]
        [Description("文字")]
        [Browsable(true)]
        [DefaultValue("")]
        public string Comment
        {
            get
            {
                object obj = ViewState["Comment"];
                return obj == null ? string.Empty : Convert.ToString(obj);
            }
            set
            {
                ViewState["Comment"] = value;
            }
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            CreateControlHierarchy();
        }

        protected virtual void CreateControlHierarchy()
        {
            Table table = new Table();
            TableRow row = new TableRow();
            table.Rows.Add(row);
            TableCell comment = new TableCell();
            CreateComment(comment);
            row.Cells.Add(comment);

            TableCell stars = new TableCell();

            CreateStars(stars);

            row.Cells.Add(stars);

            this.Controls.Add(table);
        }

        /// <summary>
        /// 向单元格中创建注释标签
        /// </summary>
        /// <param name="cell">单元格对象</param>
        private void CreateComment(TableCell cell)
        {
            cell.Text = Comment;
        }

        /// <summary>
        /// 向单元格中创建星形图案
        /// </summary>
        /// <param name="cell"></param>
        private void CreateStars(TableCell cell)
        {
            string starPath = Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomerConLibrary.Image.stars.gif");

            Panel panBg = new Panel();
            panBg.Style.Add(HtmlTextWriterStyle.Width, "80px");
            panBg.Style.Add(HtmlTextWriterStyle.Height, "16px");
            panBg.Style.Add(HtmlTextWriterStyle.TextAlign, "left");
            panBg.Style.Add(HtmlTextWriterStyle.Overflow, "hidden");
            panBg.Style.Add(HtmlTextWriterStyle.BackgroundImage, starPath);
            panBg.Style.Add("background-position", "0px -32px");
            panBg.Style.Add("background-repeat", "repeat-x");

            cell.Controls.Add(panBg);

            Panel panCur = new Panel();
            string width = Score * 16 + "px";
            panCur.Style.Add(HtmlTextWriterStyle.Width, width);
            panCur.Style.Add(HtmlTextWriterStyle.Height, "16px");
            panCur.Style.Add(HtmlTextWriterStyle.BackgroundImage, starPath);
            panCur.Style.Add("background-position", "0px 0px");
            panCur.Style.Add("background-repeat", "repeat-x");

            panBg.Controls.Add(panCur);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            PrepareControlForReader();

            base.Render(writer);
        }

        private void PrepareControlForReader()
        {
            if (this.Controls.Count < 1)
                return;

            Table table = (Table)this.Controls[0];

            table.CellSpacing = 0;
            table.CellPadding = 0;
        }
    }
}

 

这里需要注意的是，如果有图片、JS文件、CSS文件等等，需要打包成DLL的话，右键该文件的属性：

 

 

 

使用就很简单了，首页引用DLL，然后在页面中注册，使用就可以了：

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="cc" Assembly="CustomerConLibrary" Namespace="CustomerConLibrary" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <cc:Star ID="star1" runat="server" Comment="WindowsXP" Score="3" />
        
    </div>
    </form>
</body>
</html>

 

效果图如下：

 

谢谢浏览！