ASP.NET MVC Razor engine show three data in each row?

Question

In the ASP.NET MVC Razor engine I want to show three data entries in each row so I write this:

<table width="100%" border="0" cellspacing="22" cellpadding="0" style="line-height:18px;">
    <tr>
        <td align="center" valign="top">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    @{
                        int counter = 0;
                        foreach (MVCTaranehMah.Models.Folder item in ViewBag.items)
                        {
                            counter++;
                            if(counter%3 == 0)
                            {
                                <tr>
                            }
                            <td width="205" height="180" align="center" valign="top"><a href="galleryDetails?id=@item.id" ><img src="@Url.Content(item.thumb)" width="173" height="173" border="0"></a><br />
                                <p align="center" valign="top" class="header3">@item.title</p>
                            </td>
                            @if(counter%3 == 0)
                            {
                                </tr>
                            }
                        }
                    }
                 </tr>
            </table>
        </td>
    </tr>
</table>

But I get this error

The code block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.

What's the problem and how can I do something like this?

Answer 1

I think the code does not like that you seemingly have unclosed HTML tags.

Place before the tr, @:

Remove @ from the front of the other if statement.

For example:

if (counter%3 == 0)
{
    @:<tr>  
}

Answer 2

Rather than trying to force the list into a table, you could just render it as a list:

<ul class="thumbs">
    @foreach (var item in ViewBag.Items)
    {
        <li>
            <a href="galleryDetails?id=@item.id">
               <img src="@Url.Content(item.thumb)">
               @item.title
            </a>
        </li>
    }
</ul>

Styling the list to display with three items per row is trivial. Start here, and tweak it as needed:

ul.thumbs {
    overflow: hidden;
}

ul.thumbs li {
    float: left;
    width: 205px;
    height: 180px;
    margin: 22px;
    text-align: center;
}

ul.thumbs img {
    width: 173px;
    height: 173px;
    border: 0;
}