Best technique to add selected class to list
if in the Site.Master file we have something like
<div id="menu-container">
<ul id="menu">
<li>
<%: Html.ActionLink("Frontpage", "Index", "Home")%></li>
<li>
<%: Html.ActionLink("Content", "Index", "Content")%></li>
<li>
<%: Html.ActionLink("Winners", "Index", "Winners")%></li>
<li>
<%: Html.ActionLink("Users", "Index", "Users")%></li>
<li>
<%: Html.ActionLink("Statistics", "Index", "Statistics")%></li>
<li>
<%: Html.ActionLink("Help", "Help", "Home")%></li>
</ul>
<ul id="publish">
<li>
<%: Html.ActionLink("Preview", "Index", "Preview")%></li>
</ul>
</div>
and we want, in each Content page set the correct class="selected" attribute to the right <li> what would be the best way?
Currently I'm using:
<% string url = Page.Request.Url.AbsoluteUri.ToString(); %>
<ul id="menu">
<li <% if (url.Contains("/Home")) { Response.Write("class='selected'"); } %>>
<%: Html.ActionLink("Frontpage", "Index", "Home")%></li>
<li <% if (url.Contains("/Content")) { Response.W开发者_如何学Pythonrite("class='selected'"); } %>>
<%: Html.ActionLink("Content", "Index", "Content")%></li>
<li <% if (url.Contains("/Winners")) { Response.Write("class='selected'"); } %>>
<%: Html.ActionLink("Winners", "Index", "Winners")%></li>
<li <% if (url.Contains("/Users")) { Response.Write("class='selected'"); } %>>
<%: Html.ActionLink("Users", "Index", "Users")%></li>
<li <% if (url.Contains("/Statistics")) { Response.Write("class='selected'"); } %>>
<%: Html.ActionLink("Statistics", "Index", "Statistics")%></li>
<li <% if (url.Contains("/Home/Help")) { Response.Write("class='selected'"); } %>>
<%: Html.ActionLink("Help", "Help", "Home")%></li>
</ul>
but I don't think that is the best approach.
Thanks for any help
The easiest way I've found to accomplish your goal is to add a class to the body of your page identifying which page is current through code in the master page. Then, in the CSS, you can do something like this:
#menu li { /* Styles for unselected menu items */ }
body.home #menu li.home,
body.content #menu li.content,
body.winners #menu li.winners
{
/* Styles for selected menu items */
}
This way, you can also easily add other display logic related to which page you're viewing.
Edit:
You can detect the current URL when outputting the page through accessing the ASP.NET variables, so it shouldn't matter if the menu is defined in the master page. For example:
<% var convertedUrl = Request.Url.ToString().ToLower().Replace('/', '-'); %>
<body class="<%= convertedUrl %>">
<!-- Rest of page -->
</body>
This would place the class "about-company" in your body if you were on the URL "About/Company."
You cold put all the string in a list object (anonymous or typed) and loop over.
Then you would only need one LI code block but for so small list it might be to much.
Another solution would be to use jQuery client side to set it. Ad an id or class to each LI corresponding to the value you want to match with and then add client side script that either gets location.url or if that is not applicable, uses a hidden field where you have stored the url to match with.
加载中,请稍侯......
精彩评论