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.
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
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
good day, i'm trying to add an active style to indicate current page on my web app bt couldn't get a solution, i looked at previous post and answers where i saw this which was said to have worked
<ul class="nav">
<li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
<li><a data-target="#" data-toggle="pill" href="#users">Users</a></li><br/>
</ul>
when i used the data-toggle attribute in this code
<ul class="nav nav-tabs">
<li class="colour">#Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">#Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
<li class="colour">#Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">#Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
<li class="colour">#Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
<li class="colour" data-toggle="tab">#Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
</ul>
i couldn't redirect to the page that has the data-toggle attribute but made that page active.
I have already made the same issue. Please see my Code and I think it helps you, if you have some question I'm ready to answer you.
View:
<ul class="nav nav-tabs" id="myTab">
<li id="activeTab" class="active"><a data-toggle="tab" href="#active">Active</a></li>
<li id="currentTab" class=""><a data-toggle="tab" href="#current">Current</a></li>
<li id="completedTab" class=""><a data-toggle="tab" href="#completed">Completed</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div id="active" class="tab-pane fade active in">
#Html.Action("Active", "Home")
</div>
<div id="current" class="tab-pane fade">
#Html.Action("Current", "Home")
</div>
<div id="completed" class="tab-pane fade in">
#Html.Action("Completed","Home")
</div>
</div>
JavaScript - when need to catch Active tab from URL and make it open
$(document).ready(function() {
var tab = #ViewBag.tabId;
switch (tab) {
case 1:
removeAllActiveTabs();
$('#activeTab').addClass('active');
$('#active').addClass('active');
$('#active').addClass('in');
break;
case 2:
removeAllActiveTabs();
$('#currentTab').addClass('active');
$('#current').addClass('active');
$('#current').addClass('in');
break;
case 3:
removeAllActiveTabs();
$('#completedTab').addClass('active');
$('#completed').addClass('active');
$('#completed').addClass('in');
break;
default:
$('#activeTab').addClass('active');
$('#active').addClass('active');
$('#active').addClass('in');
break;
}
});
function removeAllActiveTabs() {
$('#myTab').each(function() {
$(this).find('li').removeClass('active');
});
$('#myTabContent').each(function() {
$(this).find('div').removeClass('active');
$(this).find('div').removeClass('in');
});
}
JavaScript - If you want to change URL when tab change
//When Client click on Tabs show in URL
$('#activeTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=1');
});
$('#currentTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=2');
});
$('#completedTab').on('click',function() {
window.history.pushState('','','/Home/SomeAction?tabId=3');
});
You need to add a classname active to your li.
Example:
<li class="active"><a data-target="#" data-toggle="pill" href="#users">Users</a></li>
<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.
You guys, I have a HTML like this:
<li class="selectBox-selected selectBox-hover">
<a rel="0">Select payee type</a>
</li>
<li class="">
<a rel="1">Injured Worker</a>
</li>
<li class="">
<a rel="2">Employer</a>
</li>
<li class="">
<a rel="4">Creditor</a>
</li>
This is code to get all the above option into the list:
List<IWebElement> lstOption = ConstantsLib.driver.FindElements(By.XPath("//li[. = 'selectBox-selected selectBox-hover']/following-sibling::li")).ToList();
Actually It does not work. I dont know if Where I am wrong.
Please help me. Many thanks.
Try changing your XPath to:
//li[contains(#class, 'selectBox-selected selectBox-hover')]/following-sibling::li