(八)ASP.NET自定义用户控件（1）

http://blog.csdn.net/laodao1/article/details/5897366

ASP.NET自定义控件组件开发

第一章：从一个简单的控件谈起 　　起始开发ASP.NET自定义控件不是那么的高深，当初我开始学的时候还有点恐惧，但是慢慢就好了。学习控件的开发技术，并不一定说以后要从事控件的开发，而是让我们深入的理解掌握ASP.NET内部的机理。你会发觉，当学习完控件开发技术后，你以后开发网站时有种得心应手的感觉。我不希望一上来就讲控件开始多么多么难啊，我会用一个演化的方法来讲述控件开发，一步一步帮助大家理解，如果大家要求的话，我会考虑录制视频讲解。当然，也很希望去webcast上讲讲这个系列。
　　代码也会附带的放上，希望大家支持！！！
　　现在开始：首先看一个简单的页面：
　　下面是个html的页面，显示的是一些html控件的页面。

　　当我们查看页面后面的html代码时，就发现很复杂

　　上面显示的是一个输入用户信息的提交控件，如果这个控件很常用，那么我们每次都要这样拖放，那是很累的，为了便于代码重用，就吧它实现为一个控件。
　　一般来说，自定义控件的都是继承于某一个基类的，不仅如此，我们所用的所有的控件都是继承于一个基类Control类。我们开发控件可以继承任何的服务器控件，如Button,TextBox等等。但是我们一般都继承于三个基类Control，WebControl,CompositeControl，因为这些类给了我们更加灵活的操作。
　　本章从浅入深，主要讲解继承Control类。

开发继承于Control类的控件很简单，只要重写Render方法就可以了： 　　其实我们做的事情很简单：只是把之前的html的代码做为字符串传入了write.Write()方法中而已。 　　当把所有的这些html代码写完之后，恭喜你，一个自定义的服务器控件就成功了！让后你就可以把它放　　　放入工具箱中，像其他的控件，如Button，TextBox，等一样的使用了。 　　　　　　下面来一步步的介绍得到一个控件: 　　1.　　　写完之前的代码后，然后生成： 　　这样，一个控件就生成了。 　　2.　　　我们新建一个测试的网站的 　　3.　　　在工具箱中点击右键－“选择项“，弹出如下： 　　　　 　　4.　　　点击“浏览“，然后找到我们存放项目的地方 　　5.　　　然后就进入”CreditCardForm”—“obj—“Debug”

你会看到一个.dll 　　6.　　　然后选中那个.dll就可以，然后添加 　　7.　　　然后就可以在工具箱中找到你的控件 　　然后拖过来就可以使用了 　　好了，经过上面的步骤，你就已经开发了一个控件，很简单吧！以后你只要添加了这个控件的.dll，你就可以在任何程序和项目中使用他，但是这个控件只是个演示，离实用来有距离，不用怕，慢慢来。 　　今天先写到这里。 　　大家给点建议吧！ 　　项目的完整代码已经写完了但是不知道怎样放上来 要代码的就说下  1 2 3usingSystem; 4usingSystem.Collections.Generic; 5usingSystem.Text; 6usingSystem.Web; 7usingSystem.Web.UI; 8usingSystem.Web.UI.WebControls; 9 10namespaceCreditCardForm 11{ 12　　publicclassCreditCardForm1:Control 13　　{ 14　　　　protectedoverridevoidRender(HtmlTextWriterwriter) 15　　　　{ 16　　　　　　writer.Write("<tablestyle='width:287px;height:128px;border-width:0'>"); 17　　　　　　writer.Write("<tr>"); 18　　　　　　writer.Write("<td>支付方式</td>"); 19　　　　　　writer.Write("<td>"); 20　　　　　　writer.Write("<selectname='paymentMethod'id='paymentMethod'style='width:100%'>"); 21　　　　　　writer.Write("<optionvalue='0'>Master</option>"); 22　　　　　　writer.Write("<optionvalue='1'>Visa</option>"); 23　　　　　　writer.Write("</select>"); 24　　　　　　writer.Write("</td>"); 25　　　　　　writer.Write("</tr>"); 26 27　　　　　　writer.Write("<tr>"); 28　　　　　　writer.Write("<td>信用卡号</td>"); 29　　　　　　writer.Write("<td><inputtype='text'name='CreditCardNo'id='CreditCardNo'/></td>"); 30　　　　　　writer.Write("</tr>"); 31 32　　　　　　writer.Write("<tr>"); 33　　　　　　writer.Write("<td>持卡人</td>"); 34　　　　　　writer.Write("<td><inputtype='text'name='CardholderName'id='CardholderName'/></td>"); 35　　　　　　writer.Write("</tr>"); 36 37　　　　　　writer.Write("<tr>"); 38　　　　　　writer.Write("<td>过期时间</td>"); 39　　　　　　writer.Write("<td>"); 40　　　　　　writer.Write("<selectname='Month'id='Month'>"); 41　　　　　　for(intmonth=1;month<13;month++) 42　　　　　　{ 43　　　　　　　　writer.Write("<opti>"+month.ToString()+"</option>"); 44　　　　　　} 45 46　　　　　　writer.Write("</select>"); 47 48　　　　　　writer.Write("&nbsp"); 49 50　　　　　　writer.Write("<selectname='Year'id='Year'>"); 51　　　　　　for(intyear=2008;year<2014;year++) 52　　　　　　{ 53　　　　　　　　writer.Write("<opti>"+year.ToString()+"</option>"); 54　　　　　　} 55　　　　　　writer.Write("</select>"); 56　　　　　　writer.Write("</td></tr>"); 57 58　　　　　　writer.Write("<tr>"); 59　　　　　　writer.Write("<tdalign='center'colspan='2'>"); 60　　　　　　writer.Write("<inputtype='submit'value='提交'/>"); 61　　　　　　writer.Write("</td></tr>"); 62 63　 64 65 66　　　　} 67 68　　} 69} 70 71 72

TOP 好消息！网界网为用户提供免费网络产品测评机会，要测的报名啦！

 

 

　很感谢大家给我的第一篇ASP.NET控件开发的支持！在写这些之前，我也看了一些例子，想选中一些好上手的例子，这样，可能一些例子大家以前都见过，但是我想说：同样是弹钢琴，同样一首“命运交响曲”，有的人弹的让人荡气回肠，有的人弹的就很一般。

　　受了李建忠老师的启发，发现用一种演化式的让人更好的接受。

　　好了，废话不说了。继续开发！希望大家支持！

　　我们之前开发了一个很简单的自定义的控件，方法很简单，只是把原来的html文本传入writer.Writer()方法的参数，然后输出。其实从模式的角度看，这可说是个Template模式（只是提下而已，有兴趣的朋友可以和我讨论)！

　　大家再来看看代码:

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
namespaceCreditCardForm
{
　　publicclassCreditCardForm1:Control
　　{
　　　　protectedoverridevoidRender(HtmlTextWriterwriter)
　　　　{
　　　　　　writer.Write("<tablestyle='width:287px;height:128px;border-width:0'>");
　　　　　　writer.Write("<tr>");
　　　　　　writer.Write("<td>支付方式</td>");
　　　　　　writer.Write("<td>");
　　　　　　writer.Write("<selectname='paymentMethod'id='paymentMethod'style='width:100%'>");
　　　　　　writer.Write("<optionvalue='0'>Master</option>");
　　　　　　writer.Write("<optionvalue='1'>Visa</option>");
　　　　　　writer.Write("</select>");
　　　　　　writer.Write("</td>");
　　　　　　writer.Write("</tr>");
　　　　　　writer.Write("<tr>");
　　　　　　writer.Write("<td>信用卡号</td>");
　　　　　　writer.Write("<td><inputtype='text'name='CreditCardNo'id='CreditCardNo'/></td>");
　　　　　　writer.Write("</tr>");
　　　　　　writer.Write("<tr>");
　　　　　　writer.Write("<td>持卡人</td>");
　　　　　　writer.Write("<td><inputtype='text'name='CardholderName'id='CardholderName'/></td>");
　　　　　　writer.Write("</tr>");
　　　　　　writer.Write("<tr>");
　　　　　　writer.Write("<td>过期时间</td>");
　　　　　　writer.Write("<td>");
　　　　　　writer.Write("<selectname='Month'id='Month'>");
　　　　　　for(intmonth=1;month<13;month++)
　　　　　　{
　　　　　　　　writer.Write("<optionvalue="+month.ToString()+">"+month.ToString()+"</option>");
　　　　　　}
　　　　　　writer.Write("</select>");
　　　　　　writer.Write("&nbsp");
　　　　　　writer.Write("<selectname='Year'id='Year'>");
　　　　　　for(intyear=2008;year<2014;year++)
　　　　　　{
　　　　　　　　writer.Write("<optionvalue="+year.ToString()+">"+year.ToString()+"</option>");
　　　　　　}
　　　　　　writer.Write("</select>");
　　　　　　writer.Write("</td></tr>");
　　　　　　writer.Write("<tr>");
　　　　　　writer.Write("<tdalign='center'colspan='2'>");
　　　　　　writer.Write("<inputtype='submit'value='提交'/>");
　　　　　　writer.Write("</td></tr>");
　　
　　　　}
　　}
}

 

我们发现，这个控件实现的很僵硬！因为这个控件不像其他的服务器控件，我们这个控件没有任何让我们编辑的地方，也没有一些让我们设置的属性。下面，我们就来让控件“活”起来。给他一些可以编辑的属性。　　首先我们还是从最简单来看。
　　相信大家都知道C#中的get ,set，我们总是把成为“属性”(Property),其实在控件开发的时候，就是用这些get, 和set来设置属性的。
　　先来看看这张图片：

　　大家都熟悉吧，就是我们之前前开发的那个控件的外观。我们在拖控件是使用的时候，一般都要设置一些属性，比如：Text,Name等等。当然，这里也不例外，我们也设置这个控件的属性，例如我们想让控件左边的文本改变，就像改变Text属性，如下：

　　这样的控件就更加的灵活。下面来看看这样开发这些属性吧！
　　用get和set
　　如下：
1　　　　private string paymentMethod = "支付方式";
2　　　　private string creditCardNo = "信用卡号";
3　　　　private string cardholderName = "持卡人";
4　　　　private string expirati;
5　　　　private string submitButt;
6
7　　　　//以便以后二次开发 所以用了virtual
8　　　　//
9
10
11　　　　 public virtual string PaymentMethodText
12　　　　{
13　　　　　　get
14　　　　　　{
15　　　　　　　　return paymentMethod;
16　　　　　　}
17　　　　　　set
18　　　　　　{
19　　　　　　　　paymentMethod = value;
20　　　　　　}
21　　　　}
22
23　　　　 public virtual string CreditCardNoText
24　　　　{
25　　　　　　get
26　　　　　　{
27　　　　　　　　return creditCardNo;
28　　　　　　}
29　　　　　　set
30　　　　　　{
31　　　　　　　　creditCardNo = value;
32　　　　　　}
33　　　　}
34
35　　　　public virtual string CardholderNameText
36　　　　{
37　　　　　　get
38　　　　　　{
39　　　　　　　　return cardholderName;
40　　　　　　}
41　　　　　　set
42　　　　　　{
43　　　　　　　　cardholderName = value;
44　　　　　　}
45　　　　}
46
47　　　　 public virtual string ExpirationDateText
48　　　　{
49　　　　　　get
50　　　　　　{
51　　　　　　　　return expirationDate;
52　　　　　　}
53　　　　　　set
54　　　　　　{
55　　　　　　　　expirationDate = value;
56　　　　　　}
57　　　　}
58
59　　　　public virtual string SubmitButtonText
60　　　　{
61　　　　　　get
62　　　　　　{
63　　　　　　　　return submitButtonText;
64　　　　　　}
65　　　　　　set
66　　　　　　{
67　　　　　　　　submitButtonText = value;
68　　　　　　}
69　　　　}

　这样做以后，基本上就完成了我们之前的目的，可以设置控件的属性了。注意：我们这里实现的属性是可读写的。大家可以根据情况来确定是只读，还是只写！

　　但是我们不要忘记了，控件的显示是通过Render方法呈现在页面的，我们要使得我们的控件可以改变属性，改变呈现的方式，就要改改Render中的代码：如下：

1protectedoverridevoidRender(HtmlTextWriterwriter)
2　　　　{
3　　　　　　writer.Write("<tablestyle='width:287px;height:128px;border-width:0'>");
4　　　　　　writer.Write("<tr>");
5　　　　　　writer.Write("<td>"+PaymentMethodText+"</td>");
6　　　　　　writer.Write("<td>");
7　　　　　　writer.Write("<selectname='paymentMethod'id='paymentMethod'style='width:100%'>");
8　　　　　　writer.Write("<optionvalue='0'>Master</option>");
9　　　　　　writer.Write("<optionvalue='1'>Visa</option>");
10　　　　　　writer.Write("</select>");
11　　　　　　writer.Write("</td>");
12　　　　　　writer.Write("</tr>");
13
14　　　　　　writer.Write("<tr>");
15　　　　　　writer.Write("<td>"+CreditCardNoText+"</td>");
16　　　　　　writer.Write("<td><inputtype='text'name='CreditCardNo'id='CreditCardNo'/></td>");
17　　　　　　writer.Write("</tr>");
18
19　　　　　　writer.Write("<tr>");
20　　　　　　writer.Write("<td>"+CardholderNameText+"</td>");
21　　　　　　writer.Write("<td><inputtype='text'name='CardholderName'id='CardholderName'/></td>");
22　　　　　　writer.Write("</tr>");
23
24　　　　　　writer.Write("<tr>");
25　　　　　　writer.Write("<td>"+ExpirationDateText+"</td>");
26　　　　　　writer.Write("<td>");
27　　　　　　writer.Write("<selectname='Month'id='Month'>");
28　　　　　　for(intmonth=1;month<13;month++)
29　　　　　　{
30　　　　　　　　writer.Write("<optionvalue="+month.ToString()+">"+month.ToString()+"</option>");
31　　　　　　}
32
33　　　　　　writer.Write("</select>");
34
35　　　　　　writer.Write("&nbsp");
36
37　　　　　　writer.Write("<selectname='Year'id='Year'>");
38　　　　　　for(intyear=2008;year<2014;year++)
39　　　　　　{
40　　　　　　　　writer.Write("<optionvalue="+year.ToString()+">"+year.ToString()+"</option>");
41　　　　　　}
42　　　　　　writer.Write("</select>");
43　　　　　　writer.Write("</td></tr>");
44
45　　　　　　writer.Write("<tr>");
46　　　　　　writer.Write("<tdalign='center'colspan='2'>");
47　　　　　　writer.Write("<inputtype='submit'value='"+SubmitButtonText+"'/>");
48　　　　　　writer.Write("</td></tr>");
49
50
51
52
53　　　　}

　这里，请大家注意代码的第5，15，20，25，和47行，我们之前在前一个控件中是直接写如字符串，这里我们改变了写法。用到了我们定义的那些get，set的属性，来改变控件显示。
　　好了，这写步骤完成之后，工作就差不多完成了。
　　我想大家应该来记得我们平时用的控件，如下：

　　例如上面的TextBox控件，他的属性就显示在属性窗口，而且属性都分了类，如”外观“，”行为“，而且没有属性下面都有注释。大家注意途中的标记部分。
　　我们上面的代码确实已经为控件添加了属性，但是我们要让我们开发的控件和现有的控件一样，看起来更加的专业，我们就要实现一些显示的代码，使得我们的控件和现有的服务器控件一样”好看，好用”。即，要有下面的效果：

　　这个控件看起来很专业吧！好了，我们来实现下：
　　其实很简单的，只要添加一些属性(Attribute）标记
　　　[Browsable(true)]//在属性窗口中是否可见
　　　　[Category("Appearance")]//属性的分类，如，行为，外观，大家可以在属性窗口看见这样的分类
　　　　[DefaultValue("支付方式")]
　　　　[Description("支付方式")]//这些是显示在属性窗口底下的
　　　　publicvirtualstringPaymentMethodText
　　　　{
　　　　　　get
　　　　　　{
　　　　　　　　returnpaymentMethod;
　　　　　　}
　　　　　　set
　　　　　　{
　　　　　　　　paymentMethod=value;
　　　　　　}
　　　　}

　大家可以根据我的注释再结合我上面的标记图可以看看。然后其他的的一些get,set属性都添加差不多，只是括号()内的文本，随你写而已！

　　到此为止，一个”好看“的控件就写完了。至于“好用”，暂时不急，慢慢来！

　　当我们把控件添加到页面后，查看他的“源”看到的这样的：

<cc1:creditcardform1id="CreditCardForm1_1"runat="server"></cc1:creditcardform1>

　　我们看到其他的一些控件的“源”，例如：

<asp:TextBoxID="TextBox1"runat="server"Font-Bold="True"Font-Italic="True"Height="200px"TextMode="MultiLine"></asp:TextBox>

　　TextBox控件的很多的属性都显示在标记中了，我们也希望当我们的控件一拖上页面的时候就显示一些包含在标记中的属性，如下：

<cc1:CreditCardForm2ID="CreditCardForm2_1"runat="server"PaymentMethodText=" 我的支付"CardholderNameText="持卡姓名"CreditCardNoText="我的卡号"ExpirationDateText="过期吗？">
　　　　</cc1:CreditCardForm2>

　　怎样做？

　　也很简单，加些Attribute标记就行了。

　　这些的标记是类级别的，就是说，要用在类上，我们之前家的那些标记都用在字段上，级别不同。注意哦！

　　如下：

1[ToolboxData("<{0}:CreditCardForm2runat='server'PaymentMethodText='支付方式'></{0}:CreditCardForm2>")]
2　　publicclassCreditCardForm2:Control

注意：在{0}的冒号中之后的那个"CreditCardForm2“就是类的名字，不要写错，否就不行！还有runat='sever'一定要写，其他的属性你可以随意加，但是要保证，那些你的家的属性是我们定义了的。例如你还可以加　　CreditCardNo='信用卡号',等等。这样之后，我们的控件就更加的专业了！
　　整个代码如下：大家多多提意见，如果我讲不够好就说，我尽量讲的更加平实！
　1usingSystem;
　2usingSystem.Collections.Generic;
　3usingSystem.Text;
　4usingSystem.Web.UI;
　5usingSystem.Web;
　6usingSystem.ComponentModel;
　7usingSystem.Web.UI.WebControls;
　8
　9namespaceCreditCardForm
10{
11　　[DefaultProperty("CardholderNameText")]
12　　[ToolboxData("<{0}:CreditCardForm2runat='server'PaymentMethodText='支付方式'></{0}:CreditCardForm2>")]
13　　publicclassCreditCardForm2:Control
14　　{
15　　　　#region属性
16　　　　privatestringpaymentMethod="支付方式";
17　　　　privatestringcreditCardNo="信用卡号";
18　　　　privatestringcardholderName="持卡人";
19　　　　privatestringexpirati;
20　　　　privatestringsubmitButt;
21
22　　　　//以便以后二次开发所以用了virtual
23　　　　//
24
25
26　　　　[Browsable(true)]//在属性窗口中是否可见
27　　　　[Category("Appearance")]//属性的分类，如，行为，外观，大家可以在属性窗口看见这样的分类
28　　　　[DefaultValue("支付方式")]
29　　　　[Description("支付方式")]//这些是显示在属性窗口底下的
30　　　　publicvirtualstringPaymentMethodText
31　　　　{
32　　　　　　get
33　　　　　　{
34　　　　　　　　returnpaymentMethod;
35　　　　　　}
36　　　　　　set
37　　　　　　{
38　　　　　　　　paymentMethod=value;
39　　　　　　}
40　　　　}
41
42　　　　[Browsable(true)]
43　　　　[Category("Appearance")]
44　　　　[DefaultValue("信用卡号")]
45　　　　[Description("信用卡的号码")]
46　　　　publicvirtualstringCreditCardNoText
47　　　　{
48　　　　　　get
49　　　　　　{
50　　　　　　　　returncreditCardNo;
51　　　　　　}
52　　　　　　set
53　　　　　　{
54　　　　　　　　creditCardNo=value;
55　　　　　　}
56　　　　}
57
58　　　　[Browsable(true)]
59　　　　[Category("Appearance")]
60　　　　[DefaultValue("持卡人")]
61　　　　[Description("持卡人的名字")]
62　　　　publicvirtualstringCardholderNameText
63　　　　{
64　　　　　　get
65　　　　　　{
66　　　　　　　　returncardholderName;
67　　　　　　}
68　　　　　　set
69　　　　　　{
70　　　　　　　　cardholderName=value;
71　　　　　　}
72　　　　}
73
74　　　　[Browsable(true)]
75　　　　[Category("Appearance")]
76　　　　[DefaultValue("过期时间")]
77　　　　[Description("描述卡的过期时间")]
78　　　　publicvirtualstringExpirationDateText
79　　　　{
80　　　　　　get
81　　　　　　{
82　　　　　　　　returnexpirationDate;
83　　　　　　}
84　　　　　　set
85　　　　　　{
86　　　　　　　　expirationDate=value;
87　　　　　　}
88　　　　}
89　　　　[Browsable(true)]
90　　　　[Description("按钮的文本")]
91　　　　[Category("Appearance")]
92　　　　[DefaultValue("提交")]
93　　　　publicvirtualstringSubmitButtonText
94　　　　{
95　　　　　　get
96　　　　　　{
97　　　　　　　　returnsubmitButtonText;
98　　　　　　}
99　　　　　　set
100　　　　　　{
101　　　　　　　　submitButtonText=value;
102　　　　　　}
103　　　　}
104　　　　#endregion
105　　　　protectedoverridevoidRender(HtmlTextWriterwriter)
106　　　　{
107　　　　　　writer.Write("<tablestyle='width:287px;height:128px;border-width:0'>");
108　　　　　　writer.Write("<tr>");
109　　　　　　writer.Write("<td>"+PaymentMethodText+"</td>");
110　　　　　　writer.Write("<td>");
111　　　　　　writer.Write("<selectname='paymentMethod'id='paymentMethod'style='width:100%'>");
112　　　　　　writer.Write("<optionvalue='0'>Master</option>");
113　　　　　　writer.Write("<optionvalue='1'>Visa</option>");
114　　　　　　writer.Write("</select>");
115　　　　　　writer.Write("</td>");
116　　　　　　writer.Write("</tr>");
117
118　　　　　　writer.Write("<tr>");
119　　　　　　writer.Write("<td>"+CreditCardNoText+"</td>");
120　　　　　　writer.Write("<td><inputtype='text'name='CreditCardNo'id='CreditCardNo'/></td>");
121　　　　　　writer.Write("</tr>");
122
123　　　　　　writer.Write("<tr>");
124　　　　　　writer.Write("<td>"+CardholderNameText+"</td>");
125　　　　　　writer.Write("<td><inputtype='text'name='CardholderName'id='CardholderName'/></td>");
126　　　　　　writer.Write("</tr>");
127
128　　　　　　writer.Write("<tr>");
129　　　　　　writer.Write("<td>"+ExpirationDateText+"</td>");
130　　　　　　writer.Write("<td>");
131　　　　　　writer.Write("<selectname='Month'id='Month'>");
132　　　　　　for(intmonth=1;month<13;month++)
133　　　　　　{
134　　　　　　　　writer.Write("<opti>"+month.ToString()+"</option>");
135　　　　　　}
136
137　　　　　　writer.Write("</select>");
138
139　　　　　　writer.Write("&nbsp");
140
141　　　　　　writer.Write("<selectname='Year'id='Year'>");
142　　　　　　for(intyear=2008;year<2014;year++)
143　　　　　　{
144　　　　　　　　writer.Write("<opti>"+year.ToString()+"</option>");
145　　　　　　}
146　　　　　　writer.Write("</select>");
147　　　　　　writer.Write("</td></tr>");
148
149　　　　　　writer.Write("<tr>");
150　　　　　　writer.Write("<tdalign='center'colspan='2'>");
151　　　　　　writer.Write("<inputtype='submit'value='"+SubmitButtonText+"'/>");
152　　　　　　writer.Write("</td></tr>");
153
154
155
156
157　　　　}
158
159　　}
160}
161

第三篇：第一章的完结篇

　　相信大家看了前几篇文章后应该觉得自定义控件很简单，无非就是把一大堆的html代码包装一下就行了。不错，前

　　几篇写的控件确实很简单。不知道大家想过没有，难道我们每次写控件都要大费力气的把一大堆的html代码写进去吗。

　　不知道大家试了没有：如果在write.Write()方法中写的html代码有了错误，如果把<table..>写成了<talbe..>，在编译

　　的时候，编译器是不会发现错误，但是当我们把控件拖上来使用的时候，就发现控件的呈现错误。就是说，这样的错误只能

　　到最后才能被我们发现，这样我们又得回去改代码，然后重新的编译，生成。

　　我们开发的那个控件真的很好的，我们也也许没有考虑到浏览器版本的问题，因为不同的浏览器对html的不同版本的显

　　示还是有区别的。看看我们的代码，我们就敢保证我们的控件在所有的浏览器上都显示的是我们想要的结果吗？

　　基于上述原因，我们对之前的控件再来一次修改。

　　在.NET中，我们写代码经常用到他的智能感应功能，比如我们写完后加个"."，然后，后面的一些属性，方法都显示出来

　　了 。而且在编译的时候，也提示我们一些错误信息。

　　下面我们就来改下：

1 amespace CreditCardForm
2 {
3　　 public class CreditCardForm3:CreditCardForm2
4　　 {

　　因为我们之前开发的控件已经实现了很多的特性，我们不想再意义的重新实现，所以就继承前面已经有的控件，相信大家

　　都理解这点。

writer.Write("<table style='width:287px;height:128px;border-width:0'>");

　　大家还记得这段代码吧，我们想显示一个table，而且确定他的一些属性等等。如前所说，出错的可能很大，而且兼容也

　有问题。怎样改？

　　这样：

　　我们用.NET里面的专门用来生成这些html标记的一些方法和属性

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标记。就是说，想给某个标记加属性，要先写属性，

　　样式的语句，在写这个标记。

1 writer.RenderBeginTag(HtmlTextWriterTag.Table);
2

　　看看上面的代码，显示的是个table标记，如果想显示tr？这样做：

1　writer.RenderBeginTag(HtmlTextWriterTag.Tr);
2

　　大家应该明白我的意思了吧：HtmlTextWriterTag接不同的属性，就显示不同的标记。

　　还有一点要特别的注意，有开始，就是结束。我们用了一个RenderBeginTag方法，就一定要有个RenderEndTag方法

　与之对应。

　　看个例子：

1　writer.RenderBeginTag(HtmlTextWriterTag.Td);
2　　　　　　 writer.Write(PaymentMethodText);
3　　　　　　 writer.RenderEndTag();

　　大家懂了吧！

　　我把代码贴上，大家看看，有问题就说！

　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("&nbsp");
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;　　之前的控件还有一个问题：
　　如下：

　　我们在页面后面写代码：
1protectedvoidPage_Load(objectsender,EventArgse)
2　　{
3　　　　if(!this.IsPostBack)
4　　　　{
5　　　　　　CreditCardForm2_1.PaymentMethodText="我的支付方式";
6　　　　　　CreditCardForm2_1.CardholderNameText="小洋";
7　　　　}
8　　}
　　运行页面看见：

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

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

public override string PaymentMethodText
　　　　{
　　　　　　get
　　　　　　{
　　　　　　　　return ViewState["PaymentMethodText"] != null ? (string)ViewState["PaymentMethodText"] : "支付方式";
　　　　　　}
　　　　　　set
　　　　　　{
　　　　　　　　ViewState["PaymentMethodText"] = value;
　　　　　　}
　　　　}
　　因为我们继承于CreditCardForm2，大家看看我们在CreditCardForm2中写的：
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。
　　这样之后，我们的控件就完成了。完整的代码如下：希望大家支持！
　1using System;
　2using System.Collections.Generic;
　3using System.Text;
　4using System.Web;
　5using System.Web.UI;
　6using System.Web.UI.WebControls;
　7
　8namespace 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("&nbsp");
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