css - 在控制器方法中添加css类到<li>

Question

在我的 _Layout.cshtml 文件中，我有：

<table id="myTable">
        <tr><td><ul><li id="id1"><a href="@Url.Action("Index", "Home")">Home</a></li>
                    <li id="id2"><a href="@Url.Action("Index", "About")">About</a></li>
                    <li id="id3"><a href="@Url.Action("Index", "Another")">Another</a></li>
        </ul></td></tr>
</table>

活动链接（浏览器中 url 中的链接）应具有 css 类“activeLink”。如何通过控制器（不是客户端）中的代码将 css 类添加到正确的链接？如何捕捉正确的<li>？我是否需要在所有控制器的索引方法中执行此操作？

Answer 1

您可以编写自定义帮助方法来生成这些菜单项并检查当前操作和控制器并应用正确的 CSS 类。您可以查看 以下示例并根据您的要求对其进行调整。

就像这样：

public static class MenuExtensions
{
    public static IHtmlString 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("activeLink");
        }

        li.InnerHtml = htmlHelper.ActionLink(text, action, controller, null, null).ToHtmlString();
        return new HtmlString(li.ToString());
    }
}

然后在你看来：

<table id="myTable">
    <tr>
        <td>
            <ul>
                @Html.MenuItem("Home", "Index", "Home")
                @Html.MenuItem("About", "About", "Home")
                @Html.MenuItem("Another", "Index", "Another")
            </ul>
        </td>
    </tr>
</table>

现在，如果用户当前正在浏览控制器 ( ) 的About操作，将生成以下标记：Home/Home/About

<table id="myTable">
    <tr>
        <td>
            <ul>
                <li><a href="/">Home</a></li>
                <li class="activeLink"><a href="/Home/About">About</a></li>
                <li><a href="/Another">Another</a></li>
            </ul>
        </td>
    </tr>
</table>