关于html助手的2个互锁问题

首先是一些背景知识。我有一个用MVC5和VS2013编写的网站。我使用MVC模板创建了这个项目，因此我在顶部有引导导航栏，它是我所有菜单链接的位置。每个链接对应于不同的视图，每个视图使用（默认情况下）\u Layout.cshtml。我想对导航栏上的链接做2件事-1。当选择和2时，将当前选定（活动）项置高位。让它们与ajax兼容，以便在单击链接时，仅刷新每个视图的内容，而不是整个页面。 我已经完成了目标1并正在努力，但我不确定我是否做对了。在web上找到一个示例后，我在App_代码目录中创建了一个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());
    }
}

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

我用这样的布局实现了它

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());
    }
}

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

@Html.htmlink（“主页”、“索引”、“主页”）
@Html.htmlink（“关于我”、“关于我”、“家”）
@Html.htmlink（“示例”、“示例”、“主页”）
@Html.htmlink（“链接”、“链接”、“主页”）
@Html.htmlink（“联系人”、“联系人”、“主页”）

@*@Html.Partial（“_LoginPartial”）*@

关于这一点，我唯一的问题是VS如何知道HTMLINK是一个助手扩展？我没有继承任何东西，类名和方法名都是我自己编的。我所要做的就是把@Html放在前面，它知道它是什么。我只是想知道发生了什么。当然可以，但我想知道为什么

现在来看Ajax的内容。我也做到了，但我不得不将布局中的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>

@Ajax.ActionLink（“Home”、“Index”、“Home”、新的AjaxOptions（）{UpdateTargetId=“site\u content”}）
@ActionLink（“关于我”、“关于我”、“主页”、新的AjaxOptions（）{UpdateTargetId=“site\u content”}）
@ActionLink（“Samples”、“Samples”、“Home”、新的AjaxOptions（）{UpdateTargetId=“site\u content”}）
@ActionLink（“Links”、“Links”、“Home”、新的AjaxOptions（）{UpdateTargetId=“site\u content”}）
@ActionLink（“联系人”、“联系人”、“主页”，新的AjaxOptions（）{UpdateTargetId=“site\u content”}）

但现在我左右为难。因为在这两种情况下，我都必须在布局中更改相同的代码，所以我现在只能执行其中一种操作，而不能同时执行这两种操作。

---

有没有一种方法可以将这两种功能组合到一个助手方法中，或者有更好的方法来实现其中一种或两种功能？感谢您的帮助。

没人想到这一点。第一个问题得到了回答，但第二个问题没有得到回答。重申一下，是“如何使用扩展让活动菜单选择和Ajax同时工作？”我做了一些工作，但找到了答案。最后，我使用_Layout.cshtml中的Ajax.ActionLink helper来实现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; 
}

---

这两个目标现在都实现了，它就像一个champ一样工作。

方法中的第一个参数是

这个HtmlHelper HtmlHelper

，这意味着它是

HtmlHelper

类的扩展方法（这就是razor中的

@Html

），我想这就解释了。有趣的是，以前从未见过“this”用这种方式。通常它自己用来表示对象的当前实例。