在我的 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 页面时，它都会重新创建每个树形视图菜单项。对于每一项，它都会检查项目是否等于会话变量。如果是，则将“selected”类添加到项目中（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>

---

根据新信息更新

使用控制器中的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 所以你可以使用任何你喜欢的属性名称。