动态 ASP.NET 窗体选项卡

分享于 

6分钟阅读

Web开发

  繁體

介绍

在单独的页面上动态显示网页应用程序的表单标签? 这里自定义控件仅用于。 内容是动态驱动的,并且很容易实现。

我很烦烦在单独的页面上生成无数行,只是让人说我想要这样做。 因此,我开发了一个自定义. NET 控件来处理表单标签的生成。

颜色由样式驱动,这个示例将包括这些颜色。

实现背后的代码非常简单。 由于有人建议,我添加了一个 ClientID 属性来设置 table 单元的'id',并且我还包括了属性窗口中的CheckDirty逻辑。

'control declaration.ProtectedWithEvents FormTab1 As FormTabs.FormTabDim tab As FormTab = FormTab1'Parameters (Tab Text, Client ID, Tab URL, blnSelected)tab.AddTab("Tab 1", "tab1", "", True) 
tab.AddTab("Tab 2", "tab2", "Tab2.aspx?ID=" & txtID.Text, False)
tab.AddTab("Tab 3", "tab3", "Tab3.aspx?ID=" & txtID.Text, False)

将产生类似这样的东西:

你的. aspx 页面将如下所示:

<tablecellSpacing="0"cellPadding="0"width="100%"border="0"><tr><tdclass="tabrow"><cc1:formtabid="FormTab1"runat="server"></cc1:formtab></td> 
 </tr></table>

第一个参数给出标签的名称。 标签上就会显示出来。 第二个参数是用户在单击时将导航到的URL。 就像你看到的,它将变量引入到URL中。 第三个参数,如果你更改逻辑以查看空URL字符串,则是确定该选项卡是否为活动选项卡的。 所以,在正常情况下,应该只有一个活动选项卡,活动选项卡会根据用户的页面改变。

你需要在应用程序中包含这些样式:

.bottomline {border-bottom: #57A2DC 1px solid;}
.tabrow {background-color:#f9fbe0;}
.tab {background-color: #E7F2F8; color: #666666; 
 line-height:18px; text-align: center; 
 border: #57A2DC 1px solid;}
.tab_hover {background-color: #E3F2BB; color: #000000; 
 line-height:18px; text-align: center; 
 border: #57A2DC 1px solid; 
 cursor: hand; cursor:pointer;}
.tab_selected {background-color: #ffffff; color: #000000; 
 text-decoration: none; text-align: center; 
 height: 18px; border-left: #57A2DC 1px solid; 
 border-bottom: #ffffff 1px solid; 
 border-right: #57A2DC 1px solid; 
 border-top: #57A2DC 1px solid;}

这些风格应该是自我解释的。

要使用这里控件,你需要执行以下操作:

  • 将DLL添加到 vs 工具箱中
  • 将控件拖到网页上
  • 将样式添加到网页中
  • 在网页中包含 CheckDirty.js 文件

通常,在导航到其他页面之前,我包括"checkDirty"* 功能来检查用户是否已经更改了表单上的任何内容。 因此,CheckDirty.js 文件需要包含在你的应用程序中。 或者,在控件中移除对它的引用。 关于实现这个功能的文章很多,所以我不打算在这里讨论。 要知道,它是为了这个控制。

** 我更新了代码以允许开发人员设置是否要包括这里功能。 在这里获取CheckDirty文件:

如你所见,这个控件使你能够很容易地向Web窗体添加表单选项卡。 你可以使用这里控件控制对某些页面的访问,以获得安全原因。 只需在逻辑中构建检查授权。 可能是这样的东西:

If strUser = "Admin"Then tab.AddTab("Admin Console", "ClientID1", "admin.aspx", True|False)Else tab.AddTab("User Console", "ClientID2", "user.aspx", True|False)EndIf

改进功能( 希望)

我在表单标签中增加了一些功能。 我已经从动态驱动器中取出下拉菜单并将它的合并到这个控件中。 因此,现在可以让"子级"选项卡从"父级"选项卡飞出。 为完成这个结果,有一些更多的属性要设置:

你的代码将类似于下面这样:

'tabs.AddTab(Tab Text, URL string, ClientID, IsSelected, HasChildren)tabs.AddTab("Categories", "", "categories", False, True)
tabs.AddChildTab("categories", "Books", "books.aspx")
tabs.AddChildTab("categories", "Music", "music.aspx")
tabs.AddTab("Help", "Menu2.aspx", "help", True, True)
tabs.AddChildTab("help", "Contact Us", "contact.aspx")
tabs.AddChildTab("help", "Privacy Policy", "privacy.aspx")

我还更新了源文件( 下载更新源代码 27.5 Kb ),以便它包含一个与自定义控件项目一起使用的解决方案。 解决方案还包含一个外部JS文件控制下拉菜单,因此你需要在你的项目中包含该文件,如果你需要下拉功能。 如果你不需要项目中的下拉功能,只需将 HasChildren 属性设置为 False

我玩了几个菜单系统,但是发现来自动态驱动的那个是最好的( 最简单的)。 如果有人对进一步改进这个控制有任何建议,请告诉我。


for  asp  asp-net  form  tab  动态  
相关文章