Как сохранить вкладку активной? ASP. NET Основные страницы бритвы - PullRequest
Новая
       62

Как сохранить вкладку активной? ASP. NET Основные страницы бритвы

1 голос
/ 03 мая 2020

Привет,

У меня проблема с моими вкладками в navbar.

Результат I wi sh:

  1. См. Класс вкладки "Главная" active по умолчанию
  2. При нажатии на другую вкладку необходимо удалить active класс из <a>, который уже активен (в начальной точке это вкладка «Главная»)
  3. Добавить тот же класс active на вкладку, на которую я нажимаю (что также означает, что приложение перенаправляет меня )
  4. Держите нажатой вкладку active

Что у меня так далеко:

  1. Я вижу набор вкладок "Главная" active по умолчанию
  2. Нажатие на любую вкладку удаляет класс active, как я упоминал выше, и добавляет тот же класс к нажатой вкладке
  3. Перенаправление происходит, и вкладка "Главная" возвращает свое состояние по умолчанию (становится active снова)

Я делюсь своим кодом ниже:

HTML

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="navigation">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link active" id="home" asp-area="" asp-page="/home/Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="declarations" asp-area="" asp-page="/declarations/Index">Declarations</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="topics" asp-area="" asp-page="/topics/Index">List of Topics</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contacts" asp-area="" asp-page="/contacts/Index">Contacts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="faq" asp-area="" asp-page="/faq/Index">FAQ</a>
                </li>
            </ul>
        </div>

jQuery 

  $("#navigation .navbar-nav a").click(function() {
    $("#navigation .navbar-nav").find("a.active").removeClass("active");
    $(this).addClass("active");
    localStorage.className = "active";
});

$(document).ready(function() {
    stayActive();
});

function stayActive() {
    $(this).children().addClass(localStorage.className);
}

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

В дополнение к ответу @Nam Le я предлагаю полное решение.

Я нашел способ, как мы можем правильно использовать исключение.

Прежде всего, так как мы устанавливаем класс active на стороне сервера на основе текущего маршрута, мы должны добавить asp-route-routeId="{routeId:int}" в cs html, с которым мы работаем.

Во-вторых, используйте этот jQuery код:

jQuery

   $("#navigation .navbar-nav a").click(function() {
    $("#navigation .navbar-nav").find("a.active").removeClass("active");
    $(this).addClass("active");
    localStorage.className = "active";
});

$(document).ready(function() {
    stayActive();
});

function stayActive() {
    $(this).addClass(localStorage.className);
}

И последний шаг - настройка "launchUrl": "route/routeId" в launchSetting. json файл для запуска приложения с определенным маршрутом. Это действие заставляет наше расширение HtmlHelper реагировать и добавляет статус active к нужной вкладке.

Надеюсь, что в предложенном решении нет грубых ошибок :)

UPD : не забудьте добавить маршрут в cs html @page "/ route / routeId"

0 голосов
/ 03 мая 2020

Поскольку вы используете страницу Razor, каждый раз, когда пользователь нажимает на вкладку, страница будет снова отображаться на сервере, а затем отправляться обратно. Поэтому я предлагаю установить класс active на стороне сервера на основе текущего маршрута.

  1. Добавить новый HtmlHelper класс 
public static class HtmlHelperExtensions
{
    public static string ActiveClass(this IHtmlHelper htmlHelper, string route)
    {
        var routeData = htmlHelper.ViewContext.RouteData;

        var pageRoute = routeData.Values["page"].ToString();

        return route == pageRoute ? "active" : "";
    }
}
Go к вашему _ViewImports.cshtml и добавьте этот импорт. Без этого он не распознает помощника, которого мы добавим на шаге 3. 
@using <Namespace of the class you wrote in step 1, if not already here>
Тогда ваш CS html будет 
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" id="navigation">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link @Html.ActiveClass("/home/Index")" id="home" asp-area="" asp-page="/home/Index">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link @Html.ActiveClass("/declarations/Index")" id="declarations" asp-area="" asp-page="/declarations/Index">Declarations</a>
        </li>

        ...Same for 3 other tabs, make sure that the route you pass in ActiveClass method
        ...must be the same as the route in asp-page
        ...If you're afraid of duplication, make some static class to store these routes as constants
    </ul>
</div>
...