web控件开发系列(-) 基础介绍

最新推荐文章于 2022-06-02 19:27:07 发布

weixin_33912246

最新推荐文章于 2022-06-02 19:27:07 发布

阅读量164

点赞数

文章标签： xhtml 数据库 ui

控件在WEB开发时经常要用到，虽然有部分已经存在工具箱里，但有时总需要根据自己的要求，开发一些
合适自己的控件。web控件开发已经成为WEB程序员必备的知识。
有过WEB开发的朋友都知道，建立一个WEB项目，Default页面显示的信息，好多人都会有Page_Load事件中
进行处理，这就对了。这个是Page页面的生命周期，控件也一样有自己的生命周期。当你了解生命周期后，
就不奇怪，为什么有部分代码要写在Page_Load事件中了。

生命周期大概有如下几个：
·实例化(Instantiate)
控件被页面或另一个控件通过调用它的构造器所实例化。这个步骤之后所列出的阶段，仅当控件加入控件树中才会发生。

·初始化(Initialize)
初始化在传入 Web 请求生命周期内所需的设置。在此阶段，控件树中的页面和全部控件通过默认方式来调用OnInit方法。开发人员可以通过重载OnInit方法，为控件提供初始化逻辑。在其生命周期的这个时候，控件能够安全地访问其置于Controls集合中的子控件，但是它不能访问控件层次中的父控件或其他层次更高的控件（如页面）

·开始跟踪视图状态(Begin Tracking View State)
这个阶段发生在初始化阶段的末尾。在此阶段页面自动调用TrackViewState方法。TrackViewState方法保证在此阶段之后，使用ViewState字典属性而产生的变化保存在控件视图状态中。在大多数情况下，Control基类提供的TrackViewState方法实现已经足够了，只有在控件定义了复杂属性时，才必须重载TrackViewState方法。

·加载视图状态（仅用于回传过程）(Load View State (postback only)）
这个阶段发生在回传时，而不是初始请求过程中，在此阶段结束时，就会自动填充控件的 ViewState 属性控件可以重写 LoadViewState 方法的默认实现，以自定义状态还原。

·加载回传数据（仅用于回传过程，为可选项）(Load Postback Data(postback only, optional))
只有在控件通过实现IPostBackDataHandler接口参与了回传数据处理时，这个阶段才发生在回传中。TextBox控件就是一个例子。在这个阶段中，控件必须从已发送的表单数据中，通过实现IPostBackDataHandler接口的LoadPostData方法更新其状态。

·加载(Load)
直到此阶段开始，控件树中的所有控件都已被初始化，并恢复到它们在先前周期最后的状态。OnLoad方法会执行所有请求共有的操作，如设置数据库查询。此时，树中的服务器控件已创建并初始化、状态已还原并且窗体控件反映了客户端的数据。如果需要实现仅在页面初始请求中执行的逻辑，那么实现该逻辑时，应该检查页面的IsPostBack属性

·引发修改事件（仅用于回传过程，为可选项）(Raise Changed Events(postback only, optional))
只有在控件通过实现IPostBackDataHandler接口参与了回传数据处理时，这个阶段才发生在回传中。在此阶段中，控件通过引发事件（如TextBox的TextChanged事件）作为一种信号-----其状态由于回传而改变（引发更改事件以响应当前和以前回发之间的状态更改）。为了参与此阶段，控件必须实现IPostBackDataHandler接口的RaisePostDataChangedEvent方法。

·引发回传事件（仅用于回传过程，为可选项）(Raise Postback Events(postback only, optional))
只有在控件通过实现IPostBackEventHandler接口参与了回传数据处理时，这个阶段才发生在回传中。在此阶段可以通过实现IPostBackEventHandler接口的RaisePostBackEvent方法来实现逻辑，以便把客户端事件映射到服务器端事件。

·预生成(PreRender)
在此阶段中，应该通过重载OnPreRender方法，执行在生成控件之前所需要的任何工作。在生成输出之前执行任何更新，可以保存在预生成阶段对控件状态所做的更改，而在生成阶段所对应的更改则会丢失。

·保存视图状态(Save View State)
如果控件不维持状态，或者它为保存其所有状态信息而使用ViewState字典，那么不必在此阶段期间实现任何附加逻辑。在此阶段期间，页面框架会自动保存ViewState字典。如果需要自定义状态管理，必须通过重载SaveViewState方法来实现自定义状态恢复，这种方法只被EnableViewState属性为true的控件所调用。在此阶段以后任何控件的改变都不会保存在控件的视图状态中。

·生成(Render)
通过这种方法，控件在输出流上通过重载Control的Render方法或WebControl类的rendering方法中的一种，来写标记文本。

·卸载(Unload)
在此阶段中，页面通过实现Page_Unload方法，来执行清除工作。作为控件开发者，应该重载Dispose方法来执行清除。

·释放(Dispose)
在此阶段，应该重载Dispose方法来释放控件所占的全部资源。

大概理解一下就可以了，不必要生记硬背。应该你以后开发过程中会慢慢深入掌握，现在背出来的概念也没什么作用的。
到这里，是否应该介绍一下控件开发的步骤了呢？

第一：通过VS2008创建一个空的解决方案(ControlRewrite)
第二：在解决方案下添加一个ASP.NET服务器控件项目(ServerControl)
第三：在解决方案下添加一个ASP.NET应用程序(WebApp)
如下图:

第四：在ServerControl添加一个类，命名为UserLabel输入下面代码：

先在SererControl项目添加System.Web引用，右键项目，选添加引用，弹出对话框中选择。

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

namespace ServerControl
{
     public class UserLabel : WebControl
    {
         private Label myLabel;

        [Description( " 标签文本 " )]
         public string labeltext
        {
             get
            {
                 // 确定这个控件存在,如果不存在的,就会创建子控件
                 // 其实看注释你只要把鼠标放到目标名称上,就看出现功能的注释,想看类的构成,点右键, 转到定义就可以看到类构成部分了
                 this .EnsureChildControls();
                 return this .myLabel.Text;
            }
             set
            {
                 this .EnsureChildControls();
                 this .myLabel.Text = value;
            }
        }

        [Description( " 标签长度 " )]
         public Unit labelWidth    // 注意控件的长度与高度都是Unit类型(看下一个注释查看的方法)
        {
             get
            {
                 this .EnsureChildControls();
                 return this .myLabel.Width;     // 鼠标放在Width上面可以看到Unit WebControl.Width,
            }
             set
            {
                 this .EnsureChildControls();
                 this .myLabel.Width = value;
            }
        }

        [Description( " 标签高度 " )]
         public Unit labelHeight
        {
             get
            {
                 this .EnsureChildControls();
                 return this .myLabel.Height;
            }
             set
            {
                 this .EnsureChildControls();
                 this .myLabel.Height = value;
            }
        }

         // 当然你在这里还可以定义好多属性,例如颜色,背景,字体大小等等

         /// <summary>
         /// 这里创建子控件
         /// </summary>
         protected override void CreateChildControls()
        {
             this .Controls.Clear();       // 清除所以控件

             this .myLabel = new Label();
             this .myLabel.Text = " 自定义的标签 " ;
             this .Controls.Add( this .myLabel);
        }

         /// <summary>
         /// 这里输出
         /// </summary>
         /// <param name="writer"></param>
         protected override void Render(HtmlTextWriter writer)
        {
             this .myLabel.RenderControl(writer);
        }

    }
}

编译一下这个类，如果没问题的就成功了，如果有问题的请
打WebApp的default.aspx页面，如果没有这个页面,请自行创建一个。

在工具箱里可以找到一个叫ServerContorl的选项卡，把UserLabel拖到页面上。
或在源代码中输入下面的代码：

<% @ Register assembly = " ServerControl " namespace = " ServerControl " tagprefix = " cc1 " %>

<! 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 >
        < cc1:UserLabel ID = " WebControl1 " runat = " server " labeltext = " WebControl1 " />
     </ div >
     </ form >
</ body >
</ html >

到设计状态下你就可以看到你自己定义的控件了。这只是一个介绍WEB控件的例子，十分简单，但可以开发出十分复杂庞大的控件，像博客园你发布文章这样的控件，或电子购物网的商品展示控件等等。我在一个项目中工发的一个绑定XML XSL产生HTML的控件也十分复杂。不过用起来简单，方便以后使用。
下篇介绍控件生命周期，通过代码展示，控件生成的步骤。