在我的asp.net MVC解决方案中集成常规菜单

Question

就我的学习而言，我正在使用ASP.NET MVC3构建文档管理解决方案。 以下是我管理的页面：

• 搜索/结果页面（项目列表）
• 最喜欢的页面（项目列表）
• 编辑页面
• 创建页面

我也有一个Site.Master页面，在该页面的左侧显示了树视图菜单。 因此，无论用户位于网站的何处，treeview菜单都会通过在菜单中加下划线来显示其位置。

为了构建树状视图菜单，我使用下面的代码（已清理以方便阅读）：

        <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页面时，它都会重新创建每个treeview菜单项。 对于每个项目，它都会检查项目是否等于会话变量。 如果是，则将“选定”类添加到该项目（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是一个随机名称。 ViewBag属性是dynamic类型的，因此您可以使用任何喜欢的属性名称。