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

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

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

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

 

     我們之前開發了一個很簡單的自定義的控件，方法很簡單，只是把原來的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