母版页中的菜单控件无法使用 CSS 样式

发布于 2024-09-03 19:19:00 字数 2083 浏览 5 评论 0原文

我正在开发一个使用 ASP.NET 3.5 和 C# 的 Web 应用程序。从结构上讲，我有一个带有菜单控件的母版页。该控件用作我的导航，它从 SiteMapDataSource 控件和相应的 Web.sitemap 文件获取其项目。

问题是当您指定 CssClass 属性时，某些样式无法正确呈现。更具体地说，选定的样式和悬停样式不响应 CSS 样式。考虑下面的代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>A webpage</title>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
    <asp:Menu 
        ID="navMenu" 
        Orientation="Horizontal"
        StaticMenuStyle-CssClass="staticMenu"
        StaticMenuItemStyle-CssClass="staticMenuItem"
        StaticSelectedStyle-CssClass="staticSelectedItem"
        StaticHoverStyle-CssClass="staticHoverItem"
        runat="server">
    </asp:Menu>
    <asp:SiteMapDataSource ID="srcSiteMap" runat="server" ShowStartingNode="false" />
    <br />
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

假设我有一个相应的 .css 文件，其中包含以下内容：

.staticMenuItem { background-color:Red; }
.staticSelectedItem { background-color:Green; }
.staticHoverItem { background-color:Blue; }

将发生的情况是我的项目背景将正确为红色，但我选择的项目不会是绿色，并且我将鼠标悬停在其上的项目也不会是蓝色的。无论我是否将样式包含在母版页的头部或 web.config 文件中指定的默认主题的外部文件中，这似乎都是正确的。

如果我在 asp.net xml 中指定样式，如下所示：

<asp:Menu
    ID="navMenu"
    Orientation="Horizontal"
    runat="server">
<StaticSelectedStyle 
    BackColor="Green"
    Font-Underline="True"
    Font-Bold="True" />
<StaticHoverStyle 
    BackColor="Gray" />
</asp:Menu>

它似乎在 Firefox 中正常工作，但该样式永远不会嵌入到 Internet Explorer 中的 html 中。奇怪的。

有谁知道导致此问题的原因以及如何巧妙地解决它？我知道我也许能够以编程方式确定当前页面并手动选择相应的菜单项，以便它接收正确的样式类，但在我诉诸 C# 和 Javascript 一起修复此功能之前，我对想法持开放态度。

原文

I'm working on a web application that uses ASP.NET 3.5 and C#. Structurally, I have a master page with a menu control on it. The control serves as my navigation, and it gets its items from a SiteMapDataSource control and a corresponding Web.sitemap file.

The problem is that some styles do not render properly when you specify the CssClass property. More specifically, the selected and hover styles don't respond to css styles. Consider the code below:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>A webpage</title>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
    <asp:Menu 
        ID="navMenu" 
        Orientation="Horizontal"
        StaticMenuStyle-CssClass="staticMenu"
        StaticMenuItemStyle-CssClass="staticMenuItem"
        StaticSelectedStyle-CssClass="staticSelectedItem"
        StaticHoverStyle-CssClass="staticHoverItem"
        runat="server">
    </asp:Menu>
    <asp:SiteMapDataSource ID="srcSiteMap" runat="server" ShowStartingNode="false" />
    <br />
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

Suppose I had a corresponding .css file with the following:

.staticMenuItem { background-color:Red; }
.staticSelectedItem { background-color:Green; }
.staticHoverItem { background-color:Blue; }

What will happen is that my item backgrounds will properly be red, but my selected item will not be green and the item I'm hovering my mouse over will not be blue. This seems true regardless of whether or not I include the style in the head of the master page or in an external file in default theme as specified in the web.config file.

If I specify the styles in the asp.net xml like so:

<asp:Menu
    ID="navMenu"
    Orientation="Horizontal"
    runat="server">
<StaticSelectedStyle 
    BackColor="Green"
    Font-Underline="True"
    Font-Bold="True" />
<StaticHoverStyle 
    BackColor="Gray" />
</asp:Menu>

It appears to work properly in Firefox, but the style is never embedded in the html in Internet Explorer. Odd.

Does anybody have any insight into what is causing this problem and how to neatly work around it? I'm aware I might be able to programmically determine the current page and select the corresponding menu item manually so it receives the proper style class, but before I resort to hacking C# and Javascript together to fix this functionality, I'm open to ideas.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一杆小烟枪 2024-09-10 19:19:00

很奇怪，当我使用我在新解决方案中提供的代码时，它运行得很好。显然，我最初的解决方案是使用 ASP.NET 4.0，并且出于某种原因，复制此处给出的代码不起作用。我尝试在 Visual Studio 中指定 ASP.NET 3.5 作为编译器，你瞧，它成功了。当我再次将 ASP.NET 4.0 设置为编译器时，它起作用了。

经过仔细检查，我发现将 Visual Studio 2010 解决方案从 ASP.NET 3.5 转换为 ASP.NET 4.0 将 web.config 文件中的 controlRenderingCompatibilityVersion 属性设置为“true”。这会导致菜单控件呈现为表格（如 3.5 中所示）而不是列表项（如 4.0 中所示）。删除此属性再次破坏了页面，并将菜单控件的 RenderingMode 属性设置为“table”修复了该问题。

所以，总而言之，这个错误似乎只存在于 ASP.NET 4.0 中，菜单控件呈现为列表，至少对我来说是这样。如果其他人有进一步的见解，我很高兴听到。

回复收藏 0 原文

沉溺在你眼里的海 2024-09-10 19:19:00

遇到同样的问题，将 web.config - controlRenderingCompatibilityVersion 从 3.5 更改为 4.0，问题得到解决。

我认为这是在添加 AjaxControlKit 之后发生的。

这有效：

<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
    <controls>
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
    </controls>
</pages>

Had the same issue, changed web.config - controlRenderingCompatibilityVersion from 3.5 to 4.0, and the problem was solved.

I think it happened after adding AjaxControlKit.

This works:

<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
    <controls>
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
    </controls>
</pages>

回复收藏 0 原文