Sign in Register
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
    Dominic Kelly
    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
    Barry Fogarty
    0

    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
      Warren Buckley
      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
      Warren Buckley
      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
      Barry Fogarty
      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
      Dominic Kelly
      0 
      content_@(i)

      Works, thanks!

      Copy Link
    • Warren Buckley 2106 posts 4836 karma points MVP 7x admin c-trib
      Jan 12, 2012 @ 17:51
      Warren Buckley
      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
      Dominic Kelly
      0

      Ah nice thanks. 

      Copy Link
    • Gareth Evans 143 posts 335 karma points c-trib
      Jan 12, 2012 @ 23:17
      Gareth Evans
      1

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

      @foreach(var item in Model.HomePageSlide)
      {
      <li id="content_@item.Position">@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

    • This forum is in read-only mode while we transition to the new forum.

      You can continue this topic on the new forum by tapping the "Continue discussion" link below.

    Please Sign in or register to post replies