x First time here? Check out the FAQ

Come work for Umbraco - The Umbraco HQ are hiring Project managers, .NET developers and DevOps people!

  • Avatar3posts23karma

    Validation error endtag

    Kristof Eykens started this topic October 8, 2011 @ 11:18, Go directly to the topic solution

    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();
      
      <class="prev browse left"></a>
      <div class="scrollable">
        <div class="items">
        @foreach (var 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>
      <class="next browse right"></a>
    }


  • Kristof Eykens posted this reply October 8, 2011 @ 11:30

    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();
      
      <class="prev browse left"></a>
      <div class="scrollable">
        <div class="items">
        @for(var i=0i<totalItemsi++)  
        {
          var items[i];
          skip !c.GetPropertyAsBoolean("showInSlideShow");
          
          var filePath c.GetPropertyAsString("umbracoFile");
          if (counter == &!skip)
          {
            @<div>
          }    
          if (!skip)
          {
            <img src="@filePath" title="@c.Text" />
          }
          if ((counter+== maxImages &!skip|loopCount+== maxImages)
          {
            counter 1;
            @</div>
          }
        }
        </div>
      </div>
      <class="next browse right"></a>
    }


  • Avatar613posts1015karma
    Comment with ID: 91754
    Dan Diplo posted this reply October 8, 2011 @ 06:01

    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.



  • Kristof Eykens posted this reply October 8, 2011 @ 07:29

    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();
      
      <class="prev browse left"></a>
      <div class="scrollable">
        <div class="items">
        @foreach (var 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>
      <class="next browse right"></a>
    }


Please login or Sign up To post replies