ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
第四章 组合控件开发CompositeControl
大家好，今天我们来实现一个自定义的控件，之前我们已经知道了，要开发自定义的控件一般继承三个基
类:Control,WebControl，还有一个就是今天要说的CompositeControl。
系列文章链接:
ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件
ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 －－事件冒泡
大家也许还记得，之前的开发的控件基本上都是我们自己从头到尾的写一些控件的标记，如<table.....>之类的，
而且还有一个大的问题：我们为了使得我们的控件更加的好用，专业，我们还实现了大量的接口，和自己写很多的事件.这样
开发控件的时间就加大了。其实我们可以利用ASP.NET中已经有的控件，经过我们包装，实现我们自定义控件。大家可能认
为这和用户控件差不多的，但是继承CompositeConytol的控件的自定义控件的灵活性和复用行更好，而且还还添加样式。
还一个更加重要的就是我们不必要实现接口，比如，引发回传的IPostBackEventHandler接口，接受数据的
IPostBackDataHandler接口。大家还记得我们之前开发控件中的的那个Button还要申明name为 this.UniqueID ，
现在我们都不需要了，因为我们要包装的那些服务器的控件，如TextBox，他们都已经实现了这些。
本章准备开发一个大家都熟知的Login登录控件。
大家先看看效果：
其实分析起来，这个控件是由一些已有的控件组合而成的，分别是：
两个Label,两个TextBox，和一个Button
下面我们就来开发：
首先，还是先继承CompositeControl;
Code
public class Login:CompositeControl
然后把就申明我们要组合的控件,如上所说的：
Code
#region 要组合的控件
Label lbUserName;
Label lbUserPassward;
TextBox txtUserName;
TextBox txtUserPassward;
Button submitButton;
#endregion
把控件申明了之后只要初始化，并且将这些控件整合成我们的Login 控件就可以了。这么做呢？
其实开发组合控件很简单，一般只要重写一个方法就可以了。这个方法就是来初始化并且整合那些已经申明了的小
控件的。如下：
Code
1 #region 重写方法CreateChildControls
2
3 protected override void CreateChildControls()
4 {
5 //清空控件，大家可以理解为：初始化一张白纸，好让我们来画画
6
7 Controls.Clear();
8
9 //初始化控件lbUserName
lbUserName = new Label();
lbUserName.Text = "用户名：";
lbUserName.ID = "lbUserName";
//把控件添加到我们的组合控件中
Controls.Add(lbUserName);
//初始化控件lbUserPassward
lbUserPassward = new Label();
lbUserPassward.Text = "密 码：";
lbUserPassward.ID = "lbUserPassward";
Controls.Add(lbUserPassward);
//初始化控件txtUserName
txtUserName = new TextBox();
txtUserName.ID = "txtUserName";
txtUserName.Width = Unit.Percentage();
Controls.Add(txtUserName);
//初始化控件txtUserPassward
txtUserPassward = new TextBox();
txtUserPassward.ID = "txtUserPassward";
txtUserPassward.Width = Unit.Percentage();
Controls.Add(txtUserPassward);
//初始化控件 submitButton
submitButton = new Button();
submitButton.Text = "提交";
submitButton.CommandName = "Validate";
Controls.Add(submitButton);
告诉编译器，控件已经初始化了
ChildControlsCreated = true;
}
#endregion
大家特别要注意，最后的那句ChildControlsCreated属性，一定要申明，因为在页面的声明周期的任何时候可能调
用上面的那个方法，如果不申明ChildControlsCreated，那么这个方法就会被反复的调用，那么我们控件的状态都会丢失。
如果申明了ChildControlsCreated＝true，那么这个方法就调用一次。
经过上面的步骤之后，其实我们的控件就已经开发完成了。
可能我们还想进一步的向我们ASP.NET的标准的Login控件靠拢.那么我们的控件还缺少什么？
属性，事件！！！
以前我们定义属性都是用的ViewState["..."]，但是这里就不同了。因为我们的控件是有很多的小的控件组
合起来的，比如，我们修改“用户名：”的那个Label，我们想改的是那个Label的属性，还是看看效果图：
改前的图： 改后的图
就是说，我们想把子控件的属性如Text,name等等，把这些属性上升呈现为组合控件Login的属性。
怎么做？
也很简单的：如下：
Code
1 public string UserNameLabelText
2 {
3 get
4 {
5 EnsureChildControls();
6 return lbUserName.Text;
7 }
8 set
9 {
EnsureChildControls();
lbUserName.Text = value;
}
}
这样我们就把那个显示用户名的Label的Text属性显示为了Login控件的UserNameLabelText属性。大家要注意
EnsureChildControls(); 这个方法的调用。其实是个保险的：确保我们要显示属性的那个控件已经创建，已经初始化了。
大家可以根据需要显示更加多的属性。也可以自己定义一些属性，还是像以前那样，可以用ViewState[''.."]
如果到这里为止，就差不多了。大家可以按按照上面的方法来写控件。
大家可以看见，控件的呈现很乱。那些Label.TextBox都布局的很乱。其实你可以根据需要来将上面的那些控件排列
的更加好看些，只要重写一个方法就行了：
Code
protected override void RenderContents(HtmlTextWriter writer)
还是像之前一样，我们想把控件用一个Table来布局，先这样
Code
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Table;
}
}
然后再把那些Label,TextBox,Button放到table的行和列中就行了。如下：
Code
1 protected override void RenderContents(HtmlTextWriter writer)
2 {
3
4 writer.RenderBeginTag(HtmlTextWriterTag.Tr);
5
6 writer.RenderBeginTag(HtmlTextWriterTag.Td);
7 lbUserName.RenderControl(writer);
8 writer.RenderEndTag();//td的结束
9
writer.RenderBeginTag(HtmlTextWriterTag.Td);
txtUserName.RenderControl(writer);
writer.RenderBeginTag();
writer.RenderBeginTag();//tr的结束
//***********************************************
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
lbUserPassward .RenderControl(writer);
writer.RenderEndTag();//td的结束
writer.RenderBeginTag(HtmlTextWriterTag.Td);
txtUserPassward .RenderControl(writer);
writer.RenderBeginTag();
writer.RenderBeginTag();//tr的结束
//***********************************************
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "");
writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
writer.RenderBeginTag(HtmlTextWriterTag.Td);
submitButton.RenderControl(writer);
writer.RenderBeginTag();
writer.RenderBeginTag();//tr的结束
}
这样，我们的控件就写完了。
我们的控件还差事件。我们在下篇将“事件的冒泡”。
顺便做个调查：大家想看开发控件的视频吗，我正在录制。
完整的代码：如下：
Code
1 using System;
2 using System.Collections.Generic;
3 using System.Text;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.ComponentModel;
8
9 namespace LoginControl
10 {
11 public class Login:CompositeControl,IPostBackDataHandler
12 {
13 #region 要组合的控件
14 Label lbUserName;
15 Label lbUserPassward;
16 TextBox txtUserName;
17 TextBox txtUserPassward;
18 Button submitButton;
19 #endregion
20
21
22 #region 重写方法CreateChildControls
23
24 protected override void CreateChildControls()
25 {
26 Controls.Clear();
27
28 //初始化控件lbUserName
29 lbUserName = new Label();
30 lbUserName.Text = "用户名：";
31 lbUserName.ID = "lbUserName";
32 //把控件添加到我们的组合控件中
33 Controls.Add(lbUserName);
34
35 //初始化控件lbUserPassward
36 lbUserPassward = new Label();
37 lbUserPassward.Text = "密 码：";
38 lbUserPassward.ID = "lbUserPassward";
39 Controls.Add(lbUserPassward);
40
41
42 txtUserName = new TextBox();
43 txtUserName.ID = "txtUserName";
44 txtUserName.Width = Unit.Percentage();
45 Controls.Add(txtUserName);
46
47 txtUserPassward = new TextBox();
48 txtUserPassward.ID = "txtUserPassward";
49 txtUserPassward.Width = Unit.Percentage();
50 Controls.Add(txtUserPassward);
51
52 submitButton = new Button();
53 submitButton.Text = "提交";
54 submitButton.CommandName = "Validate";
55 Controls.Add(submitButton);
56
57 ChildControlsCreated = true;
58 }
59 #endregion
60 #region 将组合的子控件的属性 呈现为 组合控件的属性
61
62 public string UserNameLabelText
63 {
64 get
65 {
66 EnsureChildControls();
67 return lbUserName.Text;
68 }
69 set
70 {
71 EnsureChildControls();
72 lbUserName.Text = value;
73 }
74 }
75
76 public string UserPasswardLabelText
77 {
78 get
79 {
80 EnsureChildControls();
81 return lbUserPassward.Text;
82 }
83 set
84 {
85 EnsureChildControls();
86 lbUserPassward.Text = value;
87 }
88 }
89
90 public string SubmitButtonText
91 {
92 get
93 {
94 EnsureChildControls();
95 return submitButton.Text;
96 }
97 set
98 {
99 EnsureChildControls();
submitButton = value;
}
}
#endregion
#region 组合控件呈现的样式
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Table;
}
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
lbUserName.RenderControl(writer);
writer.RenderEndTag();//td的结束
writer.RenderBeginTag(HtmlTextWriterTag.Td);
txtUserName.RenderControl(writer);
writer.RenderBeginTag();
writer.RenderBeginTag();//tr的结束
//***********************************************
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
writer.RenderBeginTag(HtmlTextWriterTag.Td);
lbUserPassward .RenderControl(writer);
writer.RenderEndTag();//td的结束
writer.RenderBeginTag(HtmlTextWriterTag.Td);
txtUserPassward .RenderControl(writer);
writer.RenderBeginTag();
writer.RenderBeginTag();//tr的结束
//***********************************************
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "");
writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
writer.RenderBeginTag(HtmlTextWriterTag.Td);
submitButton.RenderControl(writer);
writer.RenderBeginTag();
writer.RenderBeginTag();//tr的结束
}
#endregion
}
}
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl的更多相关文章
- ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 －－事件冒泡
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡 CompositeControl 后篇 --事件冒泡 系列文章链接: ASP.NET ...
- ASP.NET自定义控件组件开发 第五章 模板控件开发
原文:ASP.NET自定义控件组件开发 第五章 模板控件开发 第五章 模板控件开发 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接 ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇 第三章 为控件添加事件 好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列 ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇 第三章 为控件添加事件 后篇 前一篇文章只是简单的说了下事件,但是大家应该方法,在ASP.NET自定义控件中只是简单那么定义事件是 ...
- 『Asp.Net 组件』第一个 Asp.Net 服务器组件：自己的文本框控件
代码: using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace DemoWebControl ...
- Andriod 自定义控件之创建可以复用的组合控件
前面已学习了一种自定义控件的实现,是Andriod 自定义控件之音频条,还没学习的同学可以学习下,学习了的同学也要去温习下,一定要自己完全的掌握了,再继续学习,贪多嚼不烂可不是好的学习方法,我们争取学 ...
- Android开发学习笔记-自定义组合控件的过程
自定义组合控件的过程 1.自定义一个View 一般来说,继承相对布局,或者线性布局 ViewGroup:2.实现父类的构造方法.一般来说,需要在构造方法里初始化自定义的布局文件:3.根据一些需要或者需 ...
- 安全控件开发原理分析 支付宝安全控件开发 C++
浏览器安全控件是如果支付宝一样结合web程序密码数据安全处理的程序,采用C++语言开发 通常的安全控件分为两种,一种是指支持IE内核的浏览器,一种支持所有内核的浏览器,支付宝采用的是支持所有内核的浏览 ...
- 【Android】13.0 UI开发（四）——列表控件RecyclerView的横向布局排列实现
1.0 新建项目,由于ListView的局限性,RecyclerView是一种很好取代ListView的控件,可以灵活实现多种布局. 2.0 新建项目RecyclerviewTest,目录如下: 3. ...
随机推荐
- UVA 11080 - Place the Guards(二分图判定)
UVA 11080 - Place the Guards 题目链接 题意:一些城市.之间有道路相连,如今要安放警卫,警卫能看守到当前点周围的边,一条边仅仅能有一个警卫看守,问是否有方案,假设有最少放几 ...
- 传京东副总裁蒉莺春或将接管POP业务-搜狐IT
传京东副总裁蒉莺春或将接管POP业务-搜狐IT 传京东副总裁蒉莺春或将接管POP业务
- RabbitMQ消息队列应用
RabbitMQ消息队列应用 消息通信组件Net分布式系统的核心中间件之一,应用与系统高并发,各个组件之间解耦的依赖的场景.本框架采用消息队列中间件主要应用于两方面:一是解决部分高并发的业务处理:二是 ...
- SE 2014年5月9日
两企业接入到 Internet(A公司和B公司),企业内部的用户及服务器均能够访问到 Internet. 2. A公司规模较大,采用了接入层/汇聚层/核心层的划分模式,接入层划分了多vLan(如图), ...
- EF 打造冲不掉的标签
应用场景: 在用EF的Datebase Fitst模式开发时,实体都是有T4文件根据数据库来生成,并且是每次保存都会重新生成,如果我们在有T4生成的实体类上加上验证标签,那么以保存就会丢失, 解决方案 ...
- 【解决方法】ADT在线安装
作为android开发者,不知道被ADT更新.SDK更新这些更新给强奸了多少次. 今天……我又一次被凌辱了. 无论是 https://dl-ssl.google.com/android/eclipse ...
- Effective C++ 条款24
若全部參数皆需类型转换,请为此採用non-member函数 我们直奔主题 假设你定义一个有理数类例如以下 class Rational{ public: Rational(int numerator= ...
- MongoDB 基础命令——数据库表的增删改查——遍历操作表中的记录
分组排序查询最大记录 //对 "catagory" 不等于 null 的数据进行分组查询,且查询结果倒序 db.getCollection('userAccount').aggre ...
- WampServer:轻松配置Wordpress安装环境
WordPress运行环境 PHP 5.2.4 或更新版本(不支持第三方推出的“PHP 6.0”) MySQL 5.0 或更新版本 Apache mod_rewrite 模块(可选,用于支持“固定链接 ...
- excel单元格中批量加入固定字符
excel单元格前怎么批量加字母 现在我要在联系人这列,每个姓名前加入衡阳的首字母简写(HY). 3 在同行上面随便找列,我找D列.输入公式:="HY"&A2. 5 输入后 ...