MVC 下導航高亮的一種解決方案

前言

導航高亮一直是一個讓大家頭疼的問題。

純 Javascript 的話可以判斷當前頁面的地址和鏈接地址是否有關系。

這樣的弊端就是自由度太低，MVC 下會出一定的問題 （MVC 下有默認的 Controller 和 Action）

另一種方案是前端后端結合，為每一張頁面設置一個屬性，然后在頁面中判斷。滿足條件便高亮。

這樣的弊端就是，需要為你所有的頁面設置屬性，非常麻煩！

那么有沒有什么完美的解決方案？一勞永逸的？

神奇的 eval 函數

Javascript 有精粹也有糟粕，其中的 eval 是大多數動態語言都擁有的精髓。我們是否可以利用這個函數呢？

基本思路：

給每一個 li（對應一個鏈接）設置一個 class，例如 class=”controller_Home”，

代表著，只要這張頁面是的 controller 是 Home，就讓這個鏈接高亮。

而在頁面中，是可以通過代碼直接得到 controller 和 action 的名稱的，沒必要為每一張頁面單獨手動設置。

解決方案

<ul id="top-navigation">
    <li class="controller_Home"><span><span>@Html.ActionLink("首頁","Index","Home")</span></span></li>
    <li class="controller_Article"><span><span>@Html.ActionLink("文章管理","Index","Article")</span></span></li>
    <li class="controller_User"><span><span>@Html.ActionLink("用戶管理","Index","User")</span></span></li>
</ul>
<input id="controller" type="hidden" value="@Html.ViewContext.RouteData.Values["controller"]"/>
<input id="action" type="hidden" value="@Html.ViewContext.RouteData.Values["action"]"/>

1. 首先給所有的 li 加上一個 class
2. 然后再利用兩個 hidden ，把 controller 和 action 的名字放到前端頁面中

$(function () {
    SetNavClass('top-navigation', 'active');
});
 
function SetNavClass(ulId, className) {
    controller = $('#controller').val();
    action = $('#action').val();
    eval('controller_' + controller + ' = true');
    eval('action_' + action + ' = true');
    list = $('#' + ulId + '>li');
 
    for (var k = 0; k < list.length; k++) {
        item = list[k];
        str = GetClassName(item);
        try {
            if (eval(str)) $(item).addClass(className);
        } catch (e) { }
    }
}
function GetClassName(item) {
    classes = $(item).attr('class').split(' ');
    for (var k = 0; k < classes.length; k++) {
        if (classes[k].indexOf('controller') > -1 || classes[k].indexOf('action') > -1) return classes[k];
    }
}

以上是 Javascript 的代碼：

1. 讀取 controller 和 action 的名字
2. 利用 eval 函數給 controller_[controller名字] 和 action_[action名字] 這兩個變量賦值
3. 取出 class 中的表達式
4. 利用 eval 函數執行表達式，判斷最后的結果，如果滿足條件就加上高亮的 class

上述代碼不需要為每個頁面編寫，只需要在母版頁中編寫一次即可，再引用這段 Javascript 函數。

如果你的 ul ID 和 高亮 class 名字不一樣，那么只要在調用這個函數的時候傳入你自己的就行了。

高級應用

就這么簡單？僅此而已？

如果真的是這樣，那么完全可以直接利用 Javascript 判斷頁面地址來實現。

那么讓我們來玩一些好玩的吧~

因為是 eval 函數，所以完全可以在這個 class 中編寫復雜的表達式（其實就是 Javascript 表達式）

<li class="controller_Home||controller_About"><span><span>@Html.ActionLink("首頁", "Index", "Home")</span></span></li>
<li class="controller_Article&&action_Add"><span><span>@Html.ActionLink("文章管理", "Index", "Article")</span></span></li>

以上兩行代碼表示：

1. controller 只要是 Home，或者 About，都會激活這個鏈接
2. controller 必須是 Article，action 必須是 Add

也就是說，在這個 class 里可以輸入復雜的 Javascript，這樣就可以實現復雜的導航激活功能了！

原文地址：MVC 下導航高亮的完美解決方案 (原文就是我自己的博客~ 所以是原創，不是轉載~)