基于 ListApart 的 MenuApart.Net

• 下载源代码 - 52.31 KB

引言

任何对 HTML 设计感兴趣的人可能都熟悉 www.alistapart.com 和无表格 HTML 开发。

基于该网站和 Jeffrey Zeldman 本人的理念，我想开发一个基于列表的菜单，该菜单可以通过可配置的 .NET 控件在 ASP.NET 中部署。
菜单的要求应该是：易于部署、配置、样式设置和维护，并生成可在大多数主流浏览器中运行的轻量级 HTML 代码。
因为菜单基于 HTML 列表项（参见 alistapart.com 中的 Suckerfish Dropdowns），我将其命名为 MenuApart.Net。 MenuApart.Net 轻量、可访问、符合标准且跨浏览器兼容。

背景

如果您不熟悉良好和干净的 HTML 设计，您可以看看 alistapart.com 网站或在 Google 上搜索“alistapart”。 这将为您提供大量信息，以了解对轻量级、符合标准、跨浏览器兼容的 HTML 设计的需求。 

Using the Code

该代码由两个 XML 源文件组成，其中包含主菜单和子菜单的源数据，以及 2 个将生成基于列表的菜单的重复器。
菜单本身是一个 .NET 用户控件，可以在 ASP.NET 母版页或普通的 ASP.NET 网页中注册。 这取决于您希望如何使用菜单，以及您是否正在使用母版页驱动的 Web 应用程序。
菜单的样式完全由 CSS 控制，您可以轻松地为您的 Web 应用程序设置所需的样式。

以下代码片段显示了相当简单且易于维护的 XML 代码

<!-- Horizontal Upper Menu -->
<MainMenu>
	<Title>Customers</Title>
	<Command>Customer</Command>
	<Width>93px</Width>
	<ToolTip>Customers</ToolTip>
</MainMenu>
	
<!-- SubMenu -->

<SubMenu>
	<ParentItem>Customers</ParentItem>
	<Title>Create Customer</Title>
	<Command>CustomerCreate</Command>
	<Width>93px</Width>
	<ToolTip>Here you can create customers</ToolTip>
</SubMenu>

一个 .NET DataSet 用 XML 数据填充，并将被 DataBinded 到相应的重复器。
很容易操作生成的 MenuApart。 例如，您可以使用以下语句为菜单项设置另一种样式

Master.MenuApartSetActive = command; 

该命令是一个在 XML DataFile 中设置并绑定到菜单 LinkButton 部分的 string。命令字符串可以通过会话或查询字符串传递，也可以直接从 MenuApart LinkClick 处理程序缓存。 它可用于控制页面重定向或触发方法或引发事件。

使用以下代码，您可以为某个菜单项设置另一种样式。 与命令类似的样式...

Master.MenuApartSetActive

...在 CSS 中设置，如下所示

.MainNormal
	{
	    color: #fff;
	    background-color: #036;
	}
	.MainActive
	{
	    color: #fff;
	    background-color: #369;
	}
	.SubNormal
	{
		color: #fff;
		background-color: #036;
	}
	
	.SubActive
	{
	    color: #fff;
	    background-color: #369;
		
	}

像 Width、Tooltips 等属性可以在 XML 文件中设置。 当需要更多属性时，您可以将属性添加到 XML 文件中，并将其设为
在 MenuApart 控件中使用的 LinkButton 的一个属性。
MenuApart 控件的主要事件是 MenuApart_LinkClick 事件。 此事件将为您提供灵活性，以在用户单击菜单项后执行任何需要执行的操作。 

protected void MenuApart1_LinkClick(object sender, MenuApartEventArgs e)
    {
        switch (e.Command)
        {
            case "RoodMitek":
                Response.Redirect("roodmitek.nl?Command=" + e.Command);
                break;
            case "Christian Vos":
                Response.Redirect("christianvos.nl?Command=" + e.Command);
                break;
            default:
                Response.Redirect("default.aspx?Command=" + e.Command);
                break;
        }
    }

每个 WebPage 都可以有自己的 MenuApart.Net 控件配置。 这是可能的，通过给 MenuApart.Net 一个不同的 XML 源。 您可以在母版页中只注册一个控件，并且仍然让此母版页下的每个 WebPage 拥有自己的不同菜单。 

//For this page the menu is changed:
string filePath = ConfigurationManager.AppSettings["MenuApartContact_SettingsFile"];
Master.MenuApartSourceFile = filePath;

关注点

因为 .NET Repeater 控件非常灵活且轻量，所以您可以根据需要塑造和设置菜单的样式，水平、垂直、级联等，但请记住，您永远不应该使用 <table></table> 标签。

历史

• 2003 年 6 月 初始版本 1.0