13
Làm cách nào để tạo điều hướng theo tab bằng tab "Hiện tại" được đánh dấu trong giao diện người dùng?Một cách dễ dàng để đặt tab hoạt động bằng bộ điều khiển và usercontrol trong ASP.NET MVC là gì?
A
Trả lời
10
Trước khi MVC tôi nhìn vào đường dẫn tệp và tìm ra tab nào là dòng. Bây giờ nó dễ dàng hơn nhiều, bạn có thể gán tab hiện tại dựa trên bộ điều khiển hiện tại.
Kiểm tra xem ...
Hầu hết công việc xảy ra trong điều khiển người dùng.
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 "";
}
}
Sau đó, trong phần .ascx của người dùngcontol, hãy gọi đến phương thức SetClass để kiểm tra liên kết với dict. Giống như vậy:
<li class="<%= SetClass("customer") %>"><%= Html.ActionLink<CustomerController>(c=>c.Index(),"Customers",new{@class="nav_customers"}) %></li>
Tất cả bạn cần bây giờ là CSS để làm nổi bật tab hiện tại của bạn. Có một loạt các cách khác nhau để thực hiện điều này, nhưng bạn có thể bắt đầu với một số ý tưởng ở đây: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ Oh, và đừng quên đặt usercontrol trên trang của bạn (hoặc MasterPage) ...
<% Html.RenderPartial("AdminNavigation"); %>
+0
IDictionary có hoạt động không? Có vẻ như nó phải là từ điển thay thế. –
+0
Điều gì xảy ra khi một bộ điều khiển có hai hành động? –
+1
@Anthony - mã này hoạt động, hiện đang được sản xuất. @ Anthony2 - bạn có nghĩa là bạn muốn một tab khác được tô sáng cho mỗi hành động của bộ điều khiển? Điều này sẽ không giúp được điều đó. Tôi muốn đề nghị đặt nav điều khiển cụ thể của bạn trong điều khiển người dùng và khai báo tab nào sẽ hoạt động khi nhúng UC vào trang. –
3
Một phương pháp tôi đang sử dụng trên một dự án hiện tại - điều này cũng giúp cho các nhu cầu CSS trang cụ thể khác.
Thứ nhất, một helper HTML mà trả về một chuỗi đại diện cho bộ điều chỉnh dòng và hành động:
public static string BodyClass(RouteData data) {
return string.Format("{0}-{1}", data.Values["Controller"], data.Values["Action"]).ToLower();
}
Sau đó, thêm một cuộc gọi đến helper này trong trang chủ của bạn:
<body class="<%=AppHelper.BodyClass(ViewContext.RouteData) %>">
...
</body>
Bây giờ, bạn có thể nhắm mục tiêu các trang cụ thể bằng CSS của mình. Để trả lời câu hỏi chính xác của bạn về điều hướng:
#primaryNavigation a { ... }
.home-index #primaryNavigation a#home { ... }
.home-about #primaryNavigation a#about { ... }
.home-contact #primaryNavigation a#contact { ... }
/* etc. */
10
Tôi đã viết một số lớp trợ giúp đơn giản để giải quyết vấn đề này. Các giải pháp trông att cả hai bộ điều khiển được sử dụng cũng như những hành động trong bộ điều khiển.
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;
}
Bạn có thể gọi phương thức mở rộng này với:
Html.ActiveTab("Home", new string[] {"Index", "Home"}, "active")
này sẽ trở lại "hoạt động" nếu chúng ta đang ở trên HomeController trong hoặc "Chỉ số" hoặc "Trang chủ" hành động. Tôi cũng đã thêm một số quá tải thừa vào ActiveTab để dễ sử dụng hơn, bạn có thể đọc toàn bộ bài đăng trên blog: http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for-active-tab-in-tab-menu/
Hy vọng điều này sẽ giúp ai đó.
Kính trọng, --Tomas
0
MVC của mặc định Site.css đi kèm với một lớp có tên 'selectedLink' mà nên được sử dụng cho việc này.
Thêm dòng sau vào danh sách ul của bạn trong _Layout.cshtml:
@{
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>
Tôi biết điều này là không sạch sẽ. Nhưng chỉ là một cách nhanh chóng và bẩn thỉu để có được những điều lăn mà không gây rối với quan điểm một phần hoặc bất kỳ loại đó.
Hãy đặt cụm từ này dưới dạng câu hỏi trước, sau đó cung cấp câu trả lời dưới dạng bài đăng riêng. Tôi sẽ loại bỏ downvote của tôi khi tôi thấy bạn đã sửa nó. Nếu không tôi sẽ phải đóng nó như 'không phải là một câu hỏi thực sự'. –
Đã sửa lỗi cho anh ấy. – FlySwat
Câu hỏi quá lớn và bây giờ quá nhỏ: P haha –