使用ASP.NET MVC中的控制器和用户控件设置活动选项卡的简单方法?
-
08-07-2019 - |
题
如何使用“当前”创建标签式导航用户界面中突出显示的标签?
解决方案
在MVC之前,我查看了文件路径并找出了哪个选项卡是正常的。现在它更加容易,您可以根据当前控制器分配当前选项卡。
检查出来......
大部分工作都发生在usercontrol中。
public partial class AdminNavigation : ViewUserControl
{
/// <summary>
/// This hold a collection of controllers and their respective "tabs." Each Tab should have at least one controller in the collection.
/// </summary>
private readonly IDictionary<Type, string> dict = new Dictionary<Type, string>();
public AdminNavigation()
{
dict.Add(typeof(BrandController), "catalog");
dict.Add(typeof(CatalogController), "catalog");
dict.Add(typeof(GroupController), "catalog");
dict.Add(typeof(ItemController), "catalog");
dict.Add(typeof(ConfigurationController), "configuration");
dict.Add(typeof(CustomerController), "customer");
dict.Add(typeof(DashboardController), "dashboard");
dict.Add(typeof(OrderController), "order");
dict.Add(typeof(WebsiteController), "website");
}
protected string SetClass(string linkToCheck)
{
Type controller = ViewContext.Controller.GetType();
// We need to determine if the linkToCheck is equal to the current controller using dict as a Map
string dictValue;
dict.TryGetValue(controller, out dictValue);
if (dictValue == linkToCheck)
{
return "current";
}
return "";
}
}
然后在usercontol的.ascx部分调用SetClass方法来检查针对dict的链接。像这样:
<li class="<%= SetClass("customer") %>"><%= Html.ActionLink<CustomerController>(c=>c.Index(),"Customers",new{@class="nav_customers"}) %></li>
现在您需要的是用于突出显示当前标签的CSS。有很多不同的方法可以做到这一点,但你可以在这里开始提出一些想法: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ 哦,不要忘记将usercontrol放在你的页面(或MasterPage)上......
<% Html.RenderPartial("AdminNavigation"); %>
其他提示
我写了一些简单的帮助程序类来解决这个问题。该解决方案同时查看所使用的控制器以及控制器中的哪个操作。
public static string ActiveTab(this HtmlHelper helper, string activeController, string[] activeActions, string cssClass)
{
string currentAction = helper.ViewContext.Controller.
ValueProvider.GetValue("action").RawValue.ToString();
string currentController = helper.ViewContext.Controller.
ValueProvider.GetValue("controller").RawValue.ToString();
string cssClassToUse = currentController == activeController &&
activeActions.Contains(currentAction)
? cssClass
: string.Empty;
return cssClassToUse;
}
您可以使用以下方法调用此扩展方法:
Html.ActiveTab("Home", new string[] {"Index", "Home"}, "active")
这将返回“有效”状态。如果我们在“索引”中的HomeController上或者“家庭”或“家庭”行动。我还为ActiveTab添加了一些额外的重载以使其更易于使用,您可以阅读整篇博文: http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for-active-tab-在选项卡菜单/
希望这会帮助别人。
此致 --Tomas
我在当前项目中使用的一种方法 - 这也有助于满足其他特定于页面的CSS需求。
首先,HTML帮助器返回表示当前控制器和操作的字符串:
public static string BodyClass(RouteData data) {
return string.Format("{0}-{1}", data.Values["Controller"], data.Values["Action"]).ToLower();
}
然后,在主页面中添加对此助手的调用:
<body class="<%=AppHelper.BodyClass(ViewContext.RouteData) %>">
...
</body>
现在,您可以使用CSS定位特定页面。要回答有关导航的确切问题:
#primaryNavigation a { ... }
.home-index #primaryNavigation a#home { ... }
.home-about #primaryNavigation a#about { ... }
.home-contact #primaryNavigation a#contact { ... }
/* etc. */
MVC的默认 Site.css
附带一个名为'selectedLink'
的类,应该用于此。
将以下内容添加到 _Layout.cshtml
中的 ul
列表中:
@{
var controller = @HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString();
}
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = controller == "Home" ? "selectedLink" : "" })</li>
...
</ul>
我知道这不干净。但这只是一种快速而肮脏的方式,可以让事情滚动而不会弄乱部分视图或任何类型的视图。