3

我仍在学习 asp.net，想知道是否有一种简单的方法可以将 id="current" 设置为导航栏，以便根据用户所在的页面突出显示该页面。我的模板设置为使用 id="current" 来更改链接的样式，并且我有 i 类来设置每个选项卡的样式。

这是我的 Site.Master 中的代码

<nav id="navigation" class="style-1">

<div class="left-corner"></div>
<div class="right-corner"></div>

<ul class="menu" id="responsive">

    <li><a href="home.aspx" id="current"><i class="home"></i> Home</a></li>

    <li><a href="Calendar.aspx"><i class="calendar"></i>Calendar</a></li>

    <li><a href="Bill.aspx"><i class="list"></i>Bills</a></li>

</ul>
</nav>

就像我说的，我还在学习，所以我不确定将它放在 ContentPlaceHolder 中是否更好。我试图只请求 URL 并执行 if 语句，但我不确定如何设置 id=。

任何帮助都会很棒。

谢谢

4

3 回答 3

7

您应该考虑设置class菜单项的 ，而不是id以将其显示为突出显示。

你可以这样做。为您的每个链接
添加一个id和：runat="server"

<li><a href="home.aspx" id="HomeLink" runat="server"><i class="home"></i> Home</a></li>
<li><a href="Calendar.aspx" id="CalendarLink" runat="server"><i class="calendar"></i>Calendar</a></li>
<li><a href="Bill.aspx" id="BillLink" runat="server"><i class="list"></i>Bills</a></li>

然后在您的母版页的代码隐藏中，您可以将类设置为每个导航到的类：

protected void Page_Load(object sender, EventArgs e)
{
    SetCurrentPage();
}

private void SetCurrentPage()
{
    var pageName = GetPageName();

    switch (pageName)
    {
        case "home.aspx":
            HomeLink.Attributes["class"] = "current";
            break;
        case "Calendar.aspx":
            CalendarLink.Attributes["class"] = "current";
            break;
        case "Bill.aspx":
            BillLink.Attributes["class"] = "current";
            break;
    }
}

private string GetPageName()
{
    return Request.Url.ToString().Split('/').Last();
}

这会将与您当前页面匹配的链接类别设置为current. 当然，您需要在样式表中定义该类。但这应该有效。

于 2013-02-04T16:22:34.953 回答
0

在控件中以编程方式设置 id 不是一个好习惯……这取决于您要如何确定“当前”或活动状态。

如果您使用的是 ASP.NET 表单，则可以考虑使用菜单 ASP.NET 控件，该控件将一个类分配给“活动”项，并且可以与 ASP.NET 站点地图配对/数据绑定。

如果您不想使用 ASP.NET 表单，您可以在 href 标记中放置函数评估，并在 ASP.NET Master Page 的代码后面声明该函数。就像是

<a href="home.aspx" class="<% CurrentOrNot("home") %>"> ...

然后声明一个返回字符串的函数：

public void CurrentOrNot(string navItem)
{
    //Do evaulation on URL to determine if we're on the current one or not.
    //pseudocode: if(navItem == Current.Url) return "mycssclassthatiscurrentnav"; else "";

}

在您自己动手之前检查 ASP.NET 菜单。

于 2013-02-04T16:18:07.303 回答
0

这可能不是最好的答案，但我最近尝试做一些类似于你正在尝试的事情。首先我设置一个变量来表示每个菜单链接的 css 类，然后我获取当前文件路径并检查它是否包含位置，然后根据页面是否为活动页面来设置 css 类。

 @{
            //some how find out what page we are on so we can set the active attribute
            var HomeClass = "non-active";
            var AboutClass = "non-active";

            string path = HttpContext.Current.Request.FilePath;
            if (path.Contains("Home"))
            {
                HomeClass = "active";
            }
            if (path.Contains("About"))
            {
                AboutClass = "active";
            }



    }

然后对于菜单，我为类属性做了这个

<a href="/home" class="@HomeClass"></a>
< a href="/about" class=@AbouitClass"> </a>
于 2013-02-04T16:19:14.213 回答