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


  • Kristof Eykens 3 posts 23 karma points
    Oct 08, 2011 @ 11:18
    Kristof Eykens
    0

    Validation error endtag

    The validation for razor scripts is messing up my ability to render a correct end tag.

    I'm looping over some images from the Media node, but for my html markup I need to pack x images in a div.

    But the validation doesn't let me close the end </div> correctly.

    Code snippet: 

        if(hasEndDiv == false)
        {
          @: </div> 
        }

    Error:

    Encountered end tag "div" with no matching start tag. Are your start/end tags properly balanced? 

    Code:

    @using uComponents.Core;

    @using uComponents.Core.uQueryExtensions;

    @using System;
    @{   
      var maxImages = 5;
      var counter = 1;
      var loopCount = 0;
      var totalItems = 0;
      var hasEndDiv = false;
      
      var items = uComponents.Core.uQuery.GetMediaByType("Image");
      totalItems = items.Count();
      
      <a class="prev browse left"></a>
      <div class="scrollable">
        <div class="items">
        @foreach (var c in items)  
        {
          if (!c.GetPropertyAsBoolean("showInSlideShow")) 
          {
            continue;
          }
          var filePath = c.GetPropertyAsString("umbracoFile");
          if (counter == 1)
          {
            hasEndDiv = false;
            @: <div>
          }
           
          <img src="@filePath" title="@c.Text" />
          if (counter++ == maxImages)
          {
            hasEndDiv = true;
            counter = 1;
            @: </div>
          } 
        }
        if(hasEndDiv == false)
        {
          @: </div> 
        }
        </div>
      </div>
      <a class="next browse right"></a>
    }

    Copy Link
  • Kristof Eykens 3 posts 23 karma points
    Oct 08, 2011 @ 11:30
    Kristof Eykens
    0

    I have a workaround, but the code is much less readable:

    @using uComponents.Core;
    @using uComponents.Core.uQueryExtensions;

    @using System;
    @{   
      var maxImages = 5;
      var counter = 1;
      var loopCount = 0;
      var totalItems = 0;
      var skip = false;
      
      var items = uComponents.Core.uQuery.GetMediaByType("Image");
      totalItems = items.Count();
      
      <a class="prev browse left"></a>
      <div class="scrollable">
        <div class="items">
        @for(var i=0; i<totalItems; i++)  
        {
          var c = items[i];
          skip = !c.GetPropertyAsBoolean("showInSlideShow");
          
          var filePath = c.GetPropertyAsString("umbracoFile");
          if (counter == 1 && !skip)
          {
            @: <div>
          }    
          if (!skip)
          {
            <img src="@filePath" title="@c.Text" />
          }
          if ((counter++ == maxImages && !skip) || loopCount++ == maxImages)
          {
            counter = 1;
            @: </div>
          }
        }
        </div>
      </div>
      <a class="next browse right"></a>
    }

    Copy Link
  • Dan Diplo 1505 posts 5911 karma points MVP 4x c-trib
    Oct 08, 2011 @ 18:01
    Dan Diplo
    0

    Note sure if these are of use, but worth noting anyway...

    You can use the special <text></text> tag to explicitly render content, which might work to render your end div. See http://weblogs.asp.net/scottgu/archive/2010/12/15/asp-net-mvc-3-razor-s-and-lt-text-gt-syntax.aspx

    Another option for when you're generating complex mark-up is to use the TagBuilder class to build your HTML tags explicitly.


    Copy Link
  • Kristof Eykens 3 posts 23 karma points
    Oct 08, 2011 @ 19:29
    Kristof Eykens
    0

    Got it to work with @Html.Raw('') :-)

     

    @using uComponents.Core;
    @using uComponents.Core.uQueryExtensions;
    @using System;

    @{   
      var maxImages = 5;
      var counter = 1;
      var loopCount = 0;
      var totalItems = 0;
      var hasEndDiv = false;
      
      var items = uQuery.GetMediaByType("Image");
      totalItems = items.Count();
      
      <a class="prev browse left"></a>
      <div class="scrollable">
        <div class="items">
        @foreach (var c in items)  
        {
          if (!c.GetPropertyAsBoolean("showInSlideShow")) 
          {
            continue;
          }
          var filePath = c.GetPropertyAsString("umbracoFile");
          if (counter == 1)
          {
            hasEndDiv = false;
            @Html.Raw("

    "

    )
          }
           
          <img src="@filePath" title="@c.Text" />
          if (counter++ == maxImages)
          {
            hasEndDiv = true;
            counter = 1;
            @Html.Raw("")
          } 
        }
        @if(hasEndDiv == false)
        {
          @Html.Raw("")
        }
        </div>
      </div>
      <a class="next browse right"></a>
    }

    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