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类添加到正确的链接？如何捕捉到正确的＆lt; li＆gt;？我是否需要在所有控制器的索引方法中执行此操作？

Answer 1

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

就像那样：

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>

将css类添加到＆lt; li>在控制器方法中

1 个答案: