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"
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I am generating all menu link dynamically using Thymeleaf. I have written code which is working fine.
<ul>
<li th:each="menu : ${menus}">Home</span></li>
</ul>
My question is, how can I add a class (activeMenu) on li element if menu's value is equal to Home.
Usually you would insert this part in the element that you want to insert specific class, in your case span element:
th:class="${menu}=='Home' ? activeMenu"
or:
th:class="${menu}=='Home' ? activeMenu:''"
it should work like this:
<ul>
<li th:each="menu : ${menus}">th:text="${menu}">Home</span></li>
</ul>
I have not tried this specific condition, but it should work.
Hope this helps.
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 doing something like
#foreach (var item in Model)
<li id='pref#item.Id' >
..
the problem is that it's rendered as content 'pref#item.Id' the item.Id is not evaluated, anybody knows a way out of this ?
Razor thinks you're trying to render an email address. Try one of these two approaches:
<li id='pref#(item.Id)'>
<li id='<text>pref</text>#item.Id'>
See this handy quick reference by Phil Haack for more tips:
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx
What is the strategy in smarty for using different variables each time a template is included in another template?
Here is what I mean.
I have a smarty template that creates a simple navigation list.
<ul class='linkList'>
<li>
<h3>{$title}</h3>
<ul>
{foreach $links as $d}
<li><a title='{$d...}' href='{$d....}'>{$d.text}</a></li>
{/foreach}
</ul>
</li>
</ul>
I want to include it a number of times in my main template and each time pass it different values. Im not sure what strategy to use to do this.
If I assign variables in my php file like this
$smarty->assign('links',array(.....);
$smarty->assign('title','My first link list');
$smarty->assign('links',array(different values);
$smarty->assign('title','My second link list');
and then include the template twice i will just get the same list twice with the second lot of values.
The {include} tag allows you to pass variables in the call:
{include 'linklist.tpl' title="Sample Links 1" links=$link_array1}
{include 'linklist.tpl' title="Sample Links 2" links=$link_array2}
Otherwise, I'm pretty sure you can use either {assign} or the short form of assign ({$var=value}) before including the template.