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

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>

Asp.net core mvc -- Changing partial on user log in

I have a partial that looks like this:
#if (SignInManager.IsSignedIn(User))
{
<form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello #UserManager.GetUserName(User)!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log out</button>
</li>
</ul>
</form>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Registrieren" asp-action="Create">Anmelden</a></li>
<li><a asp-area="" asp-controller="Login" asp-action="Details">Einloggen</a></li>
</ul>
}
Now i'm not using the SignInManager to handle the login. I'm using Microsoft.AspNetCore.Session with a cookie.
I would like to handle the condition when the partial is shown by code. Like so:
if(session == xx)
{
//show logged in part of partial
}
or even maybe something like
name = HttpContext.Session.GetString("nameKey");
if(name != "")
{
//show logged in part of partial
}
What's the easiest way to achieve this?

Displaying dropdown of links with query builder

I am trying to create a dropdown in Umbraco 7, using the query builder. The dropdown is part of a navbar, which contains links to other pages as well. The page contains HTML with Razor code.
#{
var selection = Model.Content.Site().FirstChild("Sprog").Children()
.Where(x => x.IsVisible());
}
<ul class="sf-menu well" data-type="navbar">
#foreach(var item in selection){
if(item.Name == "Sommerhuse") {
<li>
Sommerhuse
#{
var selection2 = Umbraco.TypedContent(1090).Children()
.Where(x => x.IsVisible());
}
<ul>
#foreach(var sommerhus in selection2){
<li>
#sommerhus.Name
</li>
}
</ul>
</li>
} else {
<li>
#item.Name
</li>
}
}
</ul>
I tried nesting another query builder with the content I need for the dropdown into my navbar query builder and iterating through that
But this still doesn't create the dropdown. Instead it just returns a static link, where the dropdown should be shown. In my HTML prototype, the dropdown works fine using this code.
<nav class="nav pull-right">
<ul class="sf-menu well" data-type="navbar">
<li class="active">
Forside
</li>
<li>
Lejebetingelser
</li>
<li>
Sommerhuse
<ul>
<li>
Blokhus
</li>
<li>
Hvide Sande
</li>
<li>
Langeland
</li>
<li>
Marielyst
</li>
<li>
Ebeltoft
</li>
<li>
Rørvig
</li>
<li>
Bogense
</li>
</ul>
</li>
<li class="">
Kontakt
</li>
<li>
</li>
</ul>
</nav>
Apologies for the bad formatting, for some reason Visual Studio refuses to auto-format .cshtml files.

You don't have the <nav class="nav pull-right"> in your razor script.
Tip: do not compare on the name of a page because this will break your dropdown if the content editor changes the node name.
if(item.Name == "Sommerhuse") { // BAD IDEA
rather use the documentTypeAlias (if it is another document type)
if(item.DocumentTypeAlias == "aliasOfTheDocumentType") { // much safer
That will only work if the page has a special document type of course.

setting active class in c#.net masterpage

<div id="navigation">
<ul class="nav nav-pills">
<li role="presentation">Home</li>
<li role="presentation">Open Account</li>
<li role="presentation">ATM</li>
<li role="presentation">Branch Locator</li>
<li role="presentation">Contact US</li>
</ul>
</div>
I want to set active class in li tag based on the visited link, I have tried several answers from Stackoverflow but none seems to me working.
For your information, I am using Bootstrap, C#, Visual Studio for my development.

Your elements should look like (in master.page):
<li role="presentation" id="liDefault" runat="server">Home</li>
public String linkDefault
{
get
{
return "not_active";
}
set
{
liDefault.Attributes.Add("class", "" + value + "");
}
}
Then add following to your head part of content page:
<%# MasterType VirtualPath="~/MasterPage.master" %>
And code behind of your content page:
this.Master.linkDefault = "active";

You can achieve it using Jquery.
First set single class on all anchor tags in you li tags i.e:
<div id="navigation">
<ul class="nav nav-pills">
<li role="presentation">Home</li>
<li role="presentation">Open Account</li>
<li role="presentation">ATM</li>
<li role="presentation">Branch Locator</li>
<li role="presentation">Contact US</li>
</ul>
</div>
Now in jquery you have to check if any anchor tag is clicked so an "active" class will be set to its parent li tag. i.e.:
$(".link").click(function(){
$(this).parent().addClass("active");
})
Hope its works.