ASP.NET 4.0 中 CSS 友好的菜单控件

当 HTML 内容为 ul,li 元素时，应用 CSS 会容易得多。如果我们查看直到版本 3.5 的 ASP.NET 菜单控件，它会被渲染为 Table-TR-TD 标签。虽然 Table/Tr/Td 对于显示表格数据非常有用，但有时在需要使用 CSS 进行更多操作时，它会造成很大的问题。为了克服这个问题，我们通常使用 CSS 友好适配器来以 ul/li 模式渲染 ASP.NET 控件。

ASP.NET 4.0 通过提供 “RenderingMode” 属性，使 Web 开发人员的工作更加轻松。在这里，我们可以指定 ASP.NET 菜单控件 的 RenderMode，它定义了 HTML 渲染内容类型。默认模式是 “List”，这意味着控件将被渲染为 ul/li。

根据上图所示，我们可以看到有三种模式可用。我们可以根据需要使用其中任何一种。

让我们通过使用 ASP.NET 菜单 Web 控件并检查它在 ASP.NET 4.0 中如何渲染为 HTML 来查看一个简单的示例。假设我们有以下代码片段

 <asp:Menu runat="server" ID="customeMenu" RenderingMode="List" >
            <Items>
                <asp:MenuItem Text="File" Value="File"></asp:MenuItem>
                <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
                <asp:MenuItem Text="View" Value="View"></asp:MenuItem>
                <asp:MenuItem Text="WebSite" Value="WebSite"></asp:MenuItem>
            </Items>
        </asp:Menu>

此菜单控件将在 ASP.NET 4.0 中以下面的 HTML 代码渲染，因为我们已将“List”指定为渲染模式。

<ul>
		<li><a  href="#">File</a></li>
		<li><a  href="#">Edit</a></li>
		<li><a  href="#">View</a></li>
		<li><a  href="#">WebSite</a></li>
	</ul>

要测试上述场景，请运行包含菜单控件的 Web 应用程序，并在页面渲染完成后，右键单击 aspx 页面的“查看源代码”。输出将如下所示

我们也可以使用 RenderingMode=”Table” 以类似于早期版本的方式将菜单控件生成为 HTML 表格。

因此，对于相同的代码块，

 <asp:Menu runat="server" ID="customeMenu" RenderingMode="Table" >
            <Items>
                <asp:MenuItem Text="File" Value="File"></asp:MenuItem>
                <asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
                <asp:MenuItem Text="View" Value="View"></asp:MenuItem>
                <asp:MenuItem Text="WebSite" Value="WebSite"></asp:MenuItem>
            </Items>
        </asp:Menu>

渲染的 HTML 输出如下

<table >
	<tr >
		<td><table>
			<tr>
				<td >File</a></td>
			</tr>
		</table></td>
	</tr><tr>
		<td><table >
			<tr>
				<td>Edit</a></td>
			</tr>
		</table></td>
	</tr><tr>
		<td><table >
			<tr>
				<td >View</a></td>
			</tr>
		</table></td>
	</tr><tr >
		<td><table >
			<tr>
				<td>WebSite</a></td>
			</tr>
		</table></td>
	</tr>
</table>

注意：使用上述 HTML 内容，ASP.NET 引擎会自动添加一些客户端脚本，例如 onmouseover=”Menu_HoverStatic(this)” onmouseout=”Menu_Unhover(this)” onkeyup=”Menu_Key(this)” id=”customeMenun0? 与渲染的菜单项一起，这有助于开发人员处理客户端事件。

CodeProject

归类于：.NET 4.0, ASP.NET, ASP.NET 4.0, Visual Studio 2010