现在的位置: 首页 > 综合 > 正文

ASP.NET组件编程step by step

2013年08月16日 ⁄ 综合 ⁄ 共 5203字 ⁄ 字号 评论关闭

ASP.NET组件编程step by step

 

       事先声明:本文只适合对组件编程感兴趣的初、中级程序员,如果您对组件编程很牛X了,您可以略过此地。欢迎各位指导并发表意见和建议。

 

       事情的起因(纯粹为了增强文章的趣味性)

       我对电影一向不感冒,最近网上、电视上《十面埋伏》的广告和评论扑天盖地,加上张艺谋在中央电视台还搞了个晚会,专门宣传该影片,不免也蠢蠢欲动起来。我没有去电影院看电影的习惯,所以如果网上有就到网上看了。恰巧一日QQ聊天时,一个群里的会员发了个链接,说是可以下载《十面埋伏》,我试了一下,果然,速度还不错,有70K的速度,100M的东东很快就下完了(是不是我特别容易满足?)。可是效果不太好,颜色基本上没有了,像过去的黑白电影,还不清晰,不过免费的东西就这样了,将就一下啦。

 

       看了十几分钟,终于看不下去了,都是打打杀杀,三个主要人物都出场了,没有帅哥也没有美女,看得我头晕眼花直打盹。为了防止见周公,鼠标在我手里不安份起来,我用的播放器是为了看这个电影刚下载的realplay10的,这可是头一次见,以前都用8.0的,界面没新版的好看(虽然我并不觉得好看,笨笨的),所以想看看有些什么功能,最后,我打开了下面的界面:

 

     

       咦,我一看那个蓝色的背景挺有趣的啊,“名称”标签和文件框组合成一个复合控件,背景颜色还可以变化,有点创意,效果也不错,那我也做一个啊,哈哈,有时候一个想法就是这样无意中产生的。

 

       基础知识

       ASP.net中做一个复合控件不是很难了,但是如果是刚刚接触的话,可能还是需要指点一下方向,所以不妨在这里啰嗦一下,高手们莫怪。

       Javascript:当今最流行的客户端脚本语言,如果要做出特效来他最有能耐。

       CSS:级联样式表,用于设置元素的样式。

       DHTML:动态HTML,和浏览器交互会用到。

       System.Web.UI.WebControls.WebControl:在ASP.NET中自定义控件的基类,我们可能会重写他的一些方法,常用的有:

       CreateChildControls():给予控件创建内定子控件的机会,预设情况OnPreRender()方法会调用此方法要求该控件创建其子控件,别一种情况则是由FindControl()方法调用。

       OnPreRender():触发PreRender事件,在绘制控件之前发生。

       Render():绘制控件。

       AddAttributesToRender():向标签中添加HTML样式或属性。

       另外,还有一个方法:EnsureChildControls()该方法用于确定服务器控控件是否包含子控件,如果不包含,则创建子控件,在设计阶段起作用。

    其他的慢慢去看啦,这几个是我们的例子中会用到的。

 

    最终效果

    先看看效果,这样心中才有明确的目标。

   

    没有任何鼠标动作            鼠标移到控件上              鼠标移出后还原

 

    怎么样?效果挺炫吧?(我在自夸呢)

   

    跟我一步一步来

       现在,请听我的指令:喜欢这个效果的站左边,不喜欢这个效果或者极为不屑的站右边。好了,右边的朋友请关闭您的浏览器继续您喜欢的网上之旅,左边的朋友请跟我来:

 

1、  我们先完成效果部分,也就是编写javascript脚本。我的方法是写一个HTML文件,试验脚本的正确性:

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

<TITLE></TITLE>

 

<script language=javascript>

var OldColor;

function mouseover(ctrl,color)

{

        OldColor = ctrl.style.backgroundColor;

        ctrl.style.color = "#ffffff";

        ctrl.style.backgroundColor = color;

       

}

function mouseout(ctrl)

{

        ctrl.style.backgroundColor = OldColor;

        ctrl.style.color = "#000000";

}

</script>

</HEAD>

<BODY>

 

<table  border="0" style="font-size:9pt" onmouseover="mouseover(this,'#ff0044')" onmouseout="mouseout(this)">

<tr >

        <td><span>姓名:</span></td><td><input name="_ctl2" type="text" /></td>

</tr>

</table>

 

</BODY>

</HTML>

新建一个文本文件,将这段代码复制过去,然后将文件的扩展名改为.html,用IE打开,是不是看到了想要的效果?

 

2、  前期工作准备完成了,接下来打开VS.NET IDE,新建一个项目,选择Visual C#项目(别问我要VB.net的代码,我不会),在右边列表中选择“WEB控件库”,输入项目名称:LabelTextBox

3、  把自动生成的代码删除,只留下一个类的框架,像下面这样(命名空间自定):

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

using System.Drawing;

 

namespace LzhTextBpx

{      

    public class LabelTextbox : System.Web.UI.WebControls.WebControl

{

}

}

 

4、  上面看到的效果其实是一个一行两列的表格,我们把表格的border属性设成0,所以看不出来了,其中左边单元格放标签,右边单元格放文本框,所以,我们要用代码生成这个表格。用到的类有:

a)         Table:表示表格

b)        TableRow:表示表格行

c)        TableCell:表示表格中的单元格

注意:一个表格可以有多个表格行,一个表格行中可以放置多个单元格

生成代码如下:

//定义一个表对象

            Table t = new Table();

            //添加一行

            TableRow tr = new TableRow();

            //添加两个单元格

            TableCell tc1 = new TableCell();

            TableCell tc2 = new TableCell();

            //将控件添加到Controls集中.

            tc1.Controls.Add(label);

            tc2.Controls.Add(textBox);

            tr.Controls.Add(tc1);

            tr.Controls.Add(tc2);

            t.Controls.Add(tr);

this.Controls.Add(t);  

我们还要响应表格的鼠标移入移出事件,背景色的变化就是在这里触发的,下面的代码完成此事:

//添加鼠标事件

        t.Attributes.Add("onmouseover","mouseover(this,'" + "#" + R + G + B + "')");

t.Attributes.Add("onmouseout","mouseout(this)");

Attributes表示表格的属性集,Add()方法用于添加一个新的属性。

顺便把表格中的字体也设置一下:

//添加样式,用来控制字体

t.Style.Add("font-size","10pt");

看到上面的R、G、B三个变量了吗?这三个变量是某种颜色的十六进制的字符串表示。使用如下的方法对颜色进行分解:

//以下将颜色值转化成十六进制表示

        string R,G,B;

        R = (Convert.ToInt32(this._backgroundColor.R)).ToString("X");

        G = (Convert.ToInt32(this._backgroundColor.G)).ToString("X");

B = (Convert.ToInt32(this._backgroundColor.B)).ToString("X");

其中_backgroundColor是自定义属性。

 

这一步的全部代码如下:

private void CreateControls()//创建控件以及设置控件的相关属性

        {

            //以下将颜色值转化成十六进制表示

            string R,G,B;

            R = (Convert.ToInt32(this._backgroundColor.R)).ToString("X");

            G = (Convert.ToInt32(this._backgroundColor.G)).ToString("X");

            B = (Convert.ToInt32(this._backgroundColor.B)).ToString("X");

            //定义一个表对象

            Table t = new Table();

 

            //添加鼠标事件

            t.Attributes.Add("onmouseover","ltmouseover(this,'" + "#" + R + G + B + "')");

            t.Attributes.Add("onmouseout","ltmouseout(this)");

 

            //添加样式,用来控制字体

            t.Style.Add("font-size","10pt");

 

            //添加一行

            TableRow tr = new TableRow();

            //添加两个单元格

            TableCell tc1 = new TableCell();

            TableCell tc2 = new TableCell();

 

            //将控件添加到Controls集中.

            tc1.Controls.Add(label);

            tc2.Controls.Add(textBox);

            tr.Controls.Add(tc1);

            tr.Controls.Add(tc2);

 

            t.Controls.Add(tr);

 

            this.Controls.Add(t);          

        }

 

5、  本控件向外提供了三个属性,backgroundColor 表示鼠标移入控件的背景颜色,labelString 为标签内文本,textString 为文本框内容。定义如下:

private Label label = new Label();//创建一个标签

        private TextBox textBox = new TextBox();//创建一个文本框

private Color _backgroundColor;//鼠标移入的背景颜色

public Color backgroundColor

        {

            get

            {

                if(_backgroundColor == Color.Empty)

                    return Color.Blue;

                return _backgroundColor;

            }

            set

            {

                _backgroundColor = value;

            }

        }

 

        public string labelString

        {

抱歉!评论已关闭.