ASP.NET自定義控件組件開發 第一章 第二篇 接著待續

?????ASP.NET自定義控件組件開發 第一章 第二篇 接著待續

?

　　很感謝大家給我的第一篇ASP.NET控件開發的支持！在寫這些之前，我也看了一些例子，想選中一些好上手的例子，這樣，可能一些例子大家以前都見過，但是我想說：同樣是彈鋼琴，同樣一首“命運交響曲”，有的人彈的讓人蕩氣回腸，有的人彈的就很一般。

?????????受了李建忠老師的啟發，發現用一種演化式的讓人更好的接受。

??????????好了，廢話不說了。繼續開發！希望大家支持！

?

?

系列文章鏈接:

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組件控件開發視頻 初體驗

?

?

?????我們之前開發了一個很簡單的自定義的控件，方法很簡單，只是把原來的html文本傳入writer.Writer()方法的參數，然后輸出。其實從模式的角度看，這可說是個Template模式（只是提下而已，有興趣的朋友可以和我討論)！

?????大家再來看看代碼:

?

using?System;
using?System.Collections.Generic;
using?System.Text;
using?System.Web;
using?System.Web.UI;
using?System.Web.UI.WebControls;

namespace?CreditCardForm
{
????public?class?CreditCardForm1:Control?
????{
????????protected?override?void?Render(HtmlTextWriter?writer)
????????{
????????????writer.Write?("<table?style='width:287px;height:128px;border-width:0'>");
????????????writer.Write?("<tr>");
????????????writer.Write?("<td>支付方式</td>");
????????????writer.Write?("<td>");
????????????writer.Write?("<select?name='paymentMethod'?id='paymentMethod'?style='width:100%'>");
????????????writer.Write?("<option?value='0'>Master</option>");
????????????writer.Write?("<option?value='1'>Visa</option>");
????????????writer.Write?("</select>");
????????????writer.Write?("</td>");
????????????writer.Write("</tr>");

????????????writer.Write("<tr>");
????????????writer.Write("<td>信用卡號</td>");
????????????writer.Write("<td><input?type='text'?name='CreditCardNo'?id='CreditCardNo'/></td>");
????????????writer.Write("</tr>");

????????????writer.Write("<tr>");
????????????writer.Write("<td>持卡人</td>");
????????????writer.Write("<td><input?type='text'?name='CardholderName'?id='CardholderName'?/></td>");
????????????writer.Write("</tr>");

????????????writer.Write("<tr>");
????????????writer.Write("<td>過期時間</td>");
????????????writer.Write("<td>");
????????????writer.Write("<select?name='Month'?id='Month'>");
????????????for?(int?month?=?1;?month?<?13;?month++)
????????????{
????????????????writer.Write("<option?value="?+?month.ToString()?+?">"?+?month.ToString()?+?"</option>");
????????????}

????????????writer.Write("</select>");

????????????writer.Write("&nbsp");

????????????writer.Write("<select?name='Year'?id='Year'>");
????????????for?(int?year?=?2008;?year<?2014;?year?++)
????????????{
????????????????writer.Write("<option?value="?+?year.ToString()?+?">"?+?year.ToString()?+?"</option>");
????????????}
????????????writer.Write("</select>");
????????????writer.Write("</td></tr>");

????????????writer.Write("<tr>");
????????????writer.Write("<td?align='center'?colspan='2'>");
????????????writer.Write("<input?type='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?expirationDate?=?"過期時間";
?5????????private?string?submitButtonText?=?"提交";
?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中的代碼：如下：

??????????

?1?protected?override?void?Render(HtmlTextWriter?writer)
?2?????????{
?3?????????????writer.Write("<table?style='width:287px;height:128px;border-width:0'>");
?4?????????????writer.Write("<tr>");
?5?????????????writer.Write("<td>"+PaymentMethodText+?"</td>");
?6?????????????writer.Write("<td>");
?7?????????????writer.Write("<select?name='paymentMethod'?id='paymentMethod'?style='width:100%'>");
?8?????????????writer.Write("<option?value='0'>Master</option>");
?9?????????????writer.Write("<option?value='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><input?type='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><input?type='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("<select?name='Month'?id='Month'>");
28?????????????for?(int?month?=?1;?month?<?13;?month++)
29?????????????{
30?????????????????writer.Write("<option?value="?+?month.ToString()?+?">"?+?month.ToString()?+?"</option>");
31?????????????}
32?
33?????????????writer.Write("</select>");
34?
35?????????????writer.Write("&nbsp");
36?
37?????????????writer.Write("<select?name='Year'?id='Year'>");
38?????????????for?(int?year?=?2008;?year?<?2014;?year++)
39?????????????{
40?????????????????writer.Write("<option?value="?+?year.ToString()?+?">"?+?year.ToString()?+?"</option>");
41?????????????}
42?????????????writer.Write("</select>");
43?????????????writer.Write("</td></tr>");
44?
45?????????????writer.Write("<tr>");
46?????????????writer.Write("<td?align='center'?colspan='2'>");
47?????????????writer.Write("<input?type='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?("支付方式")]//這些是顯示在屬性窗口底下的
????????public?virtual?string?PaymentMethodText
????????{
????????????get
????????????{
????????????????return?paymentMethod;
????????????}
????????????set
????????????{
????????????????paymentMethod?=?value;
????????????}
????????}

?

?????大家可以根據我的注釋再結合我上面的標記圖可以看看。然后其他的的一些get,set屬性都添加差不多，只是括號()內的文本，隨你寫而已！

?????到此為止，一個”好看“的控件就寫完了。至于“好用”，暫時不急，慢慢來！

?????當我們把控件添加到頁面后，查看他的“源”看到的這樣的：

?????

?

?<cc1:creditcardform1?id="CreditCardForm1_1"?runat="server"></cc1:creditcardform1>

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

?????

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

?

??????????TextBox控件的很多的屬性都顯示在標記中了，我們也希望當我們的控件一拖上頁面的時候就顯示一些包含在標記中的屬性，如下：

??????????

?<cc1:CreditCardForm2?ID="CreditCardForm2_1"?runat="server"?PaymentMethodText="我的支付"?CardholderNameText="持卡姓名"?CreditCardNoText="我的卡號"?ExpirationDateText="過期嗎？">
????????</cc1:CreditCardForm2>

??????????怎樣做？

??????????也很簡單，加些Attribute標記就行了。

??????????這些的標記是類級別的，就是說，要用在類上，我們之前家的那些標記都用在字段上，級別不同。注意哦！

??????????如下：

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

?????注意：在{0}的冒號中之后的那個"CreditCardForm2“就是類的名字，不要寫錯，否就不行！還有runat='sever'一定要寫，其他的屬性你可以隨意加，但是要保證，那些你的家的屬性是我們定義了的。例如你還可以加

CreditCardNo='信用卡號',等等。這樣之后，我們的控件就更加的專業了！

?

整個代碼如下：大家多多提意見，如果我講不夠好就說，我盡量講的更加平實！

?

?

??1?using?System;
??2?using?System.Collections.Generic;
??3?using?System.Text;
??4?using?System.Web.UI?;
??5?using?System.Web?;
??6?using?System.ComponentModel;
??7?using?System.Web.UI.WebControls?;
??8?
??9?namespace?CreditCardForm
?10?{
?11?????[DefaultProperty?("CardholderNameText")]
?12?????[ToolboxData("<{0}:CreditCardForm2?runat='server'?PaymentMethodText='支付方式'></{0}:CreditCardForm2>")]
?13?????public?class?CreditCardForm2:Control
?14?????{
?15?????????#region?屬性
?16?????????private?string?paymentMethod?=?"支付方式";
?17?????????private?string?creditCardNo?=?"信用卡號";
?18?????????private?string?cardholderName?=?"持卡人";
?19?????????private?string?expirationDate?=?"過期時間";
?20?????????private?string?submitButtonText?=?"提交";
?21?
?22?????????//以便以后二次開發?所以用了virtual
?23?????????//
?24?
?25?
?26?????????[Browsable?(true?)]//在屬性窗口中是否可見
?27?????????[Category?("Appearance")]//屬性的分類，如，行為，外觀，大家可以在屬性窗口看見這樣的分類
?28?????????[DefaultValue?("支付方式")]
?29?????????[Description?("支付方式")]//這些是顯示在屬性窗口底下的
?30?????????public?virtual?string?PaymentMethodText
?31?????????{
?32?????????????get
?33?????????????{
?34?????????????????return?paymentMethod;
?35?????????????}
?36?????????????set
?37?????????????{
?38?????????????????paymentMethod?=?value;
?39?????????????}
?40?????????}
?41?
?42?????????[Browsable?(true)]
?43?????????[Category?("Appearance")]
?44?????????[DefaultValue?("信用卡號")]
?45?????????[Description?("信用卡的號碼")]
?46?????????public?virtual?string?CreditCardNoText
?47?????????{
?48?????????????get
?49?????????????{
?50?????????????????return?creditCardNo;
?51?????????????}
?52?????????????set
?53?????????????{
?54?????????????????creditCardNo?=?value;
?55?????????????}
?56?????????}
?57?
?58?????????[Browsable?(true)]
?59?????????[Category?("Appearance")]
?60?????????[DefaultValue?("持卡人")]
?61?????????[Description?("持卡人的名字")]
?62?????????public?virtual?string?CardholderNameText
?63?????????{
?64?????????????get
?65?????????????{
?66?????????????????return?cardholderName;
?67?????????????}
?68?????????????set
?69?????????????{
?70?????????????????cardholderName?=?value;
?71?????????????}
?72?????????}
?73?
?74?????????[Browsable?(true)]
?75?????????[Category?("Appearance")]
?76?????????[DefaultValue?("過期時間")]
?77?????????[Description?("描述卡的過期時間")]
?78?????????public?virtual?string?ExpirationDateText
?79?????????{
?80?????????????get
?81?????????????{
?82?????????????????return?expirationDate;
?83?????????????}
?84?????????????set
?85?????????????{
?86?????????????????expirationDate?=?value;
?87?????????????}
?88?????????}
?89?????????[Browsable?(true?)]
?90?????????[Description?("按鈕的文本")]
?91?????????[Category?("Appearance")]
?92?????????[DefaultValue?("提交")]
?93?????????public?virtual?string?SubmitButtonText
?94?????????{
?95?????????????get
?96?????????????{
?97?????????????????return?submitButtonText;
?98?????????????}
?99?????????????set
100?????????????{
101?????????????????submitButtonText?=?value;
102?????????????}
103?????????}
104?????????#endregion
105?????????protected?override?void?Render(HtmlTextWriter?writer)
106?????????{
107?????????????writer.Write("<table?style='width:287px;height:128px;border-width:0'>");
108?????????????writer.Write("<tr>");
109?????????????writer.Write("<td>"+PaymentMethodText+?"</td>");
110?????????????writer.Write("<td>");
111?????????????writer.Write("<select?name='paymentMethod'?id='paymentMethod'?style='width:100%'>");
112?????????????writer.Write("<option?value='0'>Master</option>");
113?????????????writer.Write("<option?value='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><input?type='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><input?type='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("<select?name='Month'?id='Month'>");
132?????????????for?(int?month?=?1;?month?<?13;?month++)
133?????????????{
134?????????????????writer.Write("<option?value="?+?month.ToString()?+?">"?+?month.ToString()?+?"</option>");
135?????????????}
136?
137?????????????writer.Write("</select>");
138?
139?????????????writer.Write("&nbsp");
140?
141?????????????writer.Write("<select?name='Year'?id='Year'>");
142?????????????for?(int?year?=?2008;?year?<?2014;?year++)
143?????????????{
144?????????????????writer.Write("<option?value="?+?year.ToString()?+?">"?+?year.ToString()?+?"</option>");
145?????????????}
146?????????????writer.Write("</select>");
147?????????????writer.Write("</td></tr>");
148?
149?????????????writer.Write("<tr>");
150?????????????writer.Write("<td?align='center'?colspan='2'>");
151?????????????writer.Write("<input?type='submit'?value='"+SubmitButtonText?+"'/>");
152?????????????writer.Write("</td></tr>");
153?
154?
155?
156?
157?????????}
158?
159?????}
160?}
161?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

作者：小洋，燕洋天
出處：http://yanyangtian.cnblogs.com/

轉載于:https://www.cnblogs.com/Jeely/p/11156951.html

總結

以上是生活随笔為你收集整理的ASP.NET自定义控件组件开发 第一章 第二篇 接着待续的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。