MVC с Bootstrap Navbar - установите выбранный элемент в активную

Ответ 1

Вам нужно проверить свой контроллер или просмотреть, какой элемент меню активен на основе текущего URL:

У меня есть метод расширения, подобный этому:

public static string MakeActiveClass(this UrlHelper urlHelper, string controller)
{
    string result = "active";

    string controllerName = urlHelper.RequestContext.RouteData.Values["controller"].ToString();

    if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
    {
        result = null;
    }

    return result;
}

Вы можете использовать его в своем представлении следующим образом:

<!-- Make the list item active when the current controller is equal to "blog" -->
<li class="@Url.MakeActive("blog")">
   <a href="@Url.Action("index", "blog")">....</a>
</li>

Ответ 2

JavaScript не работает, потому что страница перезагружается после ее запуска. Поэтому он правильно устанавливает активный элемент, а затем загружается страница, потому что браузер выполняет ссылку. Лично я удаляю JavaScript, который у вас есть, потому что это нецелесообразно. Чтобы сделать эту клиентскую сторону (вместо кода на стороне сервера, который у вас есть), для установки активного элемента при загрузке новой страницы вам потребуется JavaScript. Что-то вроде:

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

Я рекомендую добавить на ваш навигатор id или другой класс, чтобы вы могли убедиться, что выбрали правильный.

Ответ 3

Проще всего сделать, это отправить параметр ViewBag из ваших контроллеров, например:

public ActionResult About()
    {            
        ViewBag.Current = "About";
        return View();
    }


    public ActionResult Contact()
    {            
        ViewBag.Current = "Contact";
        return View();
    }

На странице cshtml выполните следующие действия:

           <ul class="nav navbar-nav">                    
                <li class="@(ViewBag.Current == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
                <li class="@(ViewBag.Current == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>

Предоставлено @Damith в здесь

Ответ 4

Просто вы можете сделать это в любом представлении

<ul class="nav navbar-nav">
    @Html.NavigationLink("Link1", "Index", "Home")
    @Html.NavigationLink("Link2", "Index", "Home")
    @Html.NavigationLink("Link3", "Index", "Home")
    @Html.NavigationLink("Links with Parameter", "myAction", "MyController", new{ id=999}, new { @class= " icon-next" })
</ul>

После добавления этого в новый класс С# или класс HtmlExtensionsclass

public static MvcHtmlString NavigationLink(this HtmlHelper html, string linkText, string action, string controller, object routeValues=null, object css=null)
{
    TagBuilder aTag = new TagBuilder("a");
    TagBuilder liTag = new TagBuilder("li");
    var htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(css);
    string url = (routeValues == null)?
        (new UrlHelper(html.ViewContext.RequestContext)).Action(action, controller)
        :(new UrlHelper(html.ViewContext.RequestContext)).Action(action, controller, routeValues);

    aTag.MergeAttribute("href", url);
    aTag.InnerHtml = linkText;
    aTag.MergeAttributes(htmlAttributes);

    if (action.ToLower() == html.ViewContext.RouteData.Values["action"].ToString().ToLower() && controller.ToLower() == html.ViewContext.RouteData.Values["controller"].ToString().ToLower())
        liTag.MergeAttribute("class","active");

    liTag.InnerHtml = aTag.ToString(TagRenderMode.Normal);
    return new MvcHtmlString(liTag.ToString(TagRenderMode.Normal));
}

Ответ 5

Я считаю, что у вас есть выбор назад. Вы добавляете класс, а затем удаляете его из братьев и сестер, и я думаю, что удаление второй причины вызывает проблему. Можете ли вы попробовать изменить это:

<script type="text/javascript">

    $(function () {
        $('.navbar-nav li').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        });
    });

</script>

Ответ 6

Ваша функция javascript должна работать нормально... Проблема в том, что ваши ссылки направляются на контроллер и перезагружают всю страницу. Чтобы избежать такого поведения, вы можете отобразить содержимое своего тела как частичное представление, так что элементы навигационной панели не перезагружаются. Вам не нужно писать функцию для обработки событий dom - для этого необходим javascript.

Чтобы узнать, что я имею в виду, измените свой код:

<li><a href="~/Home/About">About</a></li>
<li><a href="~/Student">Students Sample</a></li>

в

 <li><a href="">About</a></li>
 <li><a href="">Students Sample</a></li>