关于 html 帮助者的 2 个相互关联的问题

Question

首先介绍一些背景知识。我有一个用 MVC5 和 VS 2013 编写的网站。我使用 MVC 模板创建了项目，所以我在顶部有 bootstrap 导航栏，这是我所有菜单 link 所在的位置。每个 link 对应一个不同的视图，每个视图使用（默认）_Layout.cshtml。我想对导航栏上的 link 做两件事 - 1. 选中时突出显示当前选中的（活动）项目 2. 让它们 ajax 兼容，以便只有每个视图的内容单击 link 时，不会刷新整个页面。我已经完成了目标 1 并开始工作，但我不确定我是否做对了。在网上找到示例后，我在 App_Code 目录中创建了一个 html 辅助扩展方法，如下所示..

public static class MyHelper
{
    public static MvcHtmlString HtmlLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName)
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");

        var builder = new TagBuilder("li")
        {
            InnerHtml = htmlHelper.ActionLink(linkText, actionName, controllerName).ToHtmlString()
        };

        if (controllerName == currentController && actionName == currentAction)
            builder.AddCssClass("active");

        return new MvcHtmlString(builder.ToString());
    }
}

我是这样在_Layout中实现的..

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.HtmlLink("Home", "Index", "Home")</li>
                <li>@Html.HtmlLink("About Me", "AboutMe", "Home")</li>
                <li>@Html.HtmlLink("Samples", "Samples", "Home")</li>
                <li>@Html.HtmlLink("Links", "Links", "Home")</li>
                <li>@Html.HtmlLink("Contact", "Contact", "Home")</li>
            </ul>
            @*@Html.Partial("_LoginPartial")*@
        </div>

我唯一的问题是 VS 如何知道 HtmlLink 是辅助扩展？我没有继承任何东西，class 和方法名称都是我编造的。我所要做的就是将@Html 放在前面，它知道它是什么。只是想了解发生了什么。当然可以，但我想知道为什么。

现在 Ajax 内容。我也得到了它的工作，但我不得不将 _Layout 中的 html 帮助程序调用更改为 ajax 帮助程序调用......

                <li>@Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
                <li>@Ajax.ActionLink("About Me", "AboutMe", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
                <li>@Ajax.ActionLink("Samples", "Samples", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
                <li>@Ajax.ActionLink("Links", "Links", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
                <li>@Ajax.ActionLink("Contact", "Contact", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>

但现在我进退两难了。因为在这两种情况下我都必须更改 _Layout 中的相同代码，所以我现在只能做一个或另一个而不是两者。有没有一种方法可以将这两个功能组合成一个辅助方法，或者有更好的方法来完成其中一个或两个？感谢任何帮助。

Answer 1

很惊讶没有人想出这个。第一个问题得到了回答，但第二个问题没有。重申一下，'how do i get both the active menu selection and Ajax to work at the same time using extensions?' 花了一些功夫，但我找到了答案。我最终使用 _Layout.cshtml 中的 Ajax.ActionLink 帮助程序来实现 Ajax 并将以下 jquery 添加到每个视图以实现菜单选择。非常简单，最后甚至不需要扩展..

        $(document).ready(function () {

        $('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]')
            .closest('li').addClass('active');
        });

所以事实证明我不需要我创建的 Html 辅助扩展方法，但至少我学会了如何去做。无论如何，为了完成事情，我只是更改了 bootstrap.css 中的默认属性以适应我的喜好，仅此而已..

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
   color: #DA9C9C;
   background-color: #FFFFFF;    /**/
   text-shadow: 0px 0px #FFFFFF; /**/
   font-weight:bold; 
}

现在这两个目标都达到了，效果非常好。

关于 html 帮助者的 2 个相互关联的问题

2 interlocking questions regarding html helpers

html

ajax

html-helper

twitter-bootstrap