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

    自定义控件的构建(1)中曾提到WebControl在浏览器中被渲染为<span>,如果需要,可以重写TagKey指定其它的标签

    下面的例子,用<div>标签生成内容

    namespace MyControls
    
    { 
    
        /// <summary>
    
        /// 重写TagKey属性生成自定义的标签
    
        /// </summary>
    
        public class Glow : WebControl 
    
        {
    
            public Glow()
    
            {
    
                this.Width = Unit.Parse("500px");
    
            }
    
            public string Text
    
            {
    
                get; set;
    
            }
    
            protected override HtmlTextWriterTag TagKey 
    
            {
    
               get { return HtmlTextWriterTag.Div; }
    
            }
    
            protected override void RenderContents(HtmlTextWriter writer)
    
            {
    
                writer.Write(Text);
    
            }
    
            protected override void AddAttributesToRender(HtmlTextWriter writer)
    
            {
    
                writer.AddStyleAttribute(HtmlTextWriterStyle.Filter, "glow(Color=#ffd700,Strength=10)");
    
                base.AddAttributesToRender(writer);
    
            }
    
        }
    
    }
    

    该控件重写了基类的TagKey属性,所以查看源码是渲染成<div>,实际上不仅仅此方法可以修改生成的标签,也可以通过重写TagName属性代替Tagkey。

    上面的代码注意一下AddAttributesToRender(),一旦重写了该方法,就可以为控件生成的开始标签添加HTML和CSS特性。

    运行:

    <%@ 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:Glow ID="Glow2" runat="server" Text="Hello!" />
    
        </form>
    
    </body>
    
    </html>
    

    构建组合控件

         如果不需要从头设计一个控件,那么可以考虑构建组合控件。

         在ASP.NET中每个控件都暴露了Controls属性表示其所包含的所有子控件。

    这里利用TextBox和RequiredFieldValidator控件构建一个组合控件

    namespace MyCompositeControls
    
    {   
    
        /// <summary>
    
        /// 构建组合控件
    
        /// </summary>
    
        public class RequiredTextBox : CompositeControl
    
        {
    
            private TextBox inputbox;
    
            private RequiredFieldValidator vaildator;
    
            public string Text
    
            {
    
                get
    
                {
    
                    EnsureChildControls();
    
                    return inputbox.Text;
    
                }
    
                set
    
                {
    
                    EnsureChildControls();
    
                    inputbox.Text = value;
    
                }
    
            }
    
            protected override void CreateChildControls()
    
            {
    
                inputbox = new TextBox();
    
                inputbox.ID = "input";
    
                this.Controls.Add(inputbox);
    
                vaildator = new RequiredFieldValidator();
    
                vaildator.ID = "valInput";
    
                vaildator.ControlToValidate = inputbox.ID;
    
                vaildator.ErrorMessage = "No blank";
    
                vaildator.Display = ValidatorDisplay.Dynamic;
    
                this.Controls.Add(vaildator);
    
            }
    
        }
    
    }

    可以看出,RequiredTextBox从CompositeControl基类继承而来,并且重写了CreateChildControls()。

    这里属性Text的get与set都调用了EnsureChildControls(),其强制调用CreateChildControls(),但是会避免对CreateChildControls()多次调用,如果

    试图在调用CreateChildControls()之前使用Text属性,就会得到一个空引用,必须先创建子控件才能访问子控件的属性。

    下面的代码展示了如何使用该控件:

    
    
    <%@ Page Language="C#" AutoEventWireup="true" Trace="false"  CodeFile="TestCompositeControl.aspx.cs" Inherits="Test" %>
    
    <%@ Register TagPrefix="composite" Namespace="MyCompositeControls"%>
    
    <!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>
    
        <composite:RequiredTextBox ID="RequiredTextBox" runat="server"/>   
    
        <asp:Button ID="Button1" runat="server" Text="单击" />
    
        </div>
    
        </form>
    
    </body>
    
    </html>
    

    如果把Trace设为true的话,可以看到RequiredTextBox包含了TextBox和RequiredFieldValidator两个控件

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

  • 相关阅读:
    css的三种特性
    css选择器
    margin:0 auto 与 text-align:center 的区别
    JS如何实现点击页面内任意的链接均加参数跳转
    css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version=)
    移动端页面前端设计随笔整理
    理解:Before和:After伪元素
    时下流行的css3页面纵向滑动效果
    webapp网页调试工具Chrome Devtools
    做手机web半年遇到的问题及解决方法
  • 原文地址:https://www.cnblogs.com/626498301/p/1783984.html
Copyright © 2011-2022 走看看