Develop Reference

Bootstrap 4.5 Tab always opens page instead of tab content in Blazor

I'm new to Blazor and just made a new project using WASM, Bootstrap 4.5 and .NET 5. I'm trying to make a tab layout work but whenever I click my tabs, they attempt to navigate to a new page, rather than opening the associated tab content.
I am not quite sure what it is I'm doing wrong here, as looking at pages of examples shows I'm doing what the examples are doing (Although it's possible I've simply grown blind to my own code now.)
Here is the code that generates the tabs and their content from my GameDetails.razor page:
#if (_game != null)
{
<ul class="nav nav-pills nav-fill" role="tablist">
#foreach (Tuple<string, string> key in _parsedMappings.Keys)
{
<li class="nav-item">
<a class="nav-link #(_isFirstElem == true ? "active" : "")"
id="#key.Item2.Replace(" ", "")-tab"
data-toggle="tab"
href="##key.Item2.Replace(" ", "")"
role="tab"
aria-controls="#key.Item2.Replace(" ", "")"
aria-selected="#(_isFirstElem == true ? "true" : "false")">#key.Item1, #key.Item2</a>
</li>
_isFirstElem = false;
}
#if (_isFirstElem == false) _isFirstElem = true;
</ul>
<div class="tab-content" id="tabContent">
#foreach (KeyValuePair<Tuple<string, string>, List<Mapping>> pair in _parsedMappings)
{
<div class="tab-pane fade show #(_isFirstElem == true ? "active" : "")"
id="#pair.Key.Item2.Replace(" ", "")"
role="tabpanel"
aria-labelledby="#pair.Key.Item2.Replace(" ", "")-tab">
<ul class="list-group">
#foreach (Mapping mapping in pair.Value)
{
<li class="list-group-item">
<b>#mapping.FunctionName</b>: <i>#mapping.Key</i>
</li>
}
</ul>
</div>
_isFirstElem = false;
}
</div>
}
It produces this html:
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item"><a class="nav-link active" id="Keyboard&Mouse-tab" data-toggle="tab" href="#Keyboard&Mouse" role="tab" aria-controls="Keyboard&Mouse" aria-selected="true">PC, Keyboard & Mouse</a>
</li>
<li class="nav-item"><a class="nav-link " id="NintendoSwitchJoycons-tab" data-toggle="tab" href="#NintendoSwitchJoycons" role="tab" aria-controls="NintendoSwitchJoycons" aria-selected="false">Nintendo Switch, Nintendo Switch Joycons</a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane fade show active" id="Keyboard&Mouse" role="tabpanel" aria-labelledby="Keyboard&Mouse-tab">
<ul class="list-group">
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
...
</ul>
</div>
<div class="tab-pane fade show " id="NintendoSwitchJoycons" role="tabpanel" aria-labelledby="NintendoSwitchJoycons-tab">
<ul class="list-group">
<li class="list-group-item">...</i></li>
<li class="list-group-item">...</i></li>
...
</ul>
</div>
</div>
Which to my knowledge is correctly formatted. So I am not quite sure why the tab tries to navigate to a web page instead of opening the tab content.
What am I doing wrong?

Try to remove the "&" symbol from id="" attributes

How do i set "nav-item active" in Blazor?

I'm building an application using Blazor & Bootstrap. I want to use a standard bootstrap navbar. I can't figure out how to add the "active" class to the <li> tag selected.
This is my code:
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="/counter" Match="NavLinkMatch.All">Counter</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="/fetchdata" Match="NavLinkMatch.All">Fetch data</NavLink>
</li>
</ul>
</div>
The built in <NavLink> which is a blazor component changes the class for the <a/> automatically. But since i am using bootstrap navbar i need to add "active" to the class of the selected <li>.
This is how it should look like when the link is active:
<li class="nav-item active">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
</li>

You could use the navigation manager:
<li class="nav-item #GetActive("", NavLinkMatch.All)">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
</li>
#code {
[Inject]
NavigationManager NavigationManager { get; set; }
protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged();
bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix)
{
var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower();
return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());
}
string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? "active" : "";
}

You should be able to use a custom template to achieve this:
<NavLink href="/myhref">
<Template>
<li class="#(context.isActive ? "active" : string.Empty)">
#context.content
</li>
</Template>
My link description
</NavLink>
Source

You can use the Bootstrap NavBar and Blazor's NavLink without having to add any additional code. The one caveat is that your "active" class will added to the <a> tag, as per Bootstrap's documentation, and not on the <li> tag.
From the Bootstrap 5.x docs (the initial example for navbar):
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
With that in mind, the Blazor NavLink component replaces the <a> tag:
<li class="nav-item">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
<hr />
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="/Reporting" Match="NavLinkMatch.All">
Reporting
<hr />
</NavLink>
</li>
Finally, once this is in place, you can add your own CSS to further modify the appearance:
.nav-link > hr {
visibility: hidden;
color: white;
height: 2px;
margin-top: 4px;
margin-bottom: 0;
}
.nav-item .nav-link.active > hr {
visibility: visible;
filter: blur(1.5px);
}
No other code is needed.
In my example, a blurred line will appear under the active menu item, as seen below (note, additional HTML/CSS would be required to achieve the completed visual):

How to stop partial from inheriting model?

Its my first time making a MVC website, so far so good, everything is smooth but I have one big problem.
I am using Layout with Partials for Header, Navigation, Footer.
This is my layout.
<div class="page-wrapper">
<header class="header">
<partial name="Partials/_HeaderTopPartial"/>
<div class="header-middle sticky-header">
<div class="container">
<div class="header-left">
<ul class="menu sf-arrows">
<li class="active">
<a asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<partial name="Partials/NavigationPartials/_NavigationHeaderLeftCategoryPartial"/>
<partial name="Partials/NavigationPartials/_NavigationHeaderLeftProductsPartial"/>
<partial name="Partials/NavigationPartials/_NavigationHeaderLeftPagesPartial"/>
</ul>
</div>
<partial name="Partials/NavigationPartials/_NavigationHeaderCenterPartial"/>
<div class="header-right">
<partial name="Partials/NavigationPartials/_NavigationHeaderRightPartial"/>
</div><!-- End .header-right -->
</div><!-- End .container -->
</div><!-- End .header-middle -->
</header><!-- End .header -->
I am passing a HomeViewModel Model to by _NavigationHeaderLeftCategoryPartial
#model HomeViewModel
<li>
Categories
<div class="megamenu megamenu-fixed-width">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6">
<div class="menu-title">
Variations 1<span class="tip tip-new">New!</span>
</div>
<ul>
<li>
Fullwidth Banner<span class="tip tip-hot">Hot!</span>
</li>
<li>
Boxed Slider Banner
</li>
<li>
Boxed Image Banner
</li>
<li>
Left Sidebar
</li>
<li>
Right Sidebar
</li>
<li>
Product Flex Grid
</li>
<li>
Horizontal Filter1
</li>
<li>
Horizontal Filter2
</li>
</ul>
</div><!-- End .col-lg-6 -->
</div><!-- End .row -->
</div><!-- End .col-lg-8 -->
<div class="col-lg-4">
<div class="banner">
<a href="#">
<img src="~/images/menu-banner-2.jpg" alt="Menu banner">
</a>
</div><!-- End .banner -->
</div><!-- End .col-lg-4 -->
</div>
</div><!-- End .megamenu -->
</li>
Everything works fine, until I click on the Login page, which is a partial located in another partial =>
_NavigationHeaderLeftPagesPartial
<li>
Pages
<ul>
<li>
Shopping Cart
</li>
<li>
Checkout
<ul>
<li>
Checkout Shipping
</li>
<li>
Checkout Shipping 2
</li>
<li>
Checkout Review
</li>
</ul>
</li>
<li>
Dashboard
<ul>
<li>
Dashboard
</li>
<li>
My Account
</li>
</ul>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="About">About Us</a>
</li>
<li>
Blog
<ul>
<li>
Blog
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Contact">Contact Us</a>
</li>
<li>
<partial name="_LoginPartial"/>
</li>
<li>
<a a asp-area="Identity" asp-page="/Account/ForgotPassword">Forgot Password</a>
</li>
</ul>
</li>
And lastly, the login partial
#using FashionNova.Common
#using FashionNova.Data.Models
#using Microsoft.AspNetCore.Identity
#inject SignInManager<ApplicationUser> SignInManager
#inject UserManager<ApplicationUser> UserManager
#if (this.SignInManager.IsSignedIn(this.User))
{
<a asp-area="Identity" asp-page="/Account/Logout">Logout</a>
}
else
{
<a asp-area="Identity" asp-page="/Account/Login">Login</a>
}
The error I am getting
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'Fashion.Web.Areas.Identity.Pages.Account.LoginModel', but this ViewDataDictionary instance requires a model item of type 'Fashion.Web.ViewModels.HomeViewModel'.
Please, somebody help me to understand how to set up different models for each different partial without them interfering with one another.

Please make sure that you pass models into your views. Here you can find more examples of that: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/partial-tag-helper?view=aspnetcore-3.0

Bootstrap 3 Tabs not applying the a href using URL.Action in Razor

I have some tabs in my Razor I have:
<div class="page-tabs">
<ul class="nav nav-tabs">
<li class='#(actionName.ToLower() == "viewsongamendments" &&
controllerName.ToLower() == "songmanagement" ? "active" : "")'>
Old Track Details
</li>
<li class='#(actionName.ToLower() == "updatedamendments" &&
controllerName.ToLower() == "songmanagement" ? "active" : "")'>
Updated Track Details
</li>
</ul>
But when looking in the source code, its not applying the ahref to the tab. Currently, this is showing:
<a data-container="body" data-toggle="tooltip" title="" data-original-title="Old Track Details">Old Track Details</a>

Bootstrap tabs work as below, please note how the hrefs match up from the nav element to the tabs in the tab-content element. The href is NOT a link to an action when used in this bootstrap context.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
#Html.RenderAction("ViewSongAmendments", "SongManagement")
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>

I managed to get it working with the code below. I ended up adding a variable new { songid = fullAccountCode the fullAccountCode pulled a value from the Model.
<div class="page-tabs">
<ul class="nav nav-tabs">
<li class='#(actionName.ToLower() == "viewsongamendments" &&
controllerName.ToLower() == "songsmanagement" ? "active" : "")'>
Old Song Details
</li>
<li class='#(actionName.ToLower() == "updatedsongamendments" &&
controllerName.ToLower() == "songsmanagement" ? "active" : "")'>
Updated Song Details
</li>
</ul>

navbar icons jumping down when the window get smaller

I use bootstrap.my navbar icons jumping down when the window get smaller.when it is too small the menu goes to 3line icon bar.
How I can set my icons to appear in one line in small window?
here is my navbar code,
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="brand-image" alt="" src="../image/fullLogo.png"/>
</a>
</div>
<div class=" col-md-offset-2">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="../MainPages/avayejavid.html" class="header-style">
<i class="fa fa-home li-header-style" aria-hidden="true" ></i>
خانه
</a>
</li>
<li class="dropdown ">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
معرفی <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
بیوگرافی
</li>
<li>
اعضای گروه
</li>
</ul>
</li>
<li>
<a href="../MainPages/gallery.html" class="header-style">
<i class="fa fa-picture-o li-header-style" aria-hidden="true" ></i>
گالری
</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
ویدئو <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
آموزش
</li>
<li>
تصنیف خوانی
</li>
<li>
ساز و آواز
</li>
</ul>
</li>
<li>
<a href="../MainPages/Articles.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
مقالات
</a>
</li>
<li>
<a href="../MainPages/movie.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
خرید
</a>
</li>
<li>
<a href="#" class="header-style">
<i class="fa fa-comments li-header-style" aria-hidden="true"></i>
تماس با ما
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
and here is my CSS:
.header-style{
padding-top:20px !important;
background-image:url(../images/icon.png);
background-size: 100% 100% !important;
padding-left:40px !important;
padding-right:40px !important;
}
.li-header-style{
color:#ffe766
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
#media (max-width:767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 1px;
margin-left: 1px;
}
}
.navbar-nav li a {
height:80px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom:0;
}
.navbar .nav > li.dropdown.open.active > a:hover,
.navbar .nav > li.dropdown.open > a {
color: #ffe766 !important;
background-color: transparent !important;
border-color: #ffe766 !important;
}
#brand-image
{
height:100px;
}

The problem is the icons are taking up too much space for the designated break-point.
I would advise reading the bootstrap documentation more thoroughly (especially the grid system): http://getbootstrap.com/css/#grid-media-queries
To fix your problem you would need to increase the .navbar breakpoint. This is explained very well here: https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint.
You can also look at this previous answer to help you: Change bootstrap navbar collapse breakpoint without using LESS