Question

首先关闭一些背景。我有一个用MVC5和VS 2013编写的网站。我使用MVC模板创建了项目，所以我在顶部有自举导航栏，这是我所有菜单链接的地方。每个链接对应一个不同的视图，每个视图使用（默认情况下）_Layout.cshtml。我想对导航栏上的链接做两件事--1。选中当前选中（活动）项目时高亮显示2.让它们符合ajax标准，以便只有每个视图的内容在链接时才刷新而不是整个页面点击。我已经完成了目标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是一个帮助扩展？我没有继承任何东西，类和方法名都是我编造的。我所要做的就是把@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

很惊讶没有人想出这个。第一个问题得到了回答，但第二个问题却没有。重申一下，我是如何使用扩展同时使用活动菜单选择和Ajax同时工作的？＆＃39;采取了一些行动，但我找到了答案。我最终使用_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个互锁问题

1 个答案: