Web自定义控件

分享于 

10分钟阅读

Web开发

  繁體

Sample Image

介绍

本文介绍以下内容:

  • 创建网站自定义控件。
  • 实现事件/委托。
  • 使用设计器实现。
  • 面向对象编程( 对象)。

背景

什么是Web用户控件?

Web用户控件易于进行,但在高级方案中使用起来可能不方便。 开发Web用户控件的方式几乎与开发网页窗体页的方式相同。 Web窗体一样,用户控件可以在可视化设计器中创建,可以用与HTML分离的代码编写它们,并且可以处理执行事件。 但是,由于Web用户控件在运行时被动态编译,因这里无法将它们添加到工具箱中。 这样,如果你习惯完整 Visual Studio. NET 设计时支持,包括属性窗口和设计视图预览,那么Web用户控件就更难使用。 另外,在应用程序之间共享用户控件的唯一方法是在每个应用程序中放置一个单独的副本。

参考:Web用户控件 vs 网络自定义控件的建议;MSDN。

什么是网站自定义控件?

Web自定义控件是编译代码,这使得它们易于使用但更难创建;Web自定义控件必须在代码中编写。 但是,创建控件后,可以将它的添加到工具箱中,并在具有完整属性窗口支持和 ASP.NET 服务器控件的所有其他设计时间功能的可视化设计器中显示它。 另外,你可以在全局程序集缓存中安装Web自定义控件的一个副本,并在应用程序之间共享它,这使得维护更加。

参考:Web用户控件 vs 网络自定义控件的建议;MSDN。

概述

如果控件有很多 static 布局,则用户控件可能会有意义。 如果控件大多是动态生成的- 对于数据绑定 table的实例行,树视图的节点或者选项卡。

Web 用户控件Web 自定义控件
更容易创建难以创建
对使用可视化设计工具的消费者的有限支持全面的可视化设计工具支持用户
每个应用程序都需要一个单独的控件副本只需要该控件的单个副本,在全局程序集缓存中
无法在 Visual Studio 中添加到工具箱中可以在 Visual Studio 中添加到工具箱中
适用于 static 布局适合动态布局

参考:Web用户控件 vs 网络自定义控件的建议;MSDN。

使用代码

样式类

要在PropertyGrid中使一种属性类型可以扩展,请执行以下操作:

TypeConverter(typeof(ExpandableObjectConverter))

指定一个组件的数据源和数据成员属性,该组件支持复杂数据绑定.无法继承此类.

Browsable(true)
  • 指定属性或者事件将在可视化设计器中显示的类别,
  • 指定组件的默认属性,
  • 指定某个属性或方法在编辑器中可以查看.无法继承此类.
Category("Style")
DefaultProertyAttribute("Style")
Description("Style")

指示当关联的属性值发生更改时,设计器应如何进行刷新.

RefreshProperties(RefreshProperties.Repaint)

表示工具箱项的属性.

ToolboxItem(false)

指示当修改这里属性应用的属性的值时,会通知父属性。

[NotifyParentProperty(true)]

确定如何将 ASP.NET 服务器控件属性或者事件持久化到 ASP.NET 页中的元数据属性。

PersistenceMode(PersistenceMode.InnerProperty)

指定设计时序列化组件上的属性时要使用的持久性类型。

DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]

返回空字符串。

publicoverridestring ToString() { return""; }

StyleClass的实现:

protected StyleClass cssStyle = new StyleClass();
 [Browsable(true), 
 NotifyParentProperty(true),
 PersistenceMode(PersistenceMode.InnerProperty),
 DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]public StyleClass CssStyle
{
 get {
 returnthis.cssStyle;
 }
 set {
 this.cssStyle = value;
 }
}

项目类别

ToTableRow() 方法将对象转换为 TableRow 以便在父对象中使用。

public System.Web.UI.WebControls.TableRow ToTableRow()
{
 /// Create new Table Row for Menu Item TableRow itemRow = new TableRow();
 /// Add new Table Cell to row itemRow.Cells.Add(new TableCell());
 /// Set Style for Row and Cell itemRow.CssClass = this.CssStyle.DetailCell;
 itemRow.Cells[0].CssClass = this.CssStyle.DetailCell;
 /// Create new Menu Item Link Button LinkButton itemButton = new LinkButton();
 /// Set Button Properties itemButton.Text = this.Text;
 itemButton.CssClass = this.CssStyle.LinkButton;
 itemButton.ID = this.Text;
 /// set Attributes for Direct Transfer or PostBackif(this.DirectLink)
 itemButton.Attributes.Add("HREF", this.HREF);
 else itemButton.Attributes.Add("HREF_Link", this.HREF);
 /// Add Button To Row itemRow.Cells[0].Controls.Add(itemButton);
 return itemRow;
}

Item 类的实现:

Item mnuItem = new Item();
mnuItem.Text = ["Menu Item"];
mnuItem.CssStyle = [this.CssStyle];
mnuItem.DirectLink = [true/false];
mnuItem.HREF = [@"http://localhost/"];
[Table].Rows.Add(mnuItem.ToTableRow());

工具箱映像

在项目中添加新的Bitmap 项。 NAME 应该与你的控制名完全相同。

Bitmap Name = [object Name].bmp
Bitmap Color = 16 Color
Bitmap Width = 16
Bitmap Height = 16
Build Action = Embedded Resource

主类

重写 OnDataBinding 以实现 [object].DataBind 方法:

protectedoverridevoid OnDataBinding(EventArgs e)
{
 this.Controls.Clear();
 menuTable = new Table();
 menuTable.Rows.Add(new TableRow());
 menuTable.Rows[0].Cells.Add(new TableCell());
 menuTable.Rows[0].CssClass = this.CssStyle.HeaderCell;
 menuTable.Rows[0].Cells[0].CssClass = this.CssStyle.HeaderCell;
 Label lblHeader = new Label();
 lblHeader.Text = this.HeaderText;
 lblHeader.CssClass = this.CssStyle.HeaderLabel;
 menuTable.Rows[0].Cells[0].Controls.Add(lblHeader);
 Controls.Add(menuTable);
 foreach(System.Data.DataRow itemRow inthis.DataSource.Rows)
 {
 Item mnuItem = new Item();
 mnuItem.CssStyle = this.CssStyle;
 mnuItem.DirectLink = false;
 mnuItem.HREF = itemRow[this.ItemColumnHref].ToString();
 mnuItem.Text = itemRow[this.ItemColumnText].ToString();
 menuTable.Rows.Add(mnuItem.ToTableRow());
 }
 base.OnDataBinding (e);
}
[DefaultProperty("Text"), 
 ToolboxData("<{0}:FlatMenu runat="server"></{0}:FlatMenu>"), 
 Designer(typeof(MyWebCustomControls.FlatMenu. Designer)),
 Serializable()]
DataTable dt = new DataTable();
dt.Columns.Add("ColA");
dt.Columns.Add("ColB");
dt.Columns.Add("ColC");
dt.Columns.Add("ColD");
DataRow dr = dt.NewRow();
dr[0] = "Item A";
dr[1] = "http://localhost/Item A";
dr[2] = "Item A";
dr[3] = "Item A";
dt.Rows.Add(dr);this.Flat1.DataSource = dt;this.Flat1.ItemColumnText = "ColA";this.Flat1.ItemColumnHref = "ColB";this.Flat1.DataBind();

将控件编译到工具箱中。右键单击并转到添加/移除项。单击浏览。然后找到已经编译的DLL。 打开/确定,你将在你的工具箱中看到 Flat Menu。

代理

publicdelegatevoid MenuItemCreateHandler(string Text, 
 string URL, System.Web.UI.WebControls.TableCell currentCell);publicdelegatevoid MenuItemSelectedHandler(string Text, string URL);

实现:

MenuItemSelectedHandler onItemSelected;publicevent MenuItemSelectedHandler MenuItemSelected
{
 add {
 onItemSelected += value;
 }
 remove {
 onItemSelected -= value;
 }
}
MenuItemCreateHandler onItemCreate;publicevent MenuItemCreateHandler MenuItemCreated
{
 add {
 onItemCreate += value;
 }
 remove {
 onItemCreate -= value;
 }
}

使用方法:

if (onItemCreate!= null)
 onItemCreate (this.Text, this.HREF, itemRow.Cells[0]);if (onItemSelected!= null)
 onItemSelected (this.Text, this.HREF);

相关文章