自定义 Web 控件开发简介。

Maharishi Bhatia

3.90/5 (7投票s)

2005年2月15日

CPOL

2分钟阅读

55223

862

本文介绍了如何使用 C# 开发自定义 Web 控件。

引言

每个组织都有自己的控件，以便更快地开发软件。我的组织有一种在 Web 应用程序上显示信息、错误和警告的标准方法。所以我认为为什么不把它做成一个控件，以便不同的项目可以使用相同的控件，并且可以完全控制外观和感觉，使其融入项目 UI。虽然过去两年来我一直在研究 C# 组件，但这是我第一次有机会为 UI 开发人员开发自定义控件。我完全被自定义 Web 控件的功能以及 Visual Studio IDE 的设计时支持所震撼。

关注点

设计时编辑器

InfoImage 属性用于设置信息的图像 URL。此代码的特殊属性是 Editor 属性，该属性启用一个窗口，用于导航本地文件图像并选择我们需要的那些图像

[Bindable(true), Category("Information Details"), DefaultValue(""),
Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, 
Version=1.0.5000.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", 
typeof(UITypeEditor))]
public string InfoImage{
    get{
        return this._InfoImage;
    }
    set{
        this._InfoImage = value;
    }
}

在设计时隐藏继承的属性

由于自定义控件是从 System.Web.UI.WebControls.WebControl 类继承的，因此它有一些默认属性，例如 forecolor、backcolor 等。AccessKey 是其中一个属性，在设计时显示。我不希望在设计时向用户显示此属性。所以有一个特殊的属性称为 Browsable，如果设置为 false，则不会在设计时显示该属性。
```
[Browsable(false), Bindable(false)]
public override string AccessKey {
    get {
        return base.AccessKey;
    }
    set {
        base.AccessKey = value;
    }
}
```
隐藏详细消息

如果控件的 IsDebug 属性设置为 true，则会显示详细消息。如果您正在调试某个页面，并且想要查看详细的错误消息，那么这非常有用，此时可以将控件的 IsDebug 属性设置为 true
```
[Bindable(true),Category("Behavior"),DefaultValue(false)]
public bool IsDebug{
    get{
        return this._IsDebug;
    }
    set{
        this._IsDebug = value;
    }
}
```

异常支持

此控件直接采用 System.Exception 类的对象，并将消息和堆栈跟踪设置为控件

[Browsable(false),Bindable(true),DefaultValue(null)]
public Exception Exception{
    set{
        this._Exception = value;
        Text = this._Exception.Message;
        Details = 
          this._Exception.StackTrace+"\n\n"+this._Exception.TargetSite;
        MsgType = MessageType.ERROR;
    }
}

呈现控件

控件在设计时呈现，这与运行时呈现非常相似。因此，控件更像是所见即所得，但更容易更方便

/// <summary>
/// Render this control to the output parameter specified.
/// </summary>
protected override void Render(HtmlTextWriter output)
{
    if(Enabled){
        output.AddAttribute(HtmlTextWriterAttribute.Title,
                                             ToolTip,false);
        output.AddAttribute(HtmlTextWriterAttribute.Cellpadding,
                                        this.Cellpadding,false);
        output.AddAttribute(HtmlTextWriterAttribute.Cellspacing,
                                        this.Cellspacing,false);
        output.AddAttribute(HtmlTextWriterAttribute.Border, 
                            BorderWidth.Value.ToString(),false);
        output.AddAttribute(HtmlTextWriterAttribute.Bordercolor, 
                                        BorderColor.Name,false);
        output.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, 
                                         BorderStyle.ToString());
        output.AddAttribute(HtmlTextWriterAttribute.Bgcolor, 
                                           BackColor.Name,false);
        output.AddAttribute(HtmlTextWriterAttribute.Width,
             (Width.Value.ToString()+GetUnit(Width.Type)),false);
        output.AddAttribute(HtmlTextWriterAttribute.Height,
            (Height.Value.ToString()+GetUnit(Height.Type)),false);
        output.AddAttribute(HtmlTextWriterAttribute.Class,
                                                  CssClass,false);
        output.RenderBeginTag(HtmlTextWriterTag.Table);
    
        RenderHeader(output);
        RenderInfo(output);
        if(IsDebug && Details.Length > 0){
            RenderDetails(output);
        }
        output.RenderEndTag();
    }
}

private void RenderHeader(HtmlTextWriter output){
    output.RenderBeginTag(HtmlTextWriterTag.Tr);
        output.AddAttribute(HtmlTextWriterAttribute.Bgcolor, 
                                         TdBackColor.Name,false);
        output.AddAttribute(HtmlTextWriterAttribute.Rowspan,"2", 
                                                          false);
        output.AddAttribute(HtmlTextWriterAttribute.Width,"0%", 
                                                          false);
        output.AddAttribute(HtmlTextWriterAttribute.Height,"0%", 
                                                          false);
        output.RenderBeginTag(HtmlTextWriterTag.Td);
            switch(MsgType){
                case MessageType.ERROR:
                    output.AddAttribute(HtmlTextWriterAttribute.Src, 
                                                   ErrorImage,false);
                    break;
                case MessageType.WARNING:
                    output.AddAttribute(HtmlTextWriterAttribute.Src, 
                                                 WarningImage,false);
                    break;
                default:
                    output.AddAttribute(HtmlTextWriterAttribute.Src,
                                                    InfoImage,false);
                    break;
            }
            output.RenderBeginTag(HtmlTextWriterTag.Img);
            output.RenderEndTag();
        output.RenderEndTag();

        output.AddAttribute(HtmlTextWriterAttribute.Bgcolor, 
                                                TdBackColor.Name,false);
        output.AddAttribute(HtmlTextWriterAttribute.Width,"100%",false);
        output.AddAttribute(HtmlTextWriterAttribute.Height,"100%",false);
        switch(MsgType){
            case MessageType.ERROR:
                output.AddAttribute(HtmlTextWriterAttribute.Class, 
                                               ErrorHeaderTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(ErrorHeaderText);
                output.RenderEndTag();
                break;
            case MessageType.WARNING:
                output.AddAttribute(HtmlTextWriterAttribute.Class, 
                                             WarningHeaderTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(WarningHeaderText);
                output.RenderEndTag();
                break;
            default:
                output.AddAttribute(HtmlTextWriterAttribute.Class,
                                                InfoHeaderTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(InfoHeaderText);
                output.RenderEndTag();
                break;
        }
    output.RenderEndTag();
}

private void RenderInfo(HtmlTextWriter output){
    output.RenderBeginTag(HtmlTextWriterTag.Tr);
        output.AddAttribute(HtmlTextWriterAttribute.Bgcolor,
                                            TdBackColor.Name,false);
        switch(MsgType){
            case MessageType.ERROR:
                output.AddAttribute(HtmlTextWriterAttribute.Class,
                                           ErrorBreifTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(Text);
                output.RenderEndTag();
                break;
            case MessageType.WARNING:
                output.AddAttribute(HtmlTextWriterAttribute.Class, 
                                         WarningBreifTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(Text);
                output.RenderEndTag();
                break;
            default:
                output.AddAttribute(HtmlTextWriterAttribute.Class, 
                                            InfoBreifTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(Text);
                output.RenderEndTag();
                break;
        }
    output.RenderEndTag();
}

private void RenderDetails(HtmlTextWriter output){
    output.RenderBeginTag(HtmlTextWriterTag.Tr);
        output.AddAttribute(HtmlTextWriterAttribute.Bgcolor,
                                                TdBackColor.Name,false);
        output.AddAttribute(HtmlTextWriterAttribute.Colspan,"2",false);
        switch(MsgType){
            case MessageType.ERROR:
                output.AddAttribute(HtmlTextWriterAttribute.Class,
                                             ErrorDetailsTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(Details);
                output.RenderEndTag();
                break;
            case MessageType.WARNING:
                output.AddAttribute(HtmlTextWriterAttribute.Class, 
                                           WarningDetailsTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(Details);
                output.RenderEndTag();
                break;
            default:
                output.AddAttribute(HtmlTextWriterAttribute.Class,
                                              InfoDetailsTextCss,false);
                output.RenderBeginTag(HtmlTextWriterTag.Td);
                    output.Write(Details);
                output.RenderEndTag();
                break;
        }
    output.RenderEndTag();
}

进一步的工作

研究可以触发事件、管理客户端数据并回发数据的 Web 控件。

自定义 Web 控件开发简介。

引言

关注点

设计时编辑器

在设计时隐藏继承的属性

隐藏详细消息

异常支持

呈现控件

进一步的工作