asp.net控件开发基础(1)

asp.net本身提供了很多控件,提供给我们这些比较懒惰的人使用,我认为控件的作用就在此,因为我们不想重复工作,所以要创建它,这个本身便是一个需求的关系,所以学习控件开发很有意思. 

wrox网站上有本书 Professional ASP.NET 2.0 Server Control and Component Development 

现在还没有出版,但网站上放出了代码,所以正好下载过来学习一下. 

我看过前几章代码,环环相扣,作者用不同的知识向我们展示同一个效果,所以循序渐进的学下来很有好处. 

虽然自己对控件开发还不是很熟悉,但我感觉以下几点很重要,是我自己总结的 

1.了解控件之间的继承关系 

  最好是先看看看System.Web.UI命名空间 

(1)Control 类,所有的控件都共享的一个类,你需要去看下其里面受保护的几个方法和属性,虽然一下看不完,以后会发现常常用到这些方法 

大家可以在MSDN看一下其派生类 

(2)HtmlTextWriter 类 

不得不了解的一个类,主要工作就是我们写的标记字符和文本输出 

2.重写方法 

(1) 必须继承Control类
    (2) 重写Control类的Render方法,这个是必须的,因为其他控件都继承了Control 类类,所以几乎所有控件都有这个方法 

3.熟悉元数据 

大家都知道asp.net控件属性在编辑器上是分类的,如外观,行为,布局等,每个属性还给出了解释 

简单的元数据就是起到这个作用,当然你也可以不加,但使用了元数据让人感到有亲切感,写法如
    下
    [CategoryAttribute("Appearance")] 

要使用元数据,必须引用System.ComponentModel命名控件,一般你如果写组件的话,不可能不用到这样类库。具体的MSDN上有所介绍。 

一.输出字符串
    说多了没意思,还是来演练吧。首先你得了解HTML。来看下面代码,效果就是输出HTML到客户端 

示例一 


   


   


   
   
       
       
       
       


        using
         System;
           
           


        using
         System.Web.UI;
           
           


           
           


        namespace
         CustomComponents
           
           


           


       
           


       
            {
               
               


               

 
            /**/
           
                ///
                
                <summary>
               
                   
                   

 
                ///
                 Summary description for CreditCardForm
                   
                   

 
                ///
                
                </summary>
               
           
           


              
            public
            
            class
             CreditCardForm1 : Control
               
               


               

 
           
               


           
                {
                   
                   

   
                protected
                
                override
                
                void
                 Render(HtmlTextWriter writer)
                   
                   


                   

   
               
                   


               
                    {
                       
                       

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

      writer.Write(
                    "
                    <tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td><strong>Payment Method</strong></td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <select name='PaymentMethod' id='PaymentMethod' style='width:100%;'>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <option value='0'>Visa</option>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <option value='1'>MasterCard</option>
                    "
                    );
                       
                       

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

      writer.Write(
                    "
                    </td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td><strong>Credit Card No.</strong></td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td><input name='CreditCardNo' id='CreditCardNo' type='text' /></td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td><strong>Cardholder's Name</strong></td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td><input name='CardholderName' id='CardholderName' type='text' /></td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td><strong>Expiration Date</strong></td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <select name='Month' id='Month'>
                    "
                    );
                       
                       

     
                    for
                     (
                    int
                     day 
                    =
                    
                    1
                    ; day 
                    <
                    
                    13
                    ; day
                      
                    )
                       
                       


                       

     
                   
                       


                   
                        {
                           
                           

       
                        if
                         (day 
                        <
                        
                        10
                        )
                           
                           

          writer.Write(
                        "
                        <option value='
                        "
                        
                        
                         day.ToString() 
                        
                        
                        "
                        '>
                        "
                        
                        
                        
                        "
                        0
                        "
                        
                        
                         day.ToString() 
                        
                        
                        "
                        </option>
                        "
                        );
                           
                           

       
                        else
                       
                           
                           

          writer.Write(
                        "
                        <option value='
                        "
                        
                        
                         day.ToString() 
                        
                        
                        "
                        '>
                        "
                        
                        
                         day.ToString() 
                        
                        
                        "
                        </option>
                        "
                        );
                           
                           

      }
                   
                       
                       

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

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

      writer.Write(
                    "
                    <select name='Year' id='Year'>
                    "
                    );
                       
                       

     
                    for
                     (
                    int
                     year 
                    =
                    
                    2005
                    ; year 
                    <
                    
                    2015
                    ; year
                      
                    )
                       
                       


                       

     
                   
                       


                   
                        {
                           
                           

        writer.Write(
                        "
                        <option value='
                        "
                        
                        
                         year.ToString() 
                        
                        
                        "
                        '>
                        "
                        
                        
                         year.ToString() 
                        
                        
                        "
                        </option>
                        "
                        );
                           
                           

      }
                   
                       
                       

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

      writer.Write(
                    "
                    </td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td align='center' colspan='2'>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <input type='submit' value='Submit' />
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </table>
                    "
                    );
                       
                       


                       
                       

     
                    base
                    .Render(writer);
                       
                       

    }
               
                   
                   

  }
           
               
               

}
       
           
           



 

效果很简单,其实就一直在输出HTML再加几个属性,大家可以直接把代码放在App_Code文件夹里,就可自动编译,当然也可以创建web控件库.
    注意要继承Control类,重写Render方法,用HtmlTextWriter类的Write输出HTML 

使用控件 

(1).需要先注册一下 

<%@ Register TagPrefix="custom" Namespace="CustomComponents" %> 

(2) 然后就使用标签输出效果 

<custom:CreditCardForm1 runat="server" ID="ccf" /> 

下为效果图
    


   


    

二.改善,加入属性和元数据 

可能上面做出的 控件毫无用处,但却可以让你熟悉一下步骤,上面的控件定的很死,没有定义任何属性,用处不大,下面来改造 

我们来定义常用属性,然后再输出,这样我们就可以修改控件的属性了, 

示例二 


   


   


   
   
       
       
       
       


        using
         System;
           
           


        using
         System.Web.UI;
           
           


        using
         System.ComponentModel;
           
           


           
           


        namespace
         CustomComponents
           
           


           


       
           


       
            {
               
               

  [DefaultPropertyAttribute(
            "
            CardholderNameText
            "
            )]
               
               

    [ToolboxData(
            @"
            <{0}:CreditCardForm2
               
               

    PaymentMethodText='信用卡类型' CreditCardNoText='信用卡卡号'
               
               

    CardholderNameText='信用卡持有者姓名' SubmitButtonText = '提交' 
               
               

    runat='server'></{0}:CreditCardForm2>
            "
            )
               
               

    ]
               
               

 
            public
            
            class
             CreditCardForm2 : Control
               
               


               

 
           
               


           
                {
                   
                   

   
                private
                
                string
                 paymentMethodText 
                =
                
                "
                信用卡类型
                "
                ;
                   
                   

   
                private
                
                string
                 creditCardNoText 
                =
                
                "
                信用卡卡号
                "
                ;
                   
                   

   
                private
                
                string
                 cardholderNameText 
                =
                
                "
                信用卡持有者姓名
                "
                ;
                   
                   

   
                private
                
                string
                 expirationDateText 
                =
                
                "
                最后使用时间
                "
                ;
                   
                   

   
                private
                
                string
                 submitButtonText 
                =
                
                "
                提交
                "
                ;
                   
                   


                   
                   

    [BrowsableAttribute(
                true
                )]
                   
                   

    [DescriptionAttribute(
                "
                获取和设置信用卡类型
                "
                )]
                   
                   

      [DefaultValueAttribute(
                "
                信用卡类型
                "
                )]
                   
                   

    [CategoryAttribute(
                "
                Appearance
                "
                )]
                   
                   

   
                public
                
                virtual
                
                string
                 PaymentMethodText
                   
                   


                   

   
               
                   


               
                    {
                       
                       


                       

     
                    get
                    
                   
                       


                   
                        { 
                        return
                        
                        this
                        .paymentMethodText; }
                   
                       
                       


                       

     
                    set
                    
                   
                       


                   
                        { 
                        this
                        .paymentMethodText 
                        =
                         value; }
                   
                       
                       

    }
               
                   
                   


                   
                   

    [BrowsableAttribute(
                true
                )]
                   
                   

    [DescriptionAttribute(
                "
                获取或设置信用卡卡号
                "
                )]
                   
                   

    [DefaultValueAttribute(
                "
                信用卡卡号
                "
                )]
                   
                   

    [CategoryAttribute(
                "
                Appearance
                "
                )]
                   
                   

   
                public
                
                virtual
                
                string
                 CreditCardNoText
                   
                   


                   

   
               
                   


               
                    {
                       
                       


                       

     
                    get
                    
                   
                       


                   
                        { 
                        return
                        
                        this
                        .creditCardNoText; }
                   
                       
                       


                       

     
                    set
                    
                   
                       


                   
                        { 
                        this
                        .creditCardNoText 
                        =
                         value; }
                   
                       
                       

    }
               
                   
                   


                   
                   

    [BrowsableAttribute(
                true
                )]
                   
                   

      [DescriptionAttribute(
                "
                获取或设置信用卡持有者姓名
                "
                )]
                   
                   

    [DefaultValueAttribute(
                "
                信用卡持有者姓名
                "
                )]
                   
                   

    [CategoryAttribute(
                "
                Appearance
                "
                )]
                   
                   

   
                public
                
                virtual
                
                string
                 CardholderNameText
                   
                   


                   

   
               
                   


               
                    {
                       
                       


                       

     
                    get
                    
                   
                       


                   
                        { 
                        return
                        
                        this
                        .cardholderNameText; }
                   
                       
                       


                       

     
                    set
                    
                   
                       


                   
                        { 
                        this
                        .cardholderNameText 
                        =
                         value; }
                   
                       
                       

    }
               
                   
                   


                   
                   

    [BrowsableAttribute(
                true
                )]
                   
                   

      [DescriptionAttribute(
                "
                获取或设置最后使用时间
                "
                )]
                   
                   

      [DefaultValueAttribute(
                "
                最后使用时间
                "
                )]
                   
                   

    [CategoryAttribute(
                "
                Appearance
                "
                )]
                   
                   

   
                public
                
                virtual
                
                string
                 ExpirationDateText
                   
                   


                   

   
               
                   


               
                    {
                       
                       


                       

     
                    get
                    
                   
                       


                   
                        { 
                        return
                        
                        this
                        .expirationDateText; }
                   
                       
                       


                       

     
                    set
                    
                   
                       


                   
                        { 
                        this
                        .expirationDateText 
                        =
                         value; }
                   
                       
                       

    }
               
                   
                   


                   
                   

    [BrowsableAttribute(
                true
                )]
                   
                   

    [DescriptionAttribute(
                "
                获取或设置按钮标签
                "
                )]
                   
                   

    [DefaultValueAttribute(
                "
                提交
                "
                )]
                   
                   

    [CategoryAttribute(
                "
                Appearance
                "
                )]
                   
                   

   
                public
                
                virtual
                
                string
                 SubmitButtonText
                   
                   


                   

   
               
                   


               
                    {
                       
                       


                       

     
                    get
                    
                   
                       


                   
                        { 
                        return
                        
                        this
                        .submitButtonText; }
                   
                       
                       


                       

     
                    set
                    
                   
                       


                   
                        { 
                        this
                        .submitButtonText 
                        =
                         value; }
                   
                       
                       

    }
               
                   
                   


                   
                   

   
                protected
                
                override
                
                void
                 Render(HtmlTextWriter writer)
                   
                   


                   

   
               
                   


               
                    {
                       
                       

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

      writer.Write(
                    "
                    <tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td>
                    "
                    
                    
                     PaymentMethodText 
                    
                    
                    "
                    </td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <select name='PaymentMethod' id='PaymentMethod' style='width:100%;'>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <option value='0'>Visa</option>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <option value='1'>MasterCard</option>
                    "
                    );
                       
                       

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

      writer.Write(
                    "
                    </td>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    </tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <tr>
                    "
                    );
                       
                       

      writer.Write(
                    "
                    <td>
                    "
                &