Programmatically start div and issue with closing the same div, Encountered end tag "div" with no matching start tag.

Question

I want to generate following html

<div id="my-grid" class="isotope">
   <div class="myProject-item">....</div>
   <div class="myProject-item">....</div>
   <div class="myProject-item">....</div>
   <div class="myProject-item">....</div>
</div>

basically every 4th row (I have more than 200 rows) (div with class myProject-item) should be wrapperd inside <div id="my-grid" class="isotope">

so I tried following

@{
    var counter = 0;
    for (int i = 1; i < 200; i++)
    {
        counter++;
        if (counter % 4 == 0)
        {
          <text><div id="my-grid" class="isotope"></text>
        }
         <div class="myProject-item">....</div>
        if (counter % 4 == 0)
        {
           </div> // ***** on this line render breaks ******    
        }      
    }
}

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

@RoryMcCrossan, You must have missed that OP is using razor. Where anything inside <text></text> is treated as content block — Satpal

Satpal Satpal · Accepted Answer · 2015-12-28T12:34:27

You need to specify that closing </div> is a content block.

        if (counter % 4 == 0)
        {
           <text></div> </text>
        }

Alternatively @: sequence can also be used, it will indicates that the line of content that follows should be treated as a content block.

@{
    var counter = 0;
    for (int i = 1; i < 200; i++)
    {
        counter++;
        if (counter % 4 == 0)
        {
          @:<div id="my-grid" class="isotope">
        }
         <div class="myProject-item">....</div>
        if (counter % 4 == 0)
        {
           @:</div> 
        }      
    }
}

Programmatically start div and issue with closing the same div, Encountered end tag "div" with no matching start tag.

2 Answers