I am programming a website with ASP.NET MVC using C#. I have ul li, with a few tabs, I want to get the query string and check the value, according to the query string value, I want to make a li active
<li class="nav-item">
<a class="nav-link #{Context.Request.Query["ordering"] == "newest" ? 'active' : ''}" href="~/products?CatId=#Context.Request.Query["CatId"]&ordering=newest" role="tab" aria-controls="newest" aria-selected="true">newest</a>
</li>
<li class="nav-item">
<a class="nav-link #{Context.Request.Query["ordering"] == "MostVisited" ? 'active' : ''}" href="~/products?CatId=#Context.Request.Query["CatId"]&ordering=MostVisited" role="tab" aria-controls="MostVisited" aria-selected="false">MostVisited</a>
</li>
<li class="nav-item">
<a class="nav-link #{Context.Request.Query["ordering"] == "Most-Rank" ? 'active' : ''}" href="~/products?CatId=#Context.Request.Query["CatId"]&ordering=Most-Rank" role="tab" aria-controls="Most-Rank" aria-selected="false">Most-Rank</a>
</li>
<li class="nav-item">
<a class="nav-link #{Context.Request.Query["ordering"] == "cheapest" ? 'active' : ''}" href="~/products?CatId=#Context.Request.Query["CatId"]&ordering=cheapest" role="tab" aria-controls="cheapest" aria-selected="false">cheapest</a>
</li>
but it doesn't work, what is the problem?
Can you try to replace #{Context.Request.Query["ordering"] == "MostVisited" ? 'active' : ''}" by #(Context.Request.Query["ordering"] == "MostVisited" ? 'active' : '')" ?
If it is Razor template, then the right syntax is #(expression), not #{expression}.
Regards
Related
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
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):
I don't know how to get this string ?CurrentPage=2
this is my code
#page "/Category/{IdCategory}"
#using RN.Sieuthibamien.com.Data.Models
#model RN.Sieuthibamien.com.Pages.IndexModel
#{
ViewData["Title"] = "Category";
var id = Model.IdCategory;
}
<div>
<ul class="pagination">
<li class="page-item #(!Model.ShowFirst ? "disabled" : "")">
<a asp-page="./Category/#Model.IdCategory" asp-route-CurrentPage="1" class="page-link"><i class="fa fa-fast-backward"></i></a>
</li>
<li class="page-item #(!Model.ShowPrevious ? "disabled":"")">
<a asp-page="./Category/#Model.IdCategory" asp-route-CurrentPage="#(Model.CurrentPage -1)" class="page-link"><i class="fa fa-step-backward"></i></a>
</li>
<li class="page-item #(!Model.ShowNext ? "disabled":"")">
<a asp-page="./Category/#Model.IdCategory" asp-route-CurrentPage="#(Model.CurrentPage + 1)" class="page-link"><i class="fa fa-step-forward"></i></a>
</li>
<li class="page-item #(!Model.ShowLast ? "disabled":"")">
<a asp-page="./Category/#Model.IdCategory" asp-route-CurrentPage="#Model.TotalPages" class="page-link"><i class="fa fa-fast-forward"></i></a>
</li>
</ul>
</div>
when I click on next link then route that I want is ./Category/{IdCategory}?CurrentPage=2, but not and result is ./Category/{IdCategory}, Sorry with my English, Please help me
Change your tag helper to this:
<a asp-page="./Category" asp-route-IdCategory="#Model.IdCategory" asp-route-CurrentPage="1" class="page-link"><i class="fa fa-fast-backward"></i></a>
If you are on the same page you should change this from a asp-
page="./Category/#Model.IdCategory" to
<a asp-page="./Category"
and in order to navigate to your data based on what you click, just passed the currentpage to your OnGetAsync
OnGetAsync(int Currentpage){
CurrentPage = Currentpage == 0 ? 1 : Currentpage;
/// rest of the code here
}
bootstrap in C# submenus not being called, the url is shown in the bottom of the browser but when clicked nothing happens. What I am doing wrong?
<div class="navbar-collapse collapse dropdown">
<ul class="nav navbar-nav" role="menu">
<li role="menuitem">#Html.ActionLink("Contracts", "Index", "Contracts")</li>
<li class="dropdown-submenu" data-toggle="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Configuration <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">#Html.ActionLink("Contract Type", "ContractType",
"Configuration")</li>
<li role="menuitem">#Html.ActionLink("Cost Type", "CostType",
"Configuration")</li>
</ul>
</li>
</ul>
</div>
check your ActionResult does it match with your .chtml page ActionLink
I upgraded to Bootstrap 4.1. Now it is OK
<ul class="navbar-nav mr-auto">
<li class="nav-item #Html.IfSelected("Proposals")">
<a class="nav-link" href="#Url.Action("Index", "Proposal")">Proposals</a>
</li>
<li class="nav-item #Html.IfSelected("Contracts")">
<a class="nav-link" href="#Url.Action("Index", "Contracts")">Contracts</a>
</li>
<li class="nav-item #Html.IfSelected("Reporting")">
<a class="nav-link" href="#Url.Action("Reporting", "Home")">Reporting</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Configuration
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Url.Action("Actions", "Configuration")">Actions</a>
<a class="dropdown-item" href="#Url.Action("ContractType", "Configuration")">Contract Type</a>
<a class="dropdown-item" href="#Url.Action("CostType", "Configuration")">Cost Type</a>
<a class="dropdown-item" href="#Url.Action("PendingOn", "Configuration")">Pending On</a>
<a class="dropdown-item" href="#Url.Action("Periods", "Configuration")">Periods</a>
<a class="dropdown-item" href="#Url.Action("Operators", "Configuration")">Operators</a>
<a class="dropdown-item" href="#Url.Action("SellerType", "Configuration")">Entity Type</a>
<a class="dropdown-item" href="#Url.Action("Status", "Configuration")">Status</a>
<a class="dropdown-item" href="#Url.Action("Result", "Configuration")">Results</a>
<a class="dropdown-item" href="#Url.Action("Vendors", "Configuration")">Vendors</a>
<a class="dropdown-item" href="#Url.Action("Users", "Configuration")">Users</a>
</div>
</li>
</ul>
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>