如何使用/ MVC中的Razor視圖顯示一個Asp.net的DataList

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

這是我如何解決它：

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

Answer 2

你可以嘗試一個for而不是foreach。你將遍歷列表除以3並每次開始一個新的td。