zoukankan      html  css  js  c++  java
  • 自定义控件的构建(1)

    其实ASP.NET Framework本身已经为我们提供足够多的控件了,初学者接触ASP.NET时,多是从拖控件开始着手的,那么这种方式用了久了之后,如果想知道这背后的机制是怎样的,那么,这时候可以通过自定义控件这一系列步骤来理解这背后ASP.NET为我们做了哪些事情。

    我们从以下两个问题开始入手:1,需要编写什么类型的控件?

                                           2,从什么类继承

          自定义控件分为两种形式:完全生成控件和组合控件,这个很好理解,对于构建完全生成控件,可以指定控件呈现在浏览器的HTML,创建组合控件时,可以从已有控件构建新的控件。

          构建基础控件时,需要选择新控件的基类,这里有3种选择

                    System.Web.UI.Controls

                    System.Web.UI.WebControls.WebControl

                    System.Web.UI.WebControls.CompositeControl

         CompositeControl从WebControl类继承而来,WebControl则继承自Controls,System.Web.UI.Controls类是ASP.NET所有控件的基类,比如TextBox,GridView都是派生自该控件,其包含的所有属性,方法,事件都共享给框架内所有控件,而Web控件则从 System.Web.UI.WebControls.WebControl类继承,Control类和WebControl类不同之处在于,后者派生出的控件总是包含开始和结束标签,也正是因为如此,WebControl能够获得更多的格式化选项,比如BackColor,Font等属性

    这里举个例子:Literal控件继承自Control类,Lable继承自WebControl基类。

    构建完全生成控件

    这里定义的FullRenderControl控件是从Control基类继承

    namespace MyControls
    
    { 
    
        public class FullRenderControl : Control
    
        {
    
            public string Text
    
            {
    
                get;
    
                set;
    
            }
    
            /// <summary>
    
            /// 重写基类的Render()
    
            /// </summary>
    
            /// <param name="writer"></param>
    
            protected override void Render(HtmlTextWriter writer)
    
            {
    
                writer.Write(Text);
    
            }
    
         }
    
    }
    
    代码重写了基类的Render(),其功能是通过HtmlTextWriter类的Writer()将其写至浏览器上。

    下面代码展示了如何使用

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestFullRenderControl.aspx.cs" Inherits="_Default" %>
    
    <%@ Register TagPrefix="fullrender" Namespace="MyControls" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
        <title></title>
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
        <div>
    
        <fullrender:FullRenderControl ID="FullRenderControl1" Text="Hello!" runat="server"></fullrender:FullRenderControl>
    
        </div>
    
     </form>
    
    </body>
    
    </html>

    自定义控件需要通过<%@ Register%>指令在页面进行注册,也可以在Web.config中的<Pages/>节里注册,这时候运行程序可以看到界面上呈现字符串Hello!

    下面定义的控件是从WebControl基类继承而来

    namespace MyControls
    
    {   
    
         /// <summary>
    
         /// 继承WebControl基类
    
         /// </summary>
    
        public class FullRenderWebControl:WebControl
    
        {
    
            public string Text
    
            {
    
                get;
    
                set;
    
            }
    
            protected override void RenderContents(HtmlTextWriter writer)
    
            {
    
                writer.Write(Text);
    
            }       
    
        }
    
    }

    开头已提过,继承WebControl类创建完全控件要比Control类多继承一些属性,从前者继承时,用RenderContents()代替Render()

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestFullRenderControl.aspx.cs" Inherits="_Default" %>
    
    <%@ Register TagPrefix="fullrender" Namespace="MyControls" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
        <title></title>
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
        <fullrender:FullRenderWebControl ID="FullRenderWebControl1" Text="Hello!" BackColor="ActiveBorder" runat="server" /> 
    
        </form>
    
    </body>
    
    </html>
    这段代码展示了如何使用FullRenderWebControl控件,因为从WebControl类继承,可以看到其获得了BackColor这类属性

    显示界面:QQ截图未命名 查看源代码,界面HTML标签渲染为

     <span id="FullRenderWebControl1" style="background-color:activeborder;">Hello!</span>
    

    可以看到,WebControl默认生成<span/>标签,我在后面会讲到怎么定制标签

    本文引用了《ASP.NET 3.5揭秘(卷2)》这本书。

  • 相关阅读:
    javascript生成二维码
    Gulp--Less
    自动构建工具Gulp
    上传文件返回数据提示下载
    svg
    Grunt--Less
    node.js--Less
    浏览器端Less
    HTML5表单
    node.js模块依赖及版本号
  • 原文地址:https://www.cnblogs.com/626498301/p/1783824.html
Copyright © 2011-2022 走看看