如何为绑定SiteNodeMap的ASP:menu控件的指定菜单项设置条件CSS样式

核心逻辑 #

不要尝试直接在StaticMenuItemStyle标签内嵌入Eval或者if判断——该标签对应的是所有静态菜单项的全局样式配置，不属于数据绑定模板范畴，内嵌的条件表达式无法被正常解析执行。利用已经注册的OnMenuItemDataBound事件逐项判断匹配规则，是最稳定的实现路径。

第一步：调整前端控件配置 #

移除原代码中全局生效的红色边框样式，给所有菜单项配置默认无红边的基础样式，避免全菜单带上不必要的红色边框：

<asp:Menu ID="menu121" runat="server" DataSourceID="mapDataSource" OnMenuItemDataBound="itemdatabound">
    <!-- 全局默认静态菜单样式，不设置红色边框 -->
    <StaticMenuItemStyle BorderStyle="None" BorderWidth="0" />
</asp:Menu>

如果需要给所有菜单项保留基础边框（比如1px浅灰边框），只需要把全局样式的对应属性改为默认值即可，匹配到的特殊菜单项会自动覆盖基础样式。

第二步：编写菜单项绑定事件的判断逻辑 #

在后端对应的itemdatabound事件方法中，逐次判断当前绑定的菜单项是否为名称为“Tasks”的项，匹配成功就单独给它设置红色边框样式：

using System.Web.UI.WebControls;
using System.Drawing;

protected void itemdatabound(object sender, MenuEventArgs e)
{
    // 取出当前菜单项绑定的SiteMap数据源节点
    SiteMapNode currentNode = e.Item.DataItem as SiteMapNode;
    // 匹配规则：菜单项名称为Tasks
    if (currentNode != null && currentNode.Title == "Tasks")
    {
        // 给当前项单独写入边框样式，优先级高于全局样式
        e.Item.BorderStyle = BorderStyle.Solid;
        e.Item.BorderWidth = Unit.Pixel(1);
        e.Item.BorderColor = Color.Red;
    }
}

注意事项 #

• 如果“Tasks”是动态展开的子菜单项，不需要调整事件逻辑，同样会在菜单项绑定触发事件时被识别并应用对应样式。
• 事件触发的时机刚好是每个菜单项完成数据绑定的阶段，此时给单个菜单项赋值的样式优先级高于全局样式集合，不会出现样式被全局配置覆盖的问题。

内容的提问来源于stack exchange，提问作者Sir Richard Jr