英文:
ASP.Net Core Web App - How can i prevent Navbar style from reloading when navigating to other pages?
问题
这是问题的翻译部分：
我在单击链接以跳转到新页面时遇到了导航栏样式刷新的问题。有没有办法解决这个问题？我是初次使用ASP.NET Core Web应用程序。
这里是我Shared/_Layout.cshtml的代码：
<!DOCTYPE html>
<body>
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light gradient-custom border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Watch It Later</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
@Html.ActionLink("Home", "Index", "Home",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item">
@Html.ActionLink("Privacy", "Privacy", "Home",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item">
@Html.ActionLink("Watch List", "Index", "Movies",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item">
@Html.ActionLink("Find Movies", "ShowSearchForm", "Movies",null, new {@class = "navlink-custom"})
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="page-stack">
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer>
<div class="container">
© 2023 - WishlistWebApp - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
有没有办法防止导航栏重新加载？
英文:
I am having a problem with the style refreshing on my navbar I click on a link to go to a new page. Is there any way i can fix this? I am new to using ASP.NET core webapp.
Here is a video of the issue I am having:
Video
Here is my Shared/_Layout.cshtml<!DOCTYPE html>
<body >
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light gradient-custom border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Watch It Later</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
@Html.ActionLink("Home", "Index", "Home",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item">
@Html.ActionLink("Privacy", "Privacy", "Home",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item">
@Html.ActionLink("Watch List", "Index", "Movies",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item">
@Html.ActionLink("Find Movies", "ShowSearchForm", "Movies",null, new {@class = "navlink-custom"})
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="page-stack">
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer>
<div class="container">
&copy; 2023 - WishlistWebApp - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
Is there a way to prevent the navbar from reloading?
答案1
得分: 0
我理解你要求的内容，以下是翻译好的部分：
我假设你试图在页面导航之间保持导航项的“选定”样式。如果我理解正确，那么你不想采取“防止导航样式在导航时重新加载”的方法。
做到这一点的方法是使用自定义的 HtmlHelper 方法。你创建这个辅助方法，然后将其附加到 li 元素的类上。当页面加载时，它会确定路由值，并根据当前路由值设置样式。
创建一个 Html Helper 扩展方法。此方法将在每次页面加载时调用，并使用路由值来确定当前页面，然后基于这些值将“选定”的 CSS 样式应用到与当前路由匹配的“li”元素上。
public static class HtmlHelperExtensions
{
public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;
IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');
return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
cssClass : String.Empty;
}
}
然后在 li 元素的导航中使用它，如下所示...
<li class="nav-item @Html.IsSelected(actions: "Index", controllers: "Home")">
@Html.ActionLink("Home", "Index", "Home", null, new { @class = "navlink-custom" })
</li>
<li class="nav-item @Html.IsSelected(actions: "Privacy", controllers: "Home")">
@Html.ActionLink("Privacy", "Privacy", "Home", null, new { @class = "navlink-custom" })
</li>
<li class="nav-item @Html.IsSelected(actions: "Index", controllers: "Movies")">
@Html.ActionLink("Watch List", "Index", "Movies", null, new { @class = "navlink-custom" })
</li>
<li class="nav-item @Html.IsSelected(actions: "ShowSearchForm", controllers: "Movies")">
@Html.ActionLink("Find Movies", "ShowSearchForm", "Movies", null, new { @class = "navlink-custom" })
</li>
...并不要忘记添加 CSS 样式...
.selected {
background-color: #d0eef9;
border-radius: .4em;
}
英文:
I'm assuming you are trying to retain a 'selected' style on your nav item across page navigations. If I am correct then you don't want to take your approach where you 'prevent nav style from reloading on navigation'.
The way to do this is with a custom HtmlHelper method. You create the helper method and then append it to the li elements class. When the page loads it determines the route values and sets the style based on the current route values.
Create a Html Helper Extension method. This method will be called each page load and will use the route values to determine the current page, then based on these values it will apply the 'selected' css style to the 'li' element where the 'action' and 'controller' parameters match the current route.
public static class HtmlHelperExtensions
{
public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;
IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');
return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
cssClass : String.Empty;
}
}
Then use it your navigation on the li element, like so...
<li class="nav-item @Html.IsSelected(actions:"Index", controllers: "Home")">
@Html.ActionLink("Home", "Index", "Home",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item @Html.IsSelected(actions:"Privacy", controllers: "Home")">
@Html.ActionLink("Privacy", "Privacy", "Home",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item @Html.IsSelected(actions:"Index", controllers: "Movies")">
@Html.ActionLink("Watch List", "Index", "Movies",null, new {@class = "navlink-custom"})
</li>
<li class="nav-item @Html.IsSelected(actions:"ShowSearchForm", controllers: "Movies")">
@Html.ActionLink("Find Movies", "ShowSearchForm", "Movies",null, new {@class = "navlink-custom"})
</li>
... and don't forget to add a css style...
.selected {
background-color: #d0eef9;
border-radius: .4em;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论