ASP.NET MVC Razor engine показывает три данных в каждой строке?

Question

В ASP.NET MVC Razor Я хочу показать три записи данных в каждой строке, поэтому я пишу это:

<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>

Но я получаю эту ошибку

В блоке кода отсутствует закрывающий символ "}".Убедитесь, что у вас есть соответствующий символ "}" для всех символов "{" в этом блоке, и что ни один из символов "}" не интерпретируется как разметка.

В чем проблема и какя могу сделать что-то подобное?

Answer 1

Я думаю, что коду не нравится, что у вас, по-видимому, есть незакрытые теги HTML.

Место перед тр, @:

Снимите @ с передней части другого оператора if.

Например:

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

Answer 2

Вместо того, чтобы пытаться заставить список в таблицу, вы можете просто представить его как список:

<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>

Стилизовать отображение списка с тремя элементами в строке тривиально. Начните здесь и настройте по мере необходимости:

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