I'm trying to create a razor menu in umbraco with a razor macro. I followed the umbraco tutorial about creating a razor menu:
http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/razor-recipes/navigation/TVPlayer
It works for my first three pages but then I want to add another one but the page doesn't show up in my menu. I have the following structure for my pages:
Start, calendar and Foto's do show up in my menu, but the news page doesn't. Is this structure correct or do I have to create a 'Home' page and place all my pages under that?
This is my razor macro code:
#inherits umbraco.MacroEngines.DynamicNodeContext
<nav>
<ul>
#{ var homeNode = Model.AncestorOrSelf("Home"); }
<li>#homeNode.Name</li>
#foreach (var page in homeNode.Children.Where("Visible"))
{
var isSelected = false;
if (Model.Id == page.Id || (Model.Parent != null && Model.Parent.Id == page.Id && Model.NodeTypeAlias != "Textpage"))
{
isSelected = true;
}
<li>
#page.Name
<!-- If the page has child nodes (2nd level) that are visible and docTypeAlias is Textpage (textpages) -->
#if (page.Children.Where("Visible").Count() > 0)
{
<ul>
#foreach (var childPage in page.Children.Where("Visible"))
{
<li>
#childPage.Name
</li>
}
</ul>
}
</li>
}
</ul>
</nav>
Ideally yes you need a page made with a doc type with the alias "Home" as you are defining you starting node/var by getting that page here,
var homeNode = Model.AncestorOrSelf("Home");
then after you are getting all the child pages of this homeNode so really all your structure should be
content
- Home
- start
- calender
- frontpage sliders
- fotos
- news
Related
when i use ticker by foreache loop to list my title of news the ticker disappear
when i use only li tag static title the ticker works Normally
the error
when i use static li
Edit
partial View _breakingnews contains the foreach
<ul id="ticker01" class="news_sticker">
#foreach (var item in Model.Take(3))
{
<li><img src="images/news_thumbnail3.jpg" alt="">#item.Title </li>
}
</ul>
Home controller
public PartialViewResult _breakingnews()
{
var cat = db.breakingNews.ToList();
return PartialView(cat);
}
i call partial view in layout
#Html.Action("_breakingnews", "Home")
I have a selection generated from the children of the current page. Within that selection (let's call it Fruit) I have items and each item has a fruitType.
This code doesn't work:
#{
var selection = CurrentPage.Children("fruit").Where("Visible");
}
<ul>
#foreach(var item in selection){
#if(#item.fruitType == "Apple"){
<li>
#item.Name<br/>
#item.fruitName<br>
#item.fruitType<br>
#if (item.image != null && !(item.image is Umbraco.Core.Dynamics.DynamicNull))
{ var m = Umbraco.Media(item.image);
<img src="#m.Url" alt="Picture of #item.Name" />
}
</li>
}
}
</ul>
What I'm trying to do is to only list the items with a fruitType of "Apple". This value is selected from a "fruitType" dropdown list and I've tried using both the numeric and string values that Umbraco uses from Dropdown datatypes.
It all works perfectly if I remove the if conditional except that it displays all fruit types.
Any suggestions?
sigh Just one too many declarations..
Turns out neither the if nor the item references need the additional # declaration in front of it so the correct code looks like:
#{
var selection = CurrentPage.Children("fruit").Where("Visible");
}
<ul>
#foreach(var item in selection){
if(item.fruitType == "Apple"){
<li>
#item.Name<br/>
#item.fruitName<br>
#item.fruitType<br>
#if (item.image != null && !(item.image is Umbraco.Core.Dynamics.DynamicNull))
{ var m = Umbraco.Media(item.image);
<img src="#m.Url" alt="Picture of #item.Name" />
}
</li>
}
}
</ul>
I have the following code, and it displays the listed text and the pagination at the bottom all fine. But when I try to get the images from the child page into the list it errors for me. Any ideas why?
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "SiteLayout.cshtml";
}
<div role="main" id="main">
<div id="blogPageFeatures">
<!-- loop through all of the child pages (blog posts) and grab data to output as a summary -->
#{
var pageSize =3;
var page =1;int.TryParse(Request.QueryString["page"],out page);
var items =Model.Content.Children().Where(x => x.IsDocumentType("BlogArticle")).OrderByDescending(x => x.CreateDate);
var totalPages =(int)Math.Ceiling((double)items.Count()/(double)pageSize);
if(page > totalPages)
{
page = totalPages;
}
else if(page <1)
{
page =1;
}
}
#foreach(var item in items.Skip((page -1)* pageSize).Take(pageSize))
{
<a href="#item.Url">
<!-- The next image line is where it errors -->
<img src="#Umbraco.Media(item.Children.blogArticleImage).Url">
<h2>#item.Name</h2>
<p class="blogTileDate">#item.CreateDate.ToString("dd/MM/yy")</p>
</a>
}
<div class="clearfix"></div>
<!-- Pagination START -->
#if(totalPages >1)
{
<div class="pagination">
<ul>
#if(page >1)
{
<li>Prev</li>
}
#for(int p =1; p < totalPages +1; p++)
{
var active =(p == page)?" class=\"active\"":string.Empty;
<li#(Html.Raw(active))>
#p
</li>
}
#if(page <totalPages)
{
<li>Next</li>
}
</ul>
</div>
}
<!-- Pagination END -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
You are getting Model.Content.Children, which is a strongly typed collection of IPublishedContent objects. You are then calling item.Children.blogArticlImage, which is not going to work, as you're trying to get the a property on the children of the item, not a property of the item itself. You're also trying to use dynamic syntax, which won't work on the strongly typed objects. Try changing your image code to:
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage")).Url">
That should do te trick, one thing to note is that if an item doesn't have an image set, or the image that has been selected has been deleted, it'll throw an error. A more robust approach would be something like this:
var imageSrc = "ADD DEFAULT IMAGE PATH HERE";
var media = Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage"));
if (media != null && !string.IsNullOrEmpty(media.Url))
{
imageSrc = media.Url;
}
<mig src="#imageSrc">
Hi I want to add a class of "active" to my li, if it is active or if I am on a page under that. I have the following code
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = null;
}
<nav class="topNav">
<ul>
#foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide")))
{
<li>
#item.Name
</li>
}
</ul>
</nav>
I think I can do something with this, but it gives an error
var isSelected = Model.Path.Contains(item.Id.ToString()) ? "active" : "";
<li class="#Html.Raw(isSelected)">
#item.Name
</li>
This is the error I get. Line 10.
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'Umbraco.Web.Models.RenderModel' does not contain a definition for 'Path' and no extension method 'Path' accepting a first argument of type 'Umbraco.Web.Models.RenderModel' could be found (are you missing a using directive or an assembly reference?)
Source Error:
Line 8: #foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide")))
Line 9: {
Line 10: var isSelected = Model.Path.Contains(item.Id.ToString()) ? "active" : "";
Line 11:
Line 12: <li class="#Html.Raw(isSelected)">
I have now tried with this, but no lunk
<ul>
<li>
#home.Name
</li>
#foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide")))
{
var isSelected = item.IsDescendant(Model,"active", "");
<li class="#Html.Raw(isSelected)">
#item.Name
</li>
}
</ul>
ok here is the solution. This is for typed, not dynamic cshtml.
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = null;
var home = Model.Content.AncestorOrSelf(1);
}
<ul>
#*Render Home item*#
#{ var homeActive = ""; }
#if( home.Id == Model.Content.Id){
homeActive = "active";
}
<li class="#homeActive">
<a href="#home.Url">
#home.Name
</a>
</li>
#*Render Home children*#
#foreach (var item in home.Children.Where(x => x.IsVisible()))
{
var active = "";
if(home.Id != Model.Content.Id){ #* if NOT home *#
if (item.Id == Model.Content.AncestorOrSelf(2).Id){
#* if foreach id and currentpage ancestor id is equal *#
active = "active";
}
}
<li class="#active">
<a href="#item.Url">
#item.Name
</a>
</li>
}
</ul>
You can try something like this:
var isSelected = item.IsDescendant(Model,"active", "");
Here is a list of the functions you can use:
#Model.AncestorOrSelf(string nodeTypeAlias)
#Model.AncestorOrSelf(int level)
#Model.AncestorOrSelf(Func<DynamicNode, bool> func)
and those Helper functions:
#Model.IsDescendant(DynamicNode[,valueIfTrue][,valueIfFalse])
#Model.IsDescendantOrSelf(DynamicNode[,valueIfTrue][,valueIfFalse])
Reference: Is the current page a descendant of a specific node id?
The following is the default script for navigation produced by umbraco:
#inherits umbraco.MacroEngines.DynamicNodeContext
#*
Macro to display child pages below the root page of a standard website.
Also highlights the current active page/section in the navigation with
the css class "current".
*#
#{
#*Get the root of the website *#
var root = Model.AncestorOrSelf(1);
}
<ul>
#foreach (var page in root.Children.Where("Visible"))
{
<li class="#page.IsAncestorOrSelf(Model, "current", "")">
#page.Name
</li>
}
</ul>
I just created a menu myself and needed the Home page to be active also. Working with just the method IsAncestorOrSelf doesn't work for the homepage.
The piece of code I've created is this:
#{
var root = Model.AncestorOrSelf(1);
var homeClass = root.Id == Model.Id ? "active" : "";
}
<ul id="nav" class="nav navbar-nav pull-right">
<li class="#homeClass"><a href="/" >Home</a></li>
#foreach (var page in root.Children.Where("Visible"))
{
<li class="#page.IsAncestorOrSelf(Model, "active", "")">
#page.Name
</li>
}
</ul>
This iterates through all children of the root node (1). To be able to discover if you are on the Home page, I'm checking the Id's of the page and set the active class accordingly.
How can i do this in razor:
when there is one item, i only want this item to be displayed. (item in fotoGallerij)
when there are more items, i want all of them (like the code bellow, working)
How can i make this if (i think) structure in razor (c# / umbraco)?
#inherits umbraco.MacroEngines.DynamicNodeContext
<ul class="image-gallery">
#foreach (var item in #Model.fotoGallerij)
{
<li>
<a class="gallery grouped" href="/ImageGen.ashx?height=500&constrain=true&crop=resize&image=#item.Image.umbracoFile" title="">
<img src="/ImageGen.ashx?width=71&height=73&crop=resize&image=#item.Image.umbracoFile" alt=""/></a>
</li>
}
</ul>
<script>
$("a.gallery").colorbox({rel:'grouped'});
</script>
Thanks for helping!
Razor is in effect C#, so anything you can do with C#, you can do with Razor. Something like this should work:
#inherits umbraco.MacroEngines.DynamicNodeContext
#if (Model.fotoGallerij.Count() == 1)
{
// Display only the one here...
}
else if (Model.fotoGallerij.Count() > 1)
{
// Loop through the list of items here...
}