我正在使用 asp.net web 用户控件将我的菜单代码全部放在一个地方,但是我有一个问题,我不知道如何告诉它将事件的 css 类附加到当前页面的菜单项。
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Soccer Managment</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="~/BackDoor/players/default.aspx?teamId=00000000-0000-0000-0000-000000000000&id=00000000-0000-0000-0000-000000000000" runat="server"><i class="fa fa-circle-o"></i> Players</a>
<li><a href="~/BackDoor/teams/default.aspx" runat="server"><i class="fa fa-circle-o"></i>Teams</a></li>
<li><a href="~/BackDoor/districts/default.aspx" runat="server"><i class="fa fa-circle-o"></i> Districts</a></li>
<li><a href="~/BackDoor/points/default.aspx" runat="server"><i class="fa fa-circle-o"></i> Players Points</a></li>
</li>
</ul>
</li>
例如,我使用的是 admin lte 主题,它按照以下方式对主元素和子菜单元素进行操作
<li class="treeview active">
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
<li><a href="profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
<li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
<li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
<li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
<li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
<li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
<li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
</ul>
</li>
最佳答案
如果你在谈论服务器端,你应该向你的控件和方法添加属性来检测它是否是指定的页面
public string CurrentPageName { get; set; }
public string IsCurrentPage(string itemName)
{
return CurrentPageName == itemName ? "class='active'" : string.Empty;
}
并在页面上以这种方式声明控件
<uc:YourMenuControl runat="server" CurrentPageName="Your Current Page" />
并像这样更新你的 li 元素
<li <%= IsCurrentPage("500.html") %>><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
<li <%= IsCurrentPage("blank.html") %>><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
如果你可以使用服务器控件,你可以用稍微不同的方式来制作它,在集合中设置你的 li 元素并将它添加到你的服务器控件
<ul class="treeview-menu" runat="server" id="myMenu"></ul>
控制代码隐藏,这里我们在代码隐藏中为CurrentPageName设置值
protected void Page_Load(object sender, EventArgs e)
{
CurrentPageName = "blank.html";
var menuItemsList = new Dictionary<string, string>()
{
{"invoice.html", " Lockscreen"},
{"lockscreen.html", " Lockscreen"},
{"blank.html", " Blank"}
};
foreach (var item in menuItemsList)
{
HtmlGenericControl li = new HtmlGenericControl("li");
HtmlGenericControl ianchor = new HtmlGenericControl("a");
ianchor.Attributes.Add("href", item.Key);
if (CurrentPageName == item.Key)
{
ianchor.Attributes.Add("class", "active");
}
HtmlGenericControl i = new HtmlGenericControl("i");
i.Attributes.Add("class", "fa fa-circle-o");
ianchor.InnerText = item.Value;
ianchor.Controls.AddAt(0, i);
li.Controls.Add(ianchor);
myMenu.Controls.Add(li);
}
}
关于c# - 如何在 asp.net webforms 中激活当前菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33663537/