Currently i'm using the MvcSiteMapProvider to provide my sitemap. I'm now converting my menu to use the same XML. I have created a MyMenu.cshtml with the following code
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using MvcSiteMapProvider.Web.Html.Models
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#foreach (var node in Model.Nodes) {
<li>#Html.DisplayFor(m => node)</li>
}
</ul>
#Html.Partial("_LoginPartial")
</div>
And i display it with
#Html.MvcSiteMap().Menu("MyMenu")
I'm trying to get nested menus to work. As i have some dropdown menu items that havesub catergories. For example
--Main Menu
------Sub Menu
What would be the best way to accomplish this?
The menu templates are broken up into 3 separate parts, so you will need to override each part (not just the main one) by specifying the additional templates inside of your custom one. See this answer for a set of templates to get you started. Then it is just a matter of modifying the HTML the way you would like.
Related
I have created menus in Neos backend. Each menu node corresponds to a plugin of a controlleraction.
These controller actions are defined in policy.yaml as resources with their flow access policy roles.
The template for menu is defined in root.ts2 which i took a copy from Typo3.NeosDemoTypo3Org package.
mainMenu part of root.ts2 is
mainMenu = Menu {
entryLevel = 1
templatePath = 'resource://ABC.Demo/Private/Templates/TypoScriptObjects/MainMenu.html'
maximumLevels = 3
site = ${site}
}
MainMenu.html is:
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav nav-pills nav-justified">
<f:for each="{items}" as="item" iteration="menuItemIterator">
<f:then>
<li class="active">
<neos:link.node node="{item.node}">{item.label}</neos:link.node>
</li>
</f:then>
<f:else>
<li>
<neos:link.node node="{item.node}">{item.label}</neos:link.node>
</li>
</f:else>
</f:if>
</f:for>
</ul>
</div>
If I use {parts.mainMenu -> f:format.raw()} in Default.html, it prints all the menu items defined at root of Neos site.
How can i show only those menu items in main menu of webpage for which the user has access to the corresponding resource defined in policy.yaml.
Can anybody give an idea, the way to achieve it.
You should set the access protection on the page node. Currently there no interface for this yet, but you can define access roles for the nodes in the database. See table:
typo3_typo3cr_domain_model_nodedata field accessroles.
It should be a serialized array of role names.
This will then correctly reflect in the menu. And don't forget to set the TYPO3.Neos:Editor role as well otherwise editors won't be able to modify those pages.
It would be quite complicated to fetch the plugins from each page and do access checks against them but that could of course be another option. I cannot directly give you any hints for that thou, because the node type would be different for each page, depending on the plugin.
Could you provide me step by step how to create Bootstrap 3 Menu Navigation Bar and Breadcrumb using MVCSiteMap MVC5?
I've got problem when change this code to Bootstrap model
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu" class="nav navbar-nav">
#foreach (var node in Model.Nodes)
{
<li>
#Html.DisplayFor(m => node)
#if (node.Children.Any())
{
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
what I want is, there is BootstrapMenuHelperModel that read mvcSiteMapNode transform into navigation menu.
You are likely having issues because you have only solved part of the CSS problem. There are 3 different templates that are used by the Menu and 2 of them are also used by other HTML helpers. For that reason, it might be a good idea to create named templates (as in the example answer below) to create separate templates for each HTML helper (Menu, SiteMapPath, SiteMap, etc). For each level of nodes, the Menu recursively calls the SiteMapNodeListHelper, which might not be producing the HTML that Bootstrap is expecting (depending on which of the nav options you are using).
See this answer for a starting point, and then you can modify the HTML and class attributes from there.
Keep in mind you can also use custom attributes to supply additional data (such as CSS class names) based on the node selected, or you can use the IsCurrentNode and IsInCurrentPath properties of the SiteMapNodeModel to determine if the current node is active, if needed.
Here is a tutorial how to style your Sitemap:
Tutorial
Install Bootstrap and apply the classes to the tutorial:
Nav Bootstrap
I have read a few articles as I was searching for a solution. They all seemed to favor a hard-coded or HTML Helper alternative; however, I wanted something simple and database driven. This is my best solution (submitted as an answer, by me).
Here are some other articles' solutions:
An easy way to set the active tab using controllers and a usercontrol in ASP.NET MVC?
asp.net mvc and css: Having menu tab stay highlighted on selection
ASP.NET MVC: Tabs ASCX - Adjust CSS class based on current page?
Just pass a TempData down from one of your controllers like this:
TempData("CurrentPage") = "Nutrition"
Then, in your View add a conditional like this:
<ul>
#For Each item In Model
Dim currentItem = item
If (Not String.IsNullOrEmpty(TempData("CurrentPage")) And TempData("CurrentPage") = currentItem.NAV_Element) Then
#<li><a class="current" href="#Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">#Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>
Else
#<li>#Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</li>
End If
Next
</ul>
I have accomplished this in the past by using the route values to generate a href and then setting the parent tab to active based on that.
This is a bootstrap flavoured version:
<ul class="nav nav-tabs">
<li>Some page</li>
<li>Some other Page</li>
</ul>
<script type="text/javascript">
$(function(){
$('a[href="#Url.Action(ViewContext.RouteData.Values)"]').parents("li").addClass("active");
};
</script>
Si
I know I am too late to answer this but if you are using ASP MVC and looking for highlighting Menu items using controller and action, here is the solution which is working perfectly fine for me -
<li> <i class="fa fa-user-plus"></i> <span>Signup</span> </li>
I'm just starting out with MVC, and I'm trying to build a sample, proof of concept page for mvc interaction with jquery-mobile. I've searched for an answer on this, but I don't think I know enough yet to formulate proper queries.
On my view, I am trying to generate output that functions like this (sampled from the jqm demo site) :
<ul data-role="listview" data-inset="true">
<li><a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a></li>
</ul>
So, I'm working it like this :
#foreach (var item in Model) {
<li>
#Html.ActionLink( LargeExpandedMultiContentText, "Edit", new { id = item.SysID })
</li>
}
My question, which I don't know a simple way of asking, is, how, in MVC terms, do I fill the variable, so that the href generated by ActionLink() matches the style I've sampled from the jqm website?
I've tried this, and while it almost works, I'm sure its not the 'right' way, especially when I get to a spot of pulling "Steven Weber" and other strings out the the item/Model...plus it encodes the text, but I'm sure there's a way to deal with that easy enough.
#foreach (var item in Model) {
<li>
#{ String txt = "<h3>Stephen Weber</h3><p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p><p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> <p class=\"ui-li-aside\"><strong>6:24</strong>PM</p>";
}
#Html.ActionLink( txt, "Edit", new { id = item.SysID })
</li>
}
Thanks, I appreciate your help
Brian
I'm not sure it's possible to use Html.ActionLink to build such a complex action link. That said, the Html Helpers are just supposed to be helper functions to make your life easier by giving you shortcuts to render HTML in ways commonly required. You don't need to use them. In this case, I think instead you should use a normal html tag, and Url.Action to create the correct URL.
If you wanted to include this information within an enumerable model I'd probably do something like:
#foreach (var item in Model) {
<li><a href="#Url.Action(item.Action)">
<h3>#item.Name</h3>
<p><strong>#item.Title</strong></p>
<p>#item.Message</p>
<p class="ui-li-aside"><strong>#item.Time</strong>#item.TimePeriod</p>
</a></li>
}
Note: the function you were looking for to display contents without encoding them is #Html.Raw
In answer to my other 'half question' I found this resource...
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx
I believe the "razor delegate" item there at the bottom would fit the need I had.
#{
Func<dynamic, object> b =
#<strong>#item</strong>;
}
#b("Bold this")
I'm trying the render an HTML list that looks like the following, using the Razor view engine:
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
</ul>
The code that I am attempting to use to render this list is:
<ul>
#foreach (var item in Model.TheItems)
{
<li id="item_#item.TheItemId">Item #item.TheItemId</li>
}
</ul>
The parser is choking, because it thinks that that everything to the right of the underscore in the id attribute is plain text and should not be parsed. I'm uncertain of how to instruct the parser to render TheItemId.
I don't want to but a property on the model object that includes the item_ prefix.
I also have to keep this syntax as I am using the list with JQuery Sortable and with the serialize function that requires the id attribute to be formatted in this syntax.
You should wrap the inner part of the call with ( ):
<li id="item_#(item.TheItemId)">
How about using String.Format? like this:
<li id="#String.Format("item_{0}", item.TheItemId)">
I prefer:
<li id="#String.Concat("item_", item.TheItemId)">
The verbosity tells the support developers exactly what is happening, so it's clear and easy to understand.
You can even use this way to concat more strings:
<li id="#("item-"+item.Order + "item_"+item.ShopID)" class="ui-state-default"></li>
Here is another post.
Hope helps someone.
You can so this in a simpler way:
id="item_#item.TheItemId"
This post seems to be older but now this does works now in latest MVC:
id="item_#item.TheItemId"