Question

我在下面有这个列表，我使用Razor视图动态生成：

<table id="contractCoverablesGrid">
    <tbody>
        @foreach (var coverableItem in Model.ContractCoverablesList)
        {
            <tr>
                <td>
                    @Html.Hidden("coverID",coverableItem.CoverID)
                </td>
                <td>
                    @Html.Label(coverableItem.Name)
                </td>
                <td>
                    <input type='checkbox' class='chkboxActive' checked='checked' />
                </td>
            </tr>
        }
    </tbody>
</table>

正如您可以想象的那样，结果是一个垂直列表，它一直向下延伸。

我希望将此列表'包装'成三个相邻的列，而不是一个长列;就像在ASP.net Datalist服务器控件中一样（在Webforms中）。

我最初的想法是限制宽度和宽度。表的高度设置值然后保持浮动td（s）离开。但是我如何漂浮td。我不能把它变成div。

有什么想法？

请告诉我。

Answer 1

您可以尝试使用for而不是foreach。你可以遍历列表中的3除以每次开始一个新的td。

Answer 2

这是我解决它的方式：

<table id="contractCoverablesGrid" width="600" align="center">
    <tbody>
        <tr>
            @foreach (var coverableItem in Model.ContractCoverablesList)
            {
                <td>
                    <div id="dataListItem">
                        @Html.Hidden("coverableID", coverableItem.CoverID)
                        @Html.Label(coverableItem.Name)
                        <input type='checkbox' name="coverableItemCheckBox" id="coverableItemCheckBox" />
                    </div>
                </td>
            }
        </tr>
    </tbody>
</table>

<style>
    #dataListItem {
        float: left;
        font-weight: normal;
    }
</style>

如何在MVC Razor View中使用/显示Asp.net DataList

2 个答案: