increment css class - Razor

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Dominic Kelly 114 posts 133 karma points

Jan 12, 2012 @ 17:32
0

Increment CSS class?
Hi all,

I'm brand new to Umbraco, and from a PHP background.

I'm trying to loop through some images, and increment a class on each li.
```
<ul class="clearfix">
   @{int i = 0;}
   @foreach (var item in @Model.HomepageSlide)
   {
   <li id="content_@i">
       <div class="homepage-content-top clearfix">
       @item.homepageSliderCopy
       </div>
   </li>
   i++;
   }
 </ul>
```
In short, I need content_@i to increment by 1 on each iteration. I can't get the syntax correct!
Copy Link

Barry Fogarty 493 posts 1129 karma points

Jan 12, 2012 @ 17:45

Best thing is to join up your element ID variable like so:

<ulclass="clearfix">
   @{
 int i = 0; 
 string elementId; 
 }
   @foreach (var item in @Model.HomepageSlide)
   {
 elementId = "content_" + i.ToString();
   <liid="@elementId">
       <divclass="homepage-content-top clearfix">
       @item.homepageSliderCopy
       </div>
   </li>
   i++;
   }
 </ul>

@{
 int i = 0;
 string elementId = "content_" + i.ToString();
}
...

Copy Link

Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib

Jan 12, 2012 @ 17:46
1
Hi Dominic,
You are very close and just a gotchya for the Razor syntax really.

Where you use content_@i the Razor engine doesn't know if this supposed to be HTML/text/email address so parses it as a string rather than switching back to the code parser. The way to fix this is to change it to <div id="content_@(i)"> Using brackets () after the @ tells the parser anything inside this needs to be parsed as code.
```
<ul class="clearfix">
    @{int i = 0;}
    
    @foreach (var item in @Model.Children)
     {
      <li id="content_@(i)">
        <div class="homepage-content-top clearfix">
          @item.Name
        </div>
      </li>
    
      i ++;
    }
</ul>
```
Copy Link
Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib

Jan 12, 2012 @ 17:47

0

Yep or you can do as Barry suggested and build your string up in a var first and then use that in your HTML

Copy Link
Barry Fogarty 493 posts 1129 karma points

Jan 12, 2012 @ 17:49

0

Nice one Warren - your solution is more elegant didnt know about that razor bracket syntax!

Copy Link
Dominic Kelly 114 posts 133 karma points

Jan 12, 2012 @ 17:51
0
```
content_@(i)
```
Works, thanks!
Copy Link
Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib

Jan 12, 2012 @ 17:51

0

This is a good little guide to Razor syntax
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx

Copy Link
Dominic Kelly 114 posts 133 karma points

Jan 12, 2012 @ 17:56

0

Ah nice thanks.

Copy Link
Gareth Evans 143 posts 335 karma points c-trib

Jan 12, 2012 @ 23:17

1

if Model.HomepageSlide returns a DynamicNodeList, you can do this:

@foreach(var item in Model.HomePageSlide)
{
<li id="[email protected]">@item.Name</li>
}

If it doesn't, this is equiv to Warren's example but slightly shorter:

@{
var i = 0;
foreach(var item in Model.HomePageSlide)
{
<li id="content_@(i++)">@item.Name</li>
}

The @(i++) returns i, and then increments it for the next loop pass.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Increment CSS class?