第二章 继承于WebControl的自定义控件
到现在为止，我已经写了三篇关于自定义控件开发的文章，很感谢大家的支持！不知道大家对我讲的方式有什么好的建议，我尽量使自定义控件的技术让更多的程序员同胞接受。好了，开发开始了！
系列文章链接:
自定义控件组件开发 第一章 待续
自定义控件组件开发 第一章 第二篇 接着待续
自定义控件组件开发 第一章 第三篇
自定义控件组件开发 第二章 继承WebControl的自定义控件
自定义控件组件开发 第三章 为控件添加事件 前篇
自定义控件组件开发 第三章 为控件添加事件 后篇
自定义控件组件开发 第四章 组合控件开发CompositeControl
自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 －－事件冒泡
自定义控件组件开发 第五章 模板控件开发
2.0自定义控件组件开发 第六章 深入讲解控件的属性
2.0组件控件开发视频 初体验
本章还是延续上章的例子，开发一个CreditCardForm控件。
其实本章也不难，相信大家看完后，也觉得很简单！
我们首先开谈谈继承Control和WebControl的区别：其实二者最大的区别就是在，如果我们开发的控件继承WebControl，那么我们的控件就支持更多的CSS样式。而继承于Control的自定义控件的样式相对就少些。
其实还有一个区别就在开发的规范上。我们来简单的看看上一章的自定义控件的代码，主要来看看Render方法中的代码：大家只扫一眼就可以了。
Code
1protectedoverridevoidRender(HtmlTextWriterwriter)
2{
3//显示table标记
4writer.AddStyleAttribute(HtmlTextWriterStyle.Width,"287px");
5writer.AddStyleAttribute(HtmlTextWriterStyle.Height,"128px");
6writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth,"0");
7writer.AddAttribute(HtmlTextWriterAttribute.Id,"mytable");
8writer.RenderBeginTag(HtmlTextWriterTag.Table);
9
10//显示table类的标记包含tr，td还有一些textbox,下拉框等
11writer.RenderBeginTag(HtmlTextWriterTag.Tr);
12
13writer.RenderBeginTag(HtmlTextWriterTag.Td);
14writer.Write(PaymentMethodText);
15writer.RenderEndTag();
16
17writer.RenderBeginTag(HtmlTextWriterTag.Td);
18writer.AddAttribute(HtmlTextWriterAttribute.Name,"PaymentMethod");
19writer.AddAttribute(HtmlTextWriterAttribute.Id,"PaymentMethod");
20writer.AddStyleAttribute(HtmlTextWriterStyle.Width,"100%");
21writer.RenderBeginTag(HtmlTextWriterTag.Select);
22
23writer.AddAttribute(HtmlTextWriterAttribute.Value,"0");
24writer.RenderBeginTag(HtmlTextWriterTag.Option);
25writer.Write("Master");
26writer.RenderEndTag();
27
28writer.AddAttribute(HtmlTextWriterAttribute.Value,"1");
29writer.RenderBeginTag(HtmlTextWriterTag.Option);
30writer.Write("Visa");
31writer.RenderEndTag();
32
33writer.RenderEndTag();
34writer.RenderEndTag();
35writer.RenderEndTag();
36
37writer.RenderBeginTag(HtmlTextWriterTag.Tr);
38writer.RenderBeginTag(HtmlTextWriterTag.Td);
39writer.Write(CreditCardNoText);
40writer.RenderEndTag();
41
42writer.RenderBeginTag(HtmlTextWriterTag.Td);
43writer.AddAttribute(HtmlTextWriterAttribute.Type,"text");
44writer.AddAttribute(HtmlTextWriterAttribute.Name,"CreditCardNo");
45writer.AddAttribute(HtmlTextWriterAttribute.Id,"CreditCardNo");
46writer.RenderBeginTag(HtmlTextWriterTag.Input);
47writer.RenderEndTag();
48writer.RenderEndTag();
49writer.RenderEndTag();
50
51writer.RenderBeginTag(HtmlTextWriterTag.Tr);
52writer.RenderBeginTag(HtmlTextWriterTag.Td);
53writer.Write(CardholderNameText);
54writer.RenderEndTag();
55
56writer.RenderBeginTag(HtmlTextWriterTag.Td);
57writer.AddAttribute(HtmlTextWriterAttribute.Type,"text");
58writer.AddAttribute(HtmlTextWriterAttribute.Name,"CardholderName");
59writer.AddAttribute(HtmlTextWriterAttribute.Id,"CardholderName");
60writer.RenderBeginTag(HtmlTextWriterTag.Input);
61writer.RenderEndTag();
62writer.RenderEndTag();
63writer.RenderEndTag();
64
65writer.RenderBeginTag(HtmlTextWriterTag.Tr);
66writer.RenderBeginTag(HtmlTextWriterTag.Td);
67writer.Write(ExpirationDateText);
68writer.RenderEndTag();
69
70writer.RenderBeginTag(HtmlTextWriterTag.Td);
71writer.AddAttribute(HtmlTextWriterAttribute.Name,"Month");
72writer.AddAttribute(HtmlTextWriterAttribute.Id,"Month");
73writer.RenderBeginTag(HtmlTextWriterTag.Select);
74for(intmonth=1;month<13;month++)
75{
76writer.AddAttribute(HtmlTextWriterAttribute.Value,month.ToString());
77writer.RenderBeginTag(HtmlTextWriterTag.Option);
78writer.Write(month.ToString());
79writer.RenderEndTag();
80}
81
82writer.RenderEndTag();
83
84writer.Write(" ");
85
86writer.AddAttribute(HtmlTextWriterAttribute.Name,"Year");
87writer.AddAttribute(HtmlTextWriterAttribute.Id,"Year");
88writer.RenderBeginTag(HtmlTextWriterTag.Select);
89
90for(intyear=;year<;year++)
91{
92writer.AddAttribute(HtmlTextWriterAttribute.Value,year.ToString());
93writer.RenderBeginTag(HtmlTextWriterTag.Option);
94writer.Write(year.ToString());
95writer.RenderEndTag();
96}
97
98writer.RenderEndTag();
99
100writer.RenderEndTag();
101writer.RenderEndTag();
102
103
104writer.RenderBeginTag(HtmlTextWriterTag.Tr);
105writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"2");
106writer.AddAttribute(HtmlTextWriterAttribute.Align,"center");
107writer.RenderBeginTag(HtmlTextWriterTag.Td);
108writer.AddAttribute(HtmlTextWriterAttribute.Type,"submit");
109writer.AddAttribute(HtmlTextWriterAttribute.Value,SubmitButtonText);
110writer.RenderBeginTag(HtmlTextWriterTag.Input);
111writer.RenderEndTag();
112writer.RenderEndTag();
113writer.RenderEndTag();
114
115//table的结束标记
116writer.RenderEndTag();
117
118
119
120
121}
相信这段代码大家都和熟悉。在这段代码的作用主要显示了一个table 以及table 之中的标记元素。
如果一这个控件已经写好了，加入我们想要改改table的样式，如把border设为1，或者改变显示的颜色等，那么我们就
要再次打开这段代码，修改代码。其实这就不好。为什么？
其实这个方法中的代码做了四件事：
1.显示控件最外层的包含标记，即table
2.显示最外层标记的一些属性，如border.id等
3.显示控件的主要内容 ，如，显示输入框，下拉框，按钮。
4.显示控件最外层包含标记的结束标记。
这样看来，这个方法的职责就有四个。大家应该还记得面向对象设计的原创：单一职责。虽然这个元素一般用在类上，
但是我们更加要注意，这个原则用的宗旨：使对象只有一个变化的因素。这个原则也用在方法的设计上。
就是说，我们如果想要改变最外层标记table一些属性，我们就影响了其他三个职责。同理，我们想改变其他的元素或者
内容，结果可想而知。
为此，继承WebControl的控件就更加的规范和灵活：
其实，继承于WebControl的控件的显示还是在Render方法中显示，只是这个Render方法已经不由我们来写了：
如下：
Code
1
2protectedoverridevoidRender(HtmlTextWriterwriter)
3{
4RenderBeginTag(writer);
5RenderContens(writer);
6RenderEndTag(writer);
7
8}
因为我们之前说，Render方法的职责有四个。所以WebControl的Render方法就把这些职责分离了。以后我们能就
可以独立的改变一个因素了。大家也许奇怪：不是说有四个职责吗，但是上面只是显示了三个方法，其实在
RenderBeginTag()方法中包含显示最外层标记样式的方法。
所以我们只要分别重写这三个方法，一个继承WebControl的自定义的控件就成了。不要怕，方法很多，但是很简单，而
且代码我们都懂，之前差不多都讲了的。
我想把写成后的控件给大家看看，让大家看下我们本章的目标：
大家看见没有：是不是支持的样式多了！！！
好了，我们来写吧：不难哦:)
首先看看我们要的写方法以及他们的功能：
Code
protectedoverridevoidRender(HtmlTextWriterwriter)
{
//显示最外层包含标记开始的标记，即，显示<table..>
RenderBeginTag(writer);
//显示table标记内的内容，如<tr><td><input/>等
RenderContens(writer);
//显示最外层包含标记结束标记</table
RenderEndTag(writer);
}
现在的思路很清晰吧，首先来显示<table....>
很简单，只要如下就可以了。
Code
1protectedoverrideHtmlTextWriterTagTagKey
2{
3get
4{
5returnHtmlTextWriterTag.Table;
6}
7}
不要奇怪，因为RenderBeginTag（）方法内部实际是调用了这个属性来显示的最外层的包含标记的。
好了，第一步就写完了啊！简答吧！
下面来显示table的样式，因为我们的控件的最外层的标记是table，显示他的样式只要这样就OK了。
Code
1protectedoverrideStyleCreateControlStyle()
2{
3returnnewTableStyle(ViewState);
4}
又写完了一部分。。不难吧！接着看啊！
如果你的最外层的标记是<div >那么，上面的那个方法你都不用写.
下面就写了RenderContent方法，不难，只记住这个方法的职责：显示最外层标记的内容：
如下：
Code
1protectedoverridevoidRenderContents(HtmlTextWriterwriter)
2{
3writer.RenderBeginTag(HtmlTextWriterTag.Tr);
4writer.RenderBeginTag(HtmlTextWriterTag.Td);
5writer.Write(PaymentMethod);
6writer.RenderEndTag();
7
8writer.RenderBeginTag(HtmlTextWriterTag.Td);
9
10writer.AddAttribute(HtmlTextWriterAttribute.Id,PaymentMethodListId);
11writer.AddAttribute(HtmlTextWriterAttribute.Name,PaymentMethodListName);
12writer.AddStyleAttribute(HtmlTextWriterStyle.Width,"100%");
13writer.RenderBeginTag(HtmlTextWriterTag.Select);
14
15writer.AddAttribute(HtmlTextWriterAttribute.Value,"0");
16writer.RenderBeginTag(HtmlTextWriterTag.Option);
17writer.Write("Master");
18writer.RenderEndTag();
19
20writer.AddAttribute(HtmlTextWriterAttribute.Value,"1");
21writer.RenderBeginTag(HtmlTextWriterTag.Option);
22writer.Write("Visa");
23writer.RenderEndTag();
24
25writer.RenderEndTag();
26
27writer.RenderEndTag();
28writer.RenderEndTag();
29//****************************************************************************
30writer.RenderBeginTag(HtmlTextWriterTag.Tr);
31writer.RenderBeginTag(HtmlTextWriterTag.Td);
32writer.Write(CreditCardNo);
33writer.RenderEndTag();
34
35writer.RenderBeginTag(HtmlTextWriterTag.Td);
36writer.AddAttribute(HtmlTextWriterAttribute.Id,CreditCardNoTextId);
37writer.AddAttribute(HtmlTextWriterAttribute.Name,CreditCardNoTextName);
38writer.AddAttribute(HtmlTextWriterAttribute.Type,"text");
39writer.RenderBeginTag(HtmlTextWriterTag.Input);
40writer.RenderEndTag();
41
42writer.RenderEndTag();
43writer.RenderEndTag();
44//**************************************************************************************
45
46writer.RenderBeginTag(HtmlTextWriterTag.Tr);
47writer.RenderBeginTag(HtmlTextWriterTag.Td);
48writer.Write(CardholderName);
49writer.RenderEndTag();
50
51writer.RenderBeginTag(HtmlTextWriterTag.Td);
52writer.AddAttribute(HtmlTextWriterAttribute.Name,CardholderNameTextName);
53writer.AddAttribute(HtmlTextWriterAttribute.Id,CardholderNameTextId);
54writer.AddAttribute(HtmlTextWriterAttribute.Type,"text");
55writer.RenderBeginTag(HtmlTextWriterTag.Input);
56writer.RenderEndTag();
57
58writer.RenderEndTag();
59writer.RenderEndTag();
60//***************************************************************************************
61
62writer.RenderBeginTag(HtmlTextWriterTag.Tr);
63writer.RenderBeginTag(HtmlTextWriterTag.Td);
64writer.Write(ExpirationDate);
65writer.RenderEndTag();
66
67writer.RenderBeginTag(HtmlTextWriterTag.Td);
68writer.AddAttribute(HtmlTextWriterAttribute.Name,MonthListName);
69writer.AddAttribute(HtmlTextWriterAttribute.Id,MonthListId);
70writer.RenderBeginTag(HtmlTextWriterTag.Select);
71
72for(intmonth=1;month<13;month++)
73{
74writer.AddAttribute(HtmlTextWriterAttribute.Value,month.ToString());
75writer.RenderBeginTag(HtmlTextWriterTag.Option);
76writer.Write(month.ToString());
77writer.RenderEndTag();
78}
79writer.RenderEndTag();
80
81/
82
83writer.Write(" ");
84
85/
86writer.AddAttribute(HtmlTextWriterAttribute.Name,YearListName);
87writer.AddAttribute(HtmlTextWriterAttribute.Id,YearListId);
88writer.RenderBeginTag(HtmlTextWriterTag.Select);
89
90for(intyear=;year<;year++)
91{
92writer.AddAttribute(HtmlTextWriterAttribute.Value,year.ToString());
93writer.RenderBeginTag(HtmlTextWriterTag.Option);
94writer.Write(year.ToString());
95writer.RenderEndTag();
96}
97writer.RenderEndTag();
98
99writer.RenderEndTag();
100writer.RenderEndTag();
101//*****************************************************************************
102
103writer.RenderBeginTag(HtmlTextWriterTag.Tr);
104writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"2");
105writer.AddAttribute(HtmlTextWriterAttribute.Align,"center");
106writer.RenderBeginTag(HtmlTextWriterTag.Td);
107writer.AddAttribute(HtmlTextWriterAttribute.Name,SubmitButtonName);
108writer.AddAttribute(HtmlTextWriterAttribute.Value,SubmitButtonText);
109writer.AddAttribute(HtmlTextWriterAttribute.Id,SubmitButtonId);
110writer.AddAttribute(HtmlTextWriterAttribute.Type,"submit");
111writer.RenderBeginTag(HtmlTextWriterTag.Input);
112writer.RenderEndTag();
113
114writer.RenderEndTag();
115writer.RenderEndTag();
116
117//******************************************************************************
118
119
120}
这样就完了，大家看看上面的代码，很熟悉吧，是啊，只是把我们之前的代码分割开了，写在不同的地方!
最后的那个RendEndTag()，你不写！因为，你override那个TagKey时，就已经调用了结束标记的方法。这样，一个继承WebControl的控件就完了！
好了，写完了：完整的代码如下：
Code
1usingSystem;
2usingSystem.Collections.Generic;
3usingSystem.Text;
4usingSystem.Web;
5usingSystem.Web.UI;
6usingSystem.Web.UI.WebControls;
7
8namespaceCreditCardForm
9{
10publicclassCreditCardForm5:WebControl
11{
12#region重写包含标记
13
14protectedoverrideStyleCreateControlStyle()
15{
16returnnewTableStyle(ViewState);
17}
18
19protectedoverrideHtmlTextWriterTagTagKey
20{
21get
22{
23returnHtmlTextWriterTag.Table;
24}
25}
26
27//publicvirtualstringBackImageUrl
28//{
29//get
30//{
31//return((TableStyle)ControlStyle).BackImageUrl;
32//}
33//set
34//{
35//((TableStyle)ControlStyle).BackImageUrl=value;
36//}
37//}
38
39
40#endregion
41#regionID
42protectedvirtualstringPaymentMethodListId
43{
44get
45{
46return"PaymentMethod";
47}
48}
49
50protectedvirtualstringCreditCardNoTextId
51{
52get
53{
54return"CreditCardNo";
55}
56}
57
58protectedvirtualstringCardholderNameTextId
59{
60get
61{
62return"CardholderName";
63}
64}
65
66protectedvirtualstringMonthListId
67{
68get
69{
70return"Month";
71}
72}
73
74protectedvirtualstringYearListId
75{
76get
77{
78return"Year";
79}
80}
81
82protectedvirtualstringSubmitButtonId
83{
84get
85{
86return"Submit";
87}
88}
89
90#endregion
91#regionname
92protectedvirtualstringPaymentMethodListName
93{
94get
95{
96return"PaymentMethod";
97}
98}
99
100protectedvirtualstringCreditCardNoTextName
101{
102get
103{
104return"CreditCardNo";
105}
106}
107
108protectedvirtualstringCardholderNameTextName
109{
110get
111{
112return"CardholderName";
113}
114}
115
116protectedvirtualstringMonthListName
117{
118get
119{
120return"Month";
121}
122}
123
124protectedvirtualstringYearListName
125{
126get
127{
128return"Year";
129}
130}
131
132protectedvirtualstringSubmitButtonName
133{
134get
135{
136return"Sumit";
137}
138}
139#endregion
140
141#region属性
142publicvirtualstringPaymentMethod
143{
144get
145{
146returnViewState["PaymentMethod"]!=null?(string)ViewState["PaymentMethod"]:"支付方式";
147
148}
149set
150{
151ViewState["PaymentMethod"]=value;
152}
153}
154
155publicvirtualstringCreditCardNo
156{
157get
158{
159returnViewState["CreditCardNo"]!=null?(string)ViewState["CreditCardNo"]:"信用卡号";
160}
161set
162{
163ViewState["CreditCardNo"]=value;
164}
165}
166
167publicvirtualstringCardholderName
168{
169get
170{
171returnViewState["CardholderName"]!=null?(string)ViewState["CardholderName"]:"持卡人";
172}
173set
174{
175ViewState["CreditCardName"]=value;
176}
177}
178
179publicvirtualstringExpirationDate
180{
181get
182{
183returnViewState["ExpirationDate"]!=null?(string)ViewState["ExpirationDate"]:"过期时间";
184}
185set
186{
187ViewState["ExpirationDate"]=value;
188}
189}
190
191publicvirtualstringSubmitButtonText
192{
193get
194{
195returnViewState["SubmitButtonText"]!=null?(string)ViewState["SubmitButtonText"]:"提交";
196}
197set
198{
199ViewState["SubmitButtonText"]=value;
200}
201
202}
203#endregion
204protectedoverridevoidRenderContents(HtmlTextWriterwriter)
205{
206writer.RenderBeginTag(HtmlTextWriterTag.Tr);
207writer.RenderBeginTag(HtmlTextWriterTag.Td);
208writer.Write(PaymentMethod);
209writer.RenderEndTag();
210
211writer.RenderBeginTag(HtmlTextWriterTag.Td);
212
213writer.AddAttribute(HtmlTextWriterAttribute.Id,PaymentMethodListId);
214writer.AddAttribute(HtmlTextWriterAttribute.Name,PaymentMethodListName);
215writer.AddStyleAttribute(HtmlTextWriterStyle.Width,"100%");
216writer.RenderBeginTag(HtmlTextWriterTag.Select);
217
218writer.AddAttribute(HtmlTextWriterAttribute.Value,"0");
219writer.RenderBeginTag(HtmlTextWriterTag.Option);
220writer.Write("Master");
221writer.RenderEndTag();
222
223writer.AddAttribute(HtmlTextWriterAttribute.Value,"1");
224writer.RenderBeginTag(HtmlTextWriterTag.Option);
225writer.Write("Visa");
226writer.RenderEndTag();
227
228writer.RenderEndTag();
229
230writer.RenderEndTag();
231writer.RenderEndTag();
232//****************************************************************************
233writer.RenderBeginTag(HtmlTextWriterTag.Tr);
234writer.RenderBeginTag(HtmlTextWriterTag.Td);
235writer.Write(CreditCardNo);
236writer.RenderEndTag();
237
238writer.RenderBeginTag(HtmlTextWriterTag.Td);
239writer.AddAttribute(HtmlTextWriterAttribute.Id,CreditCardNoTextId);
240writer.AddAttribute(HtmlTextWriterAttribute.Name,CreditCardNoTextName);
241writer.AddAttribute(HtmlTextWriterAttribute.Type,"text");
242writer.RenderBeginTag(HtmlTextWriterTag.Input);
243writer.RenderEndTag();
244
245writer.RenderEndTag();
246writer.RenderEndTag();
247//**************************************************************************************
248
249writer.RenderBeginTag(HtmlTextWriterTag.Tr);
250writer.RenderBeginTag(HtmlTextWriterTag.Td);
251writer.Write(CardholderName);
252writer.RenderEndTag();
253
254writer.RenderBeginTag(HtmlTextWriterTag.Td);
255writer.AddAttribute(HtmlTextWriterAttribute.Name,CardholderNameTextName);
256writer.AddAttribute(HtmlTextWriterAttribute.Id,CardholderNameTextId);
257writer.AddAttribute(HtmlTextWriterAttribute.Type,"text");
258writer.RenderBeginTag(HtmlTextWriterTag.Input);
259writer.RenderEndTag();
260
261writer.RenderEndTag();
262writer.RenderEndTag();
263//***************************************************************************************
264
265writer.RenderBeginTag(HtmlTextWriterTag.Tr);
266writer.RenderBeginTag(HtmlTextWriterTag.Td);
267writer.Write(ExpirationDate);
268writer.RenderEndTag();
269
270writer.RenderBeginTag(HtmlTextWriterTag.Td);
271writer.AddAttribute(HtmlTextWriterAttribute.Name,MonthListName);
272writer.AddAttribute(HtmlTextWriterAttribute.Id,MonthListId);
273writer.RenderBeginTag(HtmlTextWriterTag.Select);
274
275for(intmonth=1;month<13;month++)
276{
277writer.AddAttribute(HtmlTextWriterAttribute.Value,month.ToString());
278writer.RenderBeginTag(HtmlTextWriterTag.Option);
279writer.Write(month.ToString());
280writer.RenderEndTag();
281}
282writer.RenderEndTag();
283
284/
285
286writer.Write(" ");
287
288/
289writer.AddAttribute(HtmlTextWriterAttribute.Name,YearListName);
290writer.AddAttribute(HtmlTextWriterAttribute.Id,YearListId);
291writer.RenderBeginTag(HtmlTextWriterTag.Select);
292
293for(intyear=;year<;year++)
294{
295writer.AddAttribute(HtmlTextWriterAttribute.Value,year.ToString());
296writer.RenderBeginTag(HtmlTextWriterTag.Option);
297writer.Write(year.ToString());
298writer.RenderEndTag();
299}
300writer.RenderEndTag();
301
302writer.RenderEndTag();
303writer.RenderEndTag();
304//*****************************************************************************
305
306writer.RenderBeginTag(HtmlTextWriterTag.Tr);
307writer.AddAttribute(HtmlTextWriterAttribute.Colspan,"2");
308writer.AddAttribute(HtmlTextWriterAttribute.Align,"center");
309writer.RenderBeginTag(HtmlTextWriterTag.Td);
310writer.AddAttribute(HtmlTextWriterAttribute.Name,SubmitButtonName);
311writer.AddAttribute(HtmlTextWriterAttribute.Value,SubmitButtonText);
312writer.AddAttribute(HtmlTextWriterAttribute.Id,SubmitButtonId);
313writer.AddAttribute(HtmlTextWriterAttribute.Type,"submit");
314writer.RenderBeginTag(HtmlTextWriterTag.Input);
315writer.RenderEndTag();
316
317writer.RenderEndTag();
318writer.RenderEndTag();
319
320//******************************************************************************
321
322
323}
324
325}
326}
327
希望大家继续支持啊！谢谢！
