如何在 ASP.NET MVC 中直观地指示当前页面? [英] How to visually indicate current page in ASP.NET MVC?
问题描述
作为讨论的基础.创建一个标准的 ASP.NET MVC Web 项目.
它将在母版页中包含两个菜单项:
如何设置指示当前页面的可视化 CSS 样式.例如,当在关于页面/控制器中时,我基本上想这样做:
<%= Html.ActionLink("About", "About", "Home", new {class="current"})%></li>
当然,在主页上时:
<%= Html.ActionLink("Home", "Index", "Home", new {class="current"})%></li>
(有一个 CSS 样式名称 current,在菜单中直观地表明这是当前页面.)
我可以将母版页中的菜单 div 拆分为内容占位符,但这意味着我必须将菜单放在每个页面上.
任何想法,有没有好的解决方案?
最简单的方法是从 ViewContext 的 RouteData 中获取当前控制器和操作.请注意签名的变化和使用@ 来转义关键字.
<% var controller = ViewContext.RouteData.Values["controller"] as string ??家";var action = ViewContext.RouteData.Values["action"] 作为字符串 ??指数";var page = (controller + ":" + action).ToLower();%><%= Html.ActionLink( "关于", "关于", "首页", null,new { @class = page == "home:about" ?当前":")%><%= Html.ActionLink( "Home", "Index", "Home", null,new { @class = page == "home:index" ?当前":")%>
请注意,您可以将它与@Jon 的 HtmlHelper 扩展程序结合起来,使其更简洁.
<%= Html.MenuLink( "About", "About", "Home", null, null, "current" ) %>
MenuActionLink 在哪里
公共静态类 MenuHelperExtensions{公共静态字符串 MenuLink(这个 HtmlHelper 助手,字符串文本,字符串动作,字符串控制器,对象路由值,对象 htmlAttributes,字符串 currentClass ){RouteValueDictionary 属性 = 新的 RouteValueDictionary( htmlAttributes );string currentController = helper.ViewContext.RouteData.Values["controller"] as string ??家";字符串 currentAction = helper.ViewContext.RouteData.Values["action"] 作为字符串 ??指数";string page = string.Format( "{0}:{1}", currentController, currentAction ).ToLower();string thisPage = string.Format( "{0}:{1}", controller, action ).ToLower();属性["class"] = (page == thisPage) ?当前类:";return helper.ActionLink( text, action, controller, new RouteValueDictionary( routeValues ), attributes );}}
As a base for discussion. Create a standard ASP.NET MVC Web project.
It will contain two menu items in the master page:
<div id="menucontainer">
<ul id="menu">
<li>
<%= Html.ActionLink("Home", "Index", "Home")%></li>
<li>
<%= Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
How can I set the visual CSS style indicating the current page. For example, when in the About page/controller, I essentially would like to do this:
<%= Html.ActionLink("About", "About", "Home", new {class="current"})%></li>
And, of course, when on the home page:
<%= Html.ActionLink("Home", "Index", "Home", new {class="current"})%></li>
(Having a CSS style names current that visually indicates in the menu that this is the current page.)
I could break out the menu div from the master page into a content place holder, but that would mean that I must put the menu on every page.
Any ideas, is there a nice solution to this?
The easiest way is to get the current controller and action from the ViewContext's RouteData. Note the change in signature and use of @ to escape the keyword.
<% var controller = ViewContext.RouteData.Values["controller"] as string ?? "Home";
var action = ViewContext.RouteData.Values["action"] as string ?? "Index";
var page = (controller + ":" + action).ToLower();
%>
<%= Html.ActionLink( "About", "About", "Home", null,
new { @class = page == "home:about" ? "current" : "" ) %>
<%= Html.ActionLink( "Home", "Index", "Home", null,
new { @class = page == "home:index" ? "current" : "" ) %>
Note that you could combine this an HtmlHelper extension like @Jon's and make it cleaner.
<%= Html.MenuLink( "About", "About", "Home", null, null, "current" ) %>
Where MenuActionLink is
public static class MenuHelperExtensions
{
public static string MenuLink( this HtmlHelper helper,
string text,
string action,
string controller,
object routeValues,
object htmlAttributes,
string currentClass )
{
RouteValueDictionary attributes = new RouteValueDictionary( htmlAttributes );
string currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home";
string currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index";
string page = string.Format( "{0}:{1}", currentController, currentAction ).ToLower();
string thisPage = string.Format( "{0}:{1}", controller, action ).ToLower();
attributes["class"] = (page == thisPage) ? currentClass : "";
return helper.ActionLink( text, action, controller, new RouteValueDictionary( routeValues ), attributes );
}
}
这篇关于如何在 ASP.NET MVC 中直观地指示当前页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!