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标记。

放在tr之前，@:

从另一个@语句的前面删除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;
}

ASP.NET MVC Razor引擎每行显示三个数据？

2 个答案: