在 mvc4 中使用引导程序单击子 li 时无法使父 li 处于活动状态

Question

我已经搜索并尝试了不同的方法，例如使用 JQuery Helper 类等，但我找不到适合我的场景的解决方案。我的代码在下面当我用户选择和页面刷新时我想要 Active li

<aside class="main-sidebar" style="background: #102C4B none repeat scroll 0% 0%;border-right: 1px solid #DCE1E4;">

    <section class="sidebar">
        <div>
            <ul id="menu" class="sidebar-menu">

                <li class=" treeview">
                    <a href="#">
                        <i style="color:#fff" class="fa fa-dashboard"></i> <span style="color: #fff;">Dashboard</span> <i style="color:#fff" class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu" style="background: #224775 none repeat scroll 0% 0%;">
                        @*<li class="active"><a style="color:#fff" href="~/Dashboard/Index">Dashboard</a></li>*@
                        @Html.MenuItem("Dashboard", "Index", "Dashboard")


                    </ul>
                </li>


                <li class="treeview">
                    <a href=" #">
                        <i style="color:#fff" class="fa fa-pie-chart"></i>
                        <span style="color: #fff;">Sales</span>
                        <i class="fa fa-angle-left pull-right" style="color:#fff"></i>
                    </a>
                    <ul class="treeview-menu" style="background: #224775 none repeat scroll 0% 0%;">
                        @*<li><a style="color:#fff" href="~/Sales/index"> View Sale</a></li>*@
                        @Html.MenuItem("View Sale", "index", "Sales")

                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i style="color:#fff" class="fa fa-laptop"></i>
                        <span style="color: #fff;">Invoice</span>
                        <i class="fa fa-angle-left pull-right" style="color:#fff"></i>
                    </a>
                    <ul class="treeview-menu" style="background: #224775 none repeat scroll 0% 0%;">
                        @*<li><a style="color:#fff" href="~/Invoice/Index"> View Invoice</a></li>
            <li><a style="color:#fff" href="~/Invoice/Create">Add Invoice</a></li>*@
                        @Html.MenuItem("View Invoice", "Index", "Invoice")
                        @Html.MenuItem("Add Invoice", "Create", "Invoice")
                    </ul>
                </li>



            </ul>
        </div>
    </section>

</aside>

我正在使用的 Helper 类也在下面，但我无法让 li 保持打开状态。

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

public static class Utilities
{
    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper,
                                 string text, string action,
                                 string controller,
                                 object routeValues = null,
                                 object htmlAttributes = null)
{
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");
}
if (routeValues != null)
{
    li.InnerHtml = (htmlAttributes != null)
        ? htmlHelper.ActionLink(text,
                                action,
                                controller,
                                routeValues,
                                htmlAttributes).ToHtmlString()
        : htmlHelper.ActionLink(text,
                                action,
                                controller,
                                routeValues).ToHtmlString();
}
else
{
    li.InnerHtml = htmlHelper.ActionLink(text,
                                         action,
                                         controller).ToHtmlString();
}
return MvcHtmlString.Create(li.ToString());
}
}

Answer 1

有两件事要做，一是在用户点击时进行主动选择，二是在页面刷新后保存该选择对吗？

如果您想在页面刷新后选择 li，您需要将此状态保存在某处。您可以将其保存在客户端（Cookie 和本地存储）或服务器端（会话或其他结构）中。 如果您选择客户端，您可能会发现一些跨浏览器问题，例如一些旧浏览器没有本地存储功能，或者使用 Cookie 的安全性问题。 如果您选择服务器端，则没有这些问题，但您将使用更多往返（例如保存状态）。但我认为这个缺点并不那么严重。

无论你选择什么，都会是这样的：

1. 点击li，保存需要选择的父级并应用所需的css类，并从其他lis中删除相同的类。
2. 在页面渲染时，检查所选父项是否较早保存，然后在需要时应用 css。

检查这个我用来测试你需要什么的样本。

 <aside>
    <ul id="menu">
        <li class="treeview">
            Test 1
            <ul >
                <li><a id="A1" runat="server" href="#">Home1</a></li>
                <li><a id="A2" runat="server" href="#">About1</a></li>
                <li><a id="A3" runat="server" href="#">Contact1</a></li>
            </ul>
            <br />
        </li>
        <li class="treeview">
             Test 2
            <ul >
                <li><a id="A4" runat="server" href="#">Home2</a></li>
                <li><a id="A5" runat="server" href="#">About2</a></li>
                <li><a id="A6" runat="server" href="#">Contact2</a></li>
            </ul>
            <br />
        </li>
         <li class="treeview">
             Test 3
            <ul >
                <li><a id="A7" runat="server" href="#">Home3</a></li>
                <li><a id="A8" runat="server" href="#">About3</a></li>
                <li><a id="A9" runat="server" href="#">Contact3</a></li>
            </ul>
        </li>
    </ul>

</aside>

<script>
    $(document).ready(function () {

        $('.treeview').find('li').each(function (i, e) {
            $(this).click(function (event) {
                $('.treeview').removeClass('active');
                $(this).parents('li').addClass('active');

                // TODO: save the index or ID of the selected element. You can do something simple, like a post to action to save the state.
            });
        });

        // TODO: check if the index or ID of the selected element is saved somewhere, then apply the css class you want. 
        // You could make a get to a action to retrieve the state, but is one more roundtrip just to get the state. 
        // Another solution is on the server side, during the rendering, you already know the state of the selected item, so just add the class where you need it.
    });
</script>