ASP.NET 2.0内部的TabStrip生成复合控件

分享于 

16分钟阅读

Web开发

  繁體

Sample Image - TabularMultiView.jpg

介绍

本文介绍如何使用现有控件在 ASP.NET 2.0中创建选项卡条控件。 we发布了. NET 控件,我们希望在中使用many控件,比如 TabStrip,LoginXXX,等等,它们提供了比我们知道的更多控件,在 2.0中没有标签条控件。 但有好消息。 使用三个新的2.0控件( System.Web.UI.WebControls.MultiViewSystem.Web.UI.WebControls.ViewSystem.Web.UI.WebControls.Menu ),标签条实际上是非常容易构建的。

在页面中集成这些控件的web forms页面不同,我将构建 System.Web.UI.WebControls.CompositeControl 在 2.0框架中也是新的。

CompositeControl

:"。CompositeControl 是为包含子控件的自定义控件的命名容器和控件设计器功能的抽象类。"。 CompositeControl 类实现 INamingContainer 接口。 为了确保所有子控件ID属性唯一,并且可以在回发时进行数据绑定,这是必需的。"

我想你可以知道我在哪。 我将构建一个复合控件,包含嵌入的MultiViewViewMenu,以模拟tabstrip的外观和感觉。 我需要做的就是将 MultiViewViewMenu 控件添加到层次( 按照正确的顺序)的CompositeControl 控件中,并让每个控件呈现自己。 使用现有控件的优点在于它们知道如何呈现自己,因此我不需要编写任何呈现逻辑。

但是,我不会详细地检查 MultiViewViewMenu 控件。 继续之前,你需要对这些控件有深入的了解。 因此,如果需要,以下链接将带你到 MSDN:

生成 CompositeControl - TabularMultiView

现在你已经深入了解了每个控件的基本功能,我将使用它们来模仿一个 tabstrip。 Menu 控件将用于显示实际的选项卡,因这里每个 MenuItem 都以水平方式表示一个选项卡。 MultiView 将包含 View,其中每个 View 将包含特定选项卡的内容。 每个 MenuItemView 之间将有 1到 1的对应关系。 Meaning tab 0或者 MenuItem 将与 View 0 associated tab 1 etc etc etc etc。

通过 MultiViewViewMenu 控件提供的基本功能足以生成选项卡条。 为了使它的更好的开发人员,我需要扩展 View 控件以合并它的他属性和事件。 因此,我创建了一个 TabularView 类,它扩展了 View 控件。 添加了以下属性:

  • TabName ( 字符串 ) - MenuItemText 属性。
  • Selectable ( 布尔型 ) - 是否可以选择选项卡。
  • Tooltip ( 字符串 ) - MenuItem的工具提示。
PublicClass TabularView
 Inherits View
 PublicProperty TabName asString. . .
 EndPropertyPublicProperty Selectable asBoolean. . .
 EndPropertyPublicProperty ToolTip asString. . .
 EndProperty. . .EndClass

现在到真正的代码

复合控件将命名为 TabularMultiView,它继承 CompositeControl

PublicClass TabularMultiView 
 Inherits CompositeControl EndClass

对于 CompositeControl 类,不涉及太多细节,最重要的方法之一是 CreateChildControls() 方法。 这里方法用于生成控件层次结构的控制。 因此,在控件层次结构中将嵌入的MenuMultiView 控件添加到控件层次结构,例如:

ProtectedSub CreateChildControls()
. . .
 Dim menu as 
 new Menu
 Dim mltView asnew MultiView
 Me.Controls.Add(menu)
 Me.Controls.Add(mltView)
. . .EndSub

注意:上面的代码不产生任何意义。

现在我需要一种方法来在这个新的TabularMultiView 控件中嵌入标签的每个内容。 更具体来说,我将如何利用 TabularView 控件,它扩展了 System.Web.UI.WebControls.View? 通过为控件创建一个强类型集合并向控件添加名为'ParseChildren'的属性来允许类型 TabularView的内部属性控件。

这是用以下方法完成的:

DefaultProperty("Views"), _
ParseChildren(True, "Views")> _PublicClass TabularMultiView
 Inherits CompositeControl 
 private _List as List(Of TabularView)
 <Category("Behavior"), _
 Description("The TabularView collection"), _
 DesignerSerializationVisibility _
 (DesignerSerializationVisibility.Content), _
 PersistenceMode(PersistenceMode.InnerDefaultProperty)> _
 PublicReadOnlyProperty Views() As List(Of TabularView)
 GetIf _List IsNothingThen _List = New List(Of TabularView)
 EndIfReturn _List
 End Get End Property. . .EndClass

可以看到,属性的TabularMultViewViews 被分配了一个强类型的TabularView 集合集合。 设计时代码的外观如下所示:

<cc:TabularMultiView ID="tabMltView" runat="server">
 <cc:TabularView ID="TabularView1" runat="server" 
 TabName="TabName1">
 Content Here...
 </cc:TabularView> <cc:TabularView ID="TabularView2" runat="server" 
 TabName="TabName2">
 Content Here...
 </cc:TabularView></cc:TabularMultiView>

属性的TabularMultViewViews 将在控件事件的Load 之前设置。 它将自动完成,因为'ParseChildren'类属性。 因为 TabularView 扩展了 View,所以除了将 TabularView 属性添加到集合中的MultiViewViews 之外,还没有多少需要做的事情,以便将每个 TabularView 添加到集合的内部 MultiViewViews 中。 例如:

ForEach tabView As TabularView In Views
 InnerMultiView.Views.Add(tabView)Next

若要分配 MultViewActiveIndex,请向 TabularMultiView 控件添加 ActiveIndex 属性。 生成 MultiView 并将每个 TabularView 添加到 Views 集合之后,将需要设置 ActiveIndex 值。 我将在 CreateChildControls 方法中进行,以便简化。

If InnerMultiView.Views.Count> = 0AndAlsoMe.ActiveIndex _ 
 <InnerMultiView.Views.Count Then InnerMultiView.ActiveViewIndex = Me.ActiveIndexEndIf

合并菜单- 标签

在遍历collection集合并向集合的MultiViewViews 添加每个 TabularView 时,我们需要在 Menu 控件中添加一个新的MenuItem,同时也需要添加一个新的。

ForEach tabView As TabularView In Views
 InnerMultiView.Views.Add(tabView)
 InnerMenu.Items.Add(new MenuItem("name", "value"))Next

记住,我们将 TabName 属性添加到 TabularViewTabularViewTabName 属性将成为值的MenuItemText。 这同样适用于 Selectable 属性等。 另外,我们需要分配每个 MenuItemValue 属性,因此单击 MenuItem 时,我们可以将 MenuItem/Tab 与适当的TabularView 文件关联起来。 更具体地说,当单击 MenuItem 时,MenuItem的值将指定 MultiViewActiveIndex 属性。 现在,我们有如下内容:

Dim index asInteger = 0Dim menuItem as MenuItemForEach tabView As TabularView In Views
 ' Views InnerMultiView.Views.Add(tabView) 
 ' Menu items - tabs menuItem = new MenuItem(tabView.TabName, index)
 menuItem.Selectable = tabView.Selectable
 InnerMenu.Items.Add(new menuItem)
 index += 1Next

初始化 Menu 之后,在呈现之前,添加一个菜单 OnClick 处理程序( 在 CreateChildControls 方法中理想):

InnerMenu = New Menu()AddHandler m_Menu.MenuItemClick, AddressOf Menu_MenuItemClick

如果是菜单处理程序的Click,提取选定的MenuItem 值,该值将是我们之前指定的( 请参见上方)。 然后,将 MultiViewActiveIndex 分配给 MenuItem 值。

ProtectedSub Menu_MenuItemClick(ByVal sender As System.Object, _
 ByVal e As System.Web.UI.WebControls.MenuEventArgs)_
 InnerMultiView.ActiveViewIndex = CInt(e.Item.Value)
 ' Inform the user of item click eventRaiseEvent MenuItemClick(sender, e)EndSub

将所有内容放在一起- CreateChildControls() 方法

ProtectedOverridesSub CreateChildControls() 
 InnerMenu = New Menu() 
 ' Capture Menu Item click event, and change' the ActiveIndex on the MultiView AddHandler m_Menu.MenuItemClick, AddressOf Menu_MenuItemClick 
 InnerMenu.ID = "tigerMenu" InnerMenu.Orientation = Orientation.Horizontal
 InnerMenu.CssClass = Me.TabularMenuCSS 
 ' Static Menu Item Style If String.IsNullOrEmpty(Me.TabularMenuItemCSS) Then InnerMenu.StaticMenuItemStyle.BackColor = Color.DarkGray
 InnerMenu.StaticMenuItemStyle.ForeColor = Color.White
 Else InnerMenu.StaticMenuItemStyle.CssClass = Me.TabularMenuItemCSS
 InnerMenu.StaticMenuItemStyle.HorizontalPadding = 0 InnerMenu.StaticMenuItemStyle.VerticalPadding = 0 End If 
 ' Static Selected StyleIfString.IsNullOrEmpty(Me.TabularMenuItemCSS) Then InnerMenu.StaticSelectedStyle.BackColor = Color.LightGray
 InnerMenu.StaticSelectedStyle.ForeColor = Color.White
 Else InnerMenu.StaticSelectedStyle.CssClass = _
 Me.TabularMenuSelectedItemCSS
 InnerMenu.StaticSelectedStyle.HorizontalPadding = 0 InnerMenu.StaticSelectedStyle.VerticalPadding = 0EndIf 
 Dim index AsInteger = 0Dim mItem As MenuItem
 ForEach tabView As TabularView In Views
 mItem = New MenuItem(IIf(String.IsNullOrEmpty(tabView.TabName), _
 SetTabTextWidth(tabView.ID), _
 SetTabTextWidth(tabView.TabName)), _
 index.ToString()) 
 mItem.Selected = IIf(ActiveIndex.Equals(index), True, False)
 mItem.Selectable = IIf(tabView.Selectable, True, False)
 mItem.ToolTip = IIf(String.IsNullOrEmpty(tabView.TabToolTip), _
 "", tabView.TabToolTip)
 InnerMenu.Items.Add(mItem)
 index += 1Next 
 InnerMultiView = New MultiView()
 InnerMultiView.ID = "tigerMltView" For Each tabView As TabularView In Views
 InnerMultiView.Views.Add(tabView)
 Next 
 If InnerMultiView.Views.Count> = 0AndAlso ActiveIndex <_
 InnerMultiView.Views.Count Then InnerMultiView.ActiveViewIndex = ActiveIndex
 EndIfAddHandler m_MultiView.ActiveViewChanged, AddressOf _
 Mlt_ActiveIndexChanged
 Me.Controls.Add(InnerMenu)
 Me.Controls.Add(InnerMultiView)EndSub

外观和感觉

可以为嵌入到这里 TabularMultiView 控件中的Menu 控件分配级联样式表。 我提供了小图像,可以用来绕过 MenuItem的边缘来模拟选项卡的外观和感觉。 都由你来决定。 下载附加到本文的示例解决方案,运行它,并使用级联样式表属性。 本文附带的图片( 顶端) 显示了我的级联样式表。

包起来

本文提供的代码包含更多的功能和功能。 这些功能只提供额外功能;但是,它们并不会影响 TabStrip的功能。 我还包括了控制的设计者。 我找不到使用现有的MultiView设计器的方法;但是,我努力实现更可靠的设计器。 现有设计器将控件 NAME 和 Visual Studio 自定义控件框中的说明吐出。 不能使用现有 MultiView 设计器的原因是仅接受类型 System.Web.UI.WebControls.View的内部属性控件的MultiView 设计器。 你可以使用伴随的代码来查看所有这些是如何组合在一起的。 快乐编码。

更新

  • 7/15/06 - 原始版本。
  • 7/21/06 - 代码更新。
    • 添加了用于更新 ActiveIndex ( 活动选项卡)的helper 方法。
    • 添加了仅用于代码( 类文件)的下载。
  • 9/14/06 - 代码更新。
    • 固定视图视图 Bug。
      • 在 postback的某些方案中不保留 viewstate。
  • 9/28/06 - 代码更新( Bug 固定)。
    • 保留视图状态和设置活动索引
      • 现在,你不用在标记中设置活动选项卡,而是使用'SetActiveView'( 基于零的索引) 设置页面负载上的活动选项卡。 如果没有活动索引集,则会引发错误。 因此,在页面加载和不在 postback 中时,只需将活动视图索引设置为所需的选项卡。 这将解决viewstate问题。
    • 选项卡属性
      • 允许你更改标签属性,如'Selectable','Name',等等。 al在 postback 上。
    • 项目类型
      • 从Web应用程序项目向网站项目更改项目下载演示,以减轻某些用户的问题。

COM  控制  构建  asp  asp-net  tab  
相关文章