第三篇:第一章的完结篇
系列文章链接:
ASP.NET自定义控件组件开发 第一章 待续
ASP.NET自定义控件组件开发 第一章 第二篇 接着待续
ASP.NET自定义控件组件开发 第一章 第三篇
ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件
ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡
ASP.NET自定义控件组件开发 第五章 模板控件开发
ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性
ASP.NET2.0组件控件开发视频 初体验
第二章讲解:继承WebControl 的控件
相信大家看了前几篇文章后应该觉得自定义控件很简单,无非就是把一大堆的html代码包装一下就行了。不错,前
几篇写的控件确实很简单。不知道大家想过没有,难道我们每次写控件都要大费力气的把一大堆的html代码写进去吗。
不知道大家试了没有:如果在write.Write()方法中写的html代码有了错误,如果把<table..>写成了<talbe..>,在编译
的时候,编译器是不会发现错误,但是当我们把控件拖上来使用的时候,就发现控件的呈现错误。就是说,这样的错误只能
到最后才能被我们发现,这样我们又得回去改代码,然后重新的编译,生成。
我们开发的那个控件真的很好的,我们也也许没有考虑到浏览器版本的问题,因为不同的浏览器对html的不同版本的显
示还是有区别的。看看我们的代码,我们就敢保证我们的控件在所有的浏览器上都显示的是我们想要的结果吗?
基于上述原因,我们对之前的控件再来一次修改。
在.NET中,我们写代码经常用到他的智能感应功能,比如我们写完后加个".",然后,后面的一些属性,方法都显示出来
了 。而且在编译的时候,也提示我们一些错误信息。
下面我们就来改下:

Code
1 amespace CreditCardForm
2 {
3 public class CreditCardForm3:CreditCardForm2
4 {
因为我们之前开发的控件已经实现了很多的特性,我们不想再意义的重新实现,所以就继承前面已经有的控件,相信大家
都理解这点。

Code
writer.Write("<table style='287px;height:128px;border-0'>");
大家还记得这段代码吧,我们想显示一个table,而且确定他的一些属性等等。如前所说,出错的可能很大,而且兼容也
有问题。怎样改?
这样:
我们用.NET里面的专门用来生成这些html标记的一些方法和属性

Code
1 writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "287px");
2 writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "128px");
3 writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "0");
4 writer.AddAttribute(HtmlTextWriterAttribute.Id, "mytable");
5 writer.RenderBeginTag(HtmlTextWriterTag.Table);
这段代码和上端代码的最终的显示结果都是一样的(都生成相同的html标记)。也许大家会认为这段代码很多,难道写
这么多的代码就是好的吗,还不如之前的方便。但是,想想之前所说的问题,这段代码就解决了那些问题。
代码我来解释下:用AddStyleAttribute方法来添加CCS样式;AddStyleAttribute添加非CSS样式,如name,id等,
用RenderBeginTag来添加开始的标记。还有一点就是这些代码都是“反的”:先定义样式,属性,最后才定义我们要写的
个table标记。就是说,想给某个标记加属性,要先写属性,
样式的语句,在写这个标记。

Code
1 writer.RenderBeginTag(HtmlTextWriterTag.Table);
2
看看上面的代码,显示的是个table标记,如果想显示tr?这样做:

Code
1 writer.RenderBeginTag(HtmlTextWriterTag.Tr);
2
大家应该明白我的意思了吧:HtmlTextWriterTag接不同的属性,就显示不同的标记。
还有一点要特别的注意,有开始,就是结束。我们用了一个RenderBeginTag方法,就一定要有个RenderEndTag方法
与之对应。
看个例子:

Code
1 writer.RenderBeginTag(HtmlTextWriterTag.Td);
2 writer.Write(PaymentMethodText);
3 writer.RenderEndTag();
大家懂了吧!
我把代码贴上,大家看看,有问题就说!

Code
1
protected override void Render(HtmlTextWriter writer)
2
{
3
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "287px");
4
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "128px");
5
writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "0");
6
writer.AddAttribute(HtmlTextWriterAttribute.Id, "mytable");
7
writer.RenderBeginTag(HtmlTextWriterTag.Table);
8
9
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
10
11
writer.RenderBeginTag(HtmlTextWriterTag.Td);
12
writer.Write(PaymentMethodText);
13
writer.RenderEndTag();
14
15
writer.RenderBeginTag(HtmlTextWriterTag.Td);
16
writer.AddAttribute(HtmlTextWriterAttribute.Name, "PaymentMethod");
17
writer.AddAttribute(HtmlTextWriterAttribute.Id, "PaymentMethod");
18
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100%");
19
writer.RenderBeginTag(HtmlTextWriterTag.Select);
20
21
writer.AddAttribute(HtmlTextWriterAttribute.Value, "0");
22
writer.RenderBeginTag(HtmlTextWriterTag.Option);
23
writer.Write("Master");
24
writer.RenderEndTag();
25
26
writer.AddAttribute(HtmlTextWriterAttribute.Value, "1");
27
writer.RenderBeginTag(HtmlTextWriterTag.Option);
28
writer.Write("Visa");
29
writer.RenderEndTag();
30
31
writer.RenderEndTag();
32
writer.RenderEndTag();
33
writer.RenderEndTag();
34
35
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
36
writer.RenderBeginTag(HtmlTextWriterTag.Td);
37
writer.Write(CreditCardNoText);
38
writer.RenderEndTag();
39
40
writer.RenderBeginTag(HtmlTextWriterTag.Td);
41
writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
42
writer.AddAttribute(HtmlTextWriterAttribute.Name, "CreditCardNo");
43
writer.AddAttribute(HtmlTextWriterAttribute.Id, "CreditCardNo");
44
writer.RenderBeginTag(HtmlTextWriterTag.Input);
45
writer.RenderEndTag();
46
writer.RenderEndTag();
47
writer.RenderEndTag();
48
49
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
50
writer.RenderBeginTag(HtmlTextWriterTag.Td);
51
writer.Write(CardholderNameText);
52
writer.RenderEndTag();
53
54
writer.RenderBeginTag(HtmlTextWriterTag.Td);
55
writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
56
writer.AddAttribute(HtmlTextWriterAttribute.Name, "CardholderName");
57
writer.AddAttribute(HtmlTextWriterAttribute.Id, "CardholderName");
58
writer.RenderBeginTag(HtmlTextWriterTag.Input);
59
writer.RenderEndTag();
60
writer.RenderEndTag();
61
writer.RenderEndTag();
62
63
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
64
writer.RenderBeginTag(HtmlTextWriterTag.Td);
65
writer.Write(ExpirationDateText);
66
writer.RenderEndTag();
67
68
writer.RenderBeginTag(HtmlTextWriterTag.Td);
69
writer.AddAttribute(HtmlTextWriterAttribute.Name, "Month");
70
writer.AddAttribute(HtmlTextWriterAttribute.Id, "Month");
71
writer.RenderBeginTag(HtmlTextWriterTag.Select);
72
for (int month = 1; month < 13; month++)
73
{
74
writer.AddAttribute(HtmlTextWriterAttribute.Value, month.ToString());
75
writer.RenderBeginTag(HtmlTextWriterTag.Option);
76
writer.Write(month.ToString());
77
writer.RenderEndTag();
78
}
79
80
writer.RenderEndTag();
81
82
writer.Write(" ");
83
84
writer.AddAttribute(HtmlTextWriterAttribute.Name, "Year");
85
writer.AddAttribute(HtmlTextWriterAttribute.Id, "Year");
86
writer.RenderBeginTag(HtmlTextWriterTag.Select);
87
88
for (int year =2008; year < 2015; year++)
89
{
90
writer.AddAttribute(HtmlTextWriterAttribute.Value, year.ToString());
91
writer.RenderBeginTag(HtmlTextWriterTag.Option);
92
writer.Write(year.ToString());
93
writer.RenderEndTag();
94
}
95
96
writer.RenderEndTag();
97
98
writer.RenderEndTag();
99
writer.RenderEndTag();
100
101
102
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
103
writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2");
104
writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
105
writer.RenderBeginTag(HtmlTextWriterTag.Td);
106
writer.AddAttribute(HtmlTextWriterAttribute.Type, "submit");
107
writer.AddAttribute(HtmlTextWriterAttribute.Value, SubmitButtonText);
108
writer.RenderBeginTag(HtmlTextWriterTag.Input);
109
writer.RenderEndTag();
110
writer.RenderEndTag();
111
writer.RenderEndTag();
112
113
//table的结束标记
114
writer.RenderEndTag();
115
116
117
118
119
}
下面开始说说。状态的管理,即ViewState;
之前的控件还有一个问题:
如下:

我们在页面后面写代码:

Code
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 if (!this.IsPostBack)
4 {
5 CreditCardForm2_1.PaymentMethodText = " 我的支付方式";
6 CreditCardForm2_1.CardholderNameText = "小洋";
7 }
8 }
运行页面看见:

但是当你点击”提交“按钮,页面马上就变为了如下:

变回来了!!!!?????
这里就要讲讲ASP.NET的页面保存值的方式:因为现在的ASP.NET网站是基于http这种无状态协议的。大家应该都懂。
在ASP.NET的我们提交的一个页面,虽然看起来是一样的,但是他们本质上已经不是同一个页面了。而是我们现在看见的页
面获取了之前提交的那个页面的一些状态值。关于这点,到第四章详细讲述”页面的生命周期“中讲。
所有我们就要用个ViewState来保存页面回传的值。这里我不想讲很多的理论东西,大家先看看现在的问题怎样解决:

Code
public override string PaymentMethodText
{
get
{
return ViewState["PaymentMethodText"] != null ? (string)ViewState["PaymentMethodText"] : "支付方式";
}
set
{
ViewState["PaymentMethodText"] = value;
}
}
因为我们继承于CreditCardForm2,大家看看我们在CreditCardForm2中写的:

Code
1
2 [Browsable (true )]//在属性窗口中是否可见
3 [Category ("Appearance")]//属性的分类,如,行为,外观,大家可以在属性窗口看见这样的分类
4 [DefaultValue ("支付方式")]
5 [Description ("支付方式")]//这些是显示在属性窗口底下的
6
7 //virtual 方便以后二次开发
8 public virtual string PaymentMethodText
9 {
10 get
11 {
12 return paymentMethod;
13 }
14 set
15 {
16 paymentMethod = value;
17 }
18 }
19
注意:Virtual。
这样之后,我们的控件就完成了。完整的代码如下:希望大家支持!

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
8
namespace CreditCardForm
9

{
10
public class CreditCardForm3:CreditCardForm2
11
{
12
public override string PaymentMethodText
13
{
14
get
15
{
16
return ViewState["PaymentMethodText"] != null ? (string)ViewState["PaymentMethodText"] : "支付方式";
17
}
18
set
19
{
20
ViewState["PaymentMethodText"] = value;
21
}
22
}
23
24
public override string CreditCardNoText
25
{
26
get
27
{
28
return ViewState["CreditCardNoText"] != null ? (string)ViewState["CreditCardNoText"] : "信用卡号";
29
}
30
set
31
{
32
ViewState["CreditCardNoText"] = value;
33
}
34
}
35
36
public override string CardholderNameText
37
{
38
get
39
{
40
return ViewState["CardholderNameText"] != null ? (string)ViewState["CardholderNameText"] : "持卡人";
41
}
42
set
43
{
44
ViewState["CardholderNameText"] = value;
45
}
46
}
47
48
public override string ExpirationDateText
49
{
50
get
51
{
52
return ViewState["ExpirationDateText"] != null ? (string)ViewState["ExpirationDateText"] : "过期时间";
53
}
54
set
55
{
56
ViewState["ExpirationDateText"] = value;
57
}
58
}
59
60
public override string SubmitButtonText
61
{
62
get
63
{
64
return ViewState["SubmitButtonText"] != null ? (string)ViewState["SubmitButtonText"] : "提交";
65
}
66
set
67
{
68
ViewState["SubmitButtonText"] = value;
69
}
70
}
71
protected override void Render(HtmlTextWriter writer)
72
{
73
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "287px");
74
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "128px");
75
writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "0");
76
writer.AddAttribute(HtmlTextWriterAttribute.Id, "mytable");
77
writer.RenderBeginTag(HtmlTextWriterTag.Table);
78
79
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
80
81
writer.RenderBeginTag(HtmlTextWriterTag.Td);
82
writer.Write(PaymentMethodText);
83
writer.RenderEndTag();
84
85
writer.RenderBeginTag(HtmlTextWriterTag.Td);
86
writer.AddAttribute(HtmlTextWriterAttribute.Name, "PaymentMethod");
87
writer.AddAttribute(HtmlTextWriterAttribute.Id, "PaymentMethod");
88
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100%");
89
writer.RenderBeginTag(HtmlTextWriterTag.Select);
90
91
writer.AddAttribute(HtmlTextWriterAttribute.Value, "0");
92
writer.RenderBeginTag(HtmlTextWriterTag.Option);
93
writer.Write("Master");
94
writer.RenderEndTag();
95
96
writer.AddAttribute(HtmlTextWriterAttribute.Value, "1");
97
writer.RenderBeginTag(HtmlTextWriterTag.Option);
98
writer.Write("Visa");
99
writer.RenderEndTag();
100
101
writer.RenderEndTag();
102
writer.RenderEndTag();
103
writer.RenderEndTag();
104
105
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
106
writer.RenderBeginTag(HtmlTextWriterTag.Td);
107
writer.Write(CreditCardNoText);
108
writer.RenderEndTag();
109
110
writer.RenderBeginTag(HtmlTextWriterTag.Td);
111
writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
112
writer.AddAttribute(HtmlTextWriterAttribute.Name, "CreditCardNo");
113
writer.AddAttribute(HtmlTextWriterAttribute.Id, "CreditCardNo");
114
writer.RenderBeginTag(HtmlTextWriterTag.Input);
115
writer.RenderEndTag();
116
writer.RenderEndTag();
117
writer.RenderEndTag();
118
119
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
120
writer.RenderBeginTag(HtmlTextWriterTag.Td);
121
writer.Write(CardholderNameText);
122
writer.RenderEndTag();
123
124
writer.RenderBeginTag(HtmlTextWriterTag.Td);
125
writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
126
writer.AddAttribute(HtmlTextWriterAttribute.Name, "CardholderName");
127
writer.AddAttribute(HtmlTextWriterAttribute.Id, "CardholderName");
128
writer.RenderBeginTag(HtmlTextWriterTag.Input);
129
writer.RenderEndTag();
130
writer.RenderEndTag();
131
writer.RenderEndTag();
132
133
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
134
writer.RenderBeginTag(HtmlTextWriterTag.Td);
135
writer.Write(ExpirationDateText);
136
writer.RenderEndTag();
137
138
writer.RenderBeginTag(HtmlTextWriterTag.Td);
139
writer.AddAttribute(HtmlTextWriterAttribute.Name, "Month");
140
writer.AddAttribute(HtmlTextWriterAttribute.Id, "Month");
141
writer.RenderBeginTag(HtmlTextWriterTag.Select);
142
for (int month = 1; month < 13; month++)
143
{
144
writer.AddAttribute(HtmlTextWriterAttribute.Value, month.ToString());
145
writer.RenderBeginTag(HtmlTextWriterTag.Option);
146
writer.Write(month.ToString());
147
writer.RenderEndTag();
148
}
149
150
writer.RenderEndTag();
151
152
writer.Write(" ");
153
154
writer.AddAttribute(HtmlTextWriterAttribute.Name, "Year");
155
writer.AddAttribute(HtmlTextWriterAttribute.Id, "Year");
156
writer.RenderBeginTag(HtmlTextWriterTag.Select);
157
158
for (int year =2008; year < 2015; year++)
159
{
160
writer.AddAttribute(HtmlTextWriterAttribute.Value, year.ToString());
161
writer.RenderBeginTag(HtmlTextWriterTag.Option);
162
writer.Write(year.ToString());
163
writer.RenderEndTag();
164
}
165
166
writer.RenderEndTag();
167
168
writer.RenderEndTag();
169
writer.RenderEndTag();
170
171
172
writer.RenderBeginTag(HtmlTextWriterTag.Tr);
173
writer.AddAttribute(HtmlTextWriterAttribute.Colspan, "2");
174
writer.AddAttribute(HtmlTextWriterAttribute.Align, "center");
175
writer.RenderBeginTag(HtmlTextWriterTag.Td);
176
writer.AddAttribute(HtmlTextWriterAttribute.Type, "submit");
177
writer.AddAttribute(HtmlTextWriterAttribute.Value, SubmitButtonText);
178
writer.RenderBeginTag(HtmlTextWriterTag.Input);
179
writer.RenderEndTag();
180
writer.RenderEndTag();
181
writer.RenderEndTag();
182
183
writer.RenderEndTag();
184
185
186
187
188
}
189
}
190
}
191