将常规菜单集成到我的asp.net mvc解决方案中

问题描述

| 就我的学习而言，我正在使用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\",null))%>
                        <%= Html.TreeviewMenu(TreeMenu.Create(\"New\",\"Create\",null))%>
                   </ul>  
                </li>
        </ul>

问题是我需要在菜单中的活动项目下划线。因此，如果用户正在显示搜索页面，则必须在我的搜索菜单条目下划线。我该如何进行？我正在考虑将此信息集成到传递给每个视图页面的强类型视图模型中，但是由于每个页面使用的视图模型不同而失败。我更喜欢不使用会话变量，因为它不是一个干净的解决方案。 有任何想法吗？ 具有会话变量的解决方案：我将“当前菜单项”保存在会话变量中（从控制器中）。因此，每当重新加载Site.Master页面时，它都会重新创建每个treeview菜单项。对于每个项目，它都会检查项目是否等于会话变量。如果是，则将类“选定的”添加到该项目（css用蓝色突出显示）。 我不太喜欢使用会话变量。也许还有更优雅的解决方案？     

解决方法

如何使用助手：

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,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>

    ,好了，有一个简单有效的解决方案：让每个页面发出信号，表明它是否是活动页面，并使用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>

根据新信息进行更新 比会话可评估的方法更干净一点的是可以使用控制器的ѭ7属性。

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

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

    return View();
}

然后在您的母版页中可以对against9进行检查 请注意，“ 10”是一个随机名称。

ViewBag

属性的类型为

dynamic

，因此您可以使用任何喜欢的属性名称。