[英]Changing the selected Menu items class across pages
For my website project I am using ASP.NET MVC "Razor". 对于我的网站项目,我正在使用ASP.NET MVC“剃刀”。 Learning as I go. 边学边学。
I have 5 or 6 pages on my site, and one page that is on another site. 我的网站上有5到6页,另一网站上有一页。 I want users to feel like they are using the same site for all. 我希望用户能感觉到他们都在使用同一网站。
There is a typical HTML menu for the pages which follows the standard pattern of using a XHTML unordered list and CSS to layout: 页面上有一个典型的HTML菜单,该菜单遵循使用XHTML无序列表和CSS进行布局的标准模式:
<ul id="menu">
<li class="selected"><a href="@Href("~/")">Home</a></li>
<li><a href="http://ceklog.kindel.com">cek.log</a></li>
<li><a href="@Href("~/Services")">Services</a></li>
<li><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
<li><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>
Elsewhere on SO I found questions similar to mine, where people wanted to track the selected menu item, but within a dynamic page. 在SO的其他地方,我发现了与我类似的问题,人们希望在动态页面中跟踪选定的菜单项。 For example: 例如:
Javascript Changing the selected Menu items class Javascript更改选定的菜单项类
But this approach won't work in my case because in my case the user is not changing a selection on one page, but navigating to another page completely. 但是这种方法在我的情况下不起作用,因为在我的情况下,用户不是在一个页面上更改选择,而是完全导航到另一页。
How can this be done? 如何才能做到这一点?
...and I figured it out. ...我发现了。
I used Razor to implement this on the server side. 我使用Razor在服务器端实现此功能。
First I implemented a function on my _SiteLayout.cshtml
page (the template all pages use): 首先,我在_SiteLayout.cshtml
页面(所有页面使用的模板)上实现了一个功能:
@functions {
public string Selected(string PageTitle) {
if (Page.Title == PageTitle)
return "selected";
else
return "";
}
}
Then I used this function in my list: 然后,我在列表中使用了此功能:
<ul id="menu">
<li class="@Selected("Home")"><a href="@Href("~/")">Home</a></li>
<li class="@Selected("cek.log")"><a href="http://ceklog.kindel.com">cek.log</a></li>
<li class="@Selected("Services")"><a href="@Href("~/Services")">Services</a></li>
<li class="@Selected("Charlie's Stuff")"><a href="@Href("~/Charlie")">Charlie's Stuff</a></li>
<li class="@Selected("Contact")"><a href="@Href("~/Contact.cshtml")">Contact</a></li>
</ul>
Works perfectly. 完美运作。 On my external page, I just hand-coded it since it's based on Wordpress and not Razor. 在我的外部页面上,我只是对其进行了手工编码,因为它基于Wordpress而不是Razor。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.