Список отображается в виде 2 столбцов

Question

У меня есть динамический список (asp .net collection) данных, который мне нужно отобразить на странице aspx.Я хочу, чтобы данные в двух столбцах заполнялись слева направо в зависимости от количества элементов в списке.Какой веб-контроль лучше всего использовать в этом случае?

Answer 1

Вы можете использовать DataList , Повторитель или GridView . Вопрос в том, какие функции вам необходимо поддерживать (сортировка, фильтрация, разбиение на страницы и т. Д.), Помимо требований к макету (все вышеперечисленное может сделать то, что вам нужно).

GridView и Repeater немного тяжелее, но обеспечивают легкие зацепки для реализации более продвинутых функций.

UPDATE

Пример:

<asp:DataList runat="server" id="dltest" 
                Border="1"
                Font-Name="Verdana" CellPadding="4"
                Font-Size="10pt"
                RepeatColumns="2" >
   <ItemTemplate>
     <table>
         <tr>
           <td>
              <%# DataBinder.Eval(Container.DataItem, "Description") %>
           </td>
           <td>
              <%# DataBinder.Eval(Container.DataItem, "Value") %>
           </td>
          </tr>
     </table>
   </ItemTemplate>
</asp:DataList> 

Примечание. Изменено в соответствии с вашими потребностями, но это должно помочь вам начать работу.

Answer 2

Повторитель будет работать в этой ситуации и предоставит вам большую гибкость для его оформления.

CSS

.container{margin:0; width:300px;}
.item{float:left;width:150px;height:30px;}
.clear{clear:both;width:100%; height:1px;}

ASPX

<div class="container">
    <asp:Repeater ID="rptTest" runat="server">
    <ItemTemplate>
        <div class="item"><%#Eval("DataColumn") %></div>
    </ItemTemplate>
    </asp:Repeater>
    <div class="clear"></div>
</div>

Eval ("DataColumn") будет представлять имя столбца таблицы, который вы хотите отобразить, и вы можете установить источник данных для ретранслятора либо в коде, либо с помощью одного из элементов управления источником данных drag and drop.

CSS отобразит данные в виде 2 столбцов, идущих слева направо, благодаря «float: left». Контейнер имеет ширину 300 пикселей, и каждый элемент будет иметь размер 150 пикселей, что должно придать ему вид в две колонки.