ASP.NET MVC Razor engine show three data in each row? - asp.net-mvc

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"><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;
}