在我的asp.net mvc解決方案中集成一個通用菜單

Question

對於我的學習，我正在用ASP.NET MVC3構建一個文檔管理解決方案。下面是網頁]：

• 搜索/結果頁（產品清單）
• 喜愛的網頁（產品清單）
• 編輯頁面
• 一個創建頁面

我也有一個Site.Master頁面，我在屏幕的左側顯示一個樹形菜單。因此，無論用戶在網站中的哪個位置，樹視圖菜單都會通過在菜單中強調其位置來顯示其位置。

爲建設樹狀菜單，我用下面的代碼（清洗方便閱讀）：

 <ul id="treemenu1" class="treeview">          
       <li>Documents 
        <ul> 
         <%= Html.TreeviewMenu(TreeMenu.Create("Search", "Search", "Affaires", null))%> 
         <%= Html.TreeviewMenu(TreeMenu.Create("Favorite", "Favorite", "Affaires", null))%> 
         <%= Html.TreeviewMenu(TreeMenu.Create("New", "Create", "Affaires", null))%> 
        </ul> 
       </li> 
     </ul> 

的問題是，我需要強調在我的菜單中的活動項目。所以如果用戶顯示搜索頁面，我的搜索菜單條目必須加下劃線。我該如何繼續？我正在考慮將此信息集成到傳遞給每個視圖頁面的強類型視圖模型中，但因爲每個頁面都使用了不同的視圖模型，所以失敗了。我不喜歡使用會話變量，因爲它不是一個乾淨的解決方案。

任何想法？

帶會話變量的解決方案：我將「當前菜單項」保存在會話變量（來自我的控制器）中。因此，每當Site.Master頁面重新加載時，它都會重新創建每個樹視圖菜單項。對於每一個，它都檢查該項是否等於會話變量。如果是，則將「已選擇」類添加到該項目（css用藍色突出顯示）。

我不太喜歡使用會話變量。也許有更優雅的解決方案？

Answer 1

如何使用輔助：

public static MvcHtmlString MenuItem(
    this HtmlHelper htmlHelper, 
    string text, 
    string action, 
    string controller 
) 
{ 
    var li = new TagBuilder("li"); 
    var routeData = htmlHelper.ViewContext.RouteData; 
    var currentAction = routeData.GetRequiredString("action"); 
    var currentController = routeData.GetRequiredString("controller"); 
    if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) && 
     string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase)) 
    { 
     li.AddCssClass("active"); 
    } 
    li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString(); 
    return MvcHtmlString.Create(li.ToString()); 
} 

然後：

<ul> 
    <%= Html.MenuItem("Search", "Search", "Affaires") %> 
    <%= Html.MenuItem("Favorite", "Favorite", "Affaires") %> 
    <%= Html.MenuItem("New", "Create", "Affaires") %> 
</ul> 

如果你導航到/Affaires/Favorite可能產生以下

<ul> 
    <li><a href="/Affaires/Search">Search</a></li> 
    <li class="active"><a href="/Affaires/Favorite">Favorite</a></li> 
    <li><a href="/Affaires/Create">New</a></li> 
</ul> 

Answer 2

那麼，有一個簡單而有效的解決方案：讓每個頁面指示是否爲活動頁面，並用jQuery設置一個css類。

假設你的渲染HTML如下：

<ul id="treemenu1" class="treeview">          
    <li>Documents 
     <ul> 
      <li class="search"></li> 
      <li class="favorite"></li> 
     </ul> 
    </li> 
</ul> 

在每個頁面的底部，這樣做（這將坐在搜索視圖）：

<script type="text/javascript"> 
    $(document).ready(function() { 
     // Set active nav 
     $('#treemenu1 li.search').addClass('selected'); 
    }); 
</script> 

---

UPDATE基於新信息

小清潔劑th會話可能會使用控制器的ViewBag屬性。

public ActionResult Search(/*whatever*/) 
{ 
    // do things 

    // set the selevted view 
    ViewBag.SelectedMenuItem = "search"; 

    return View(); 
} 

然後在你的母版頁，你可以對證<%: ViewBag.SelectedMenuItem %>

注意SelectedMenuItem是一個隨機名稱。 The ViewBag property is of type dynamic所以你可以使用你喜歡的任何屬性名稱。