ASP.NET DataList - определение «столбцов / строк» ​​при повторении по горизонтали и использовании макета потока

Question

Вот мой DataList:

<asp:DataList id="DataList" Visible="false" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" runat="server">
        [Contents Removed]
</asp:DataList>

Создает разметку, в которой каждый элемент обернут в промежуток. Оттуда я хотел бы разбить каждый из этих отрезков на ряды из трех столбцов. В идеале я хотел бы что-то вроде этого:

<div>
 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
</div>
<div>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
</div>
[etc]

Самое близкое, что я могу сделать, это установить RepeatColumns в «3», а затем вставлять <br> после каждых трех элементов в DataList.

 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
<br>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
<br>

Это дает мне вид близко, но на самом деле ничего не получается - я все еще не могу управлять макетом так, как мне хотелось бы.

Может кто-нибудь предложить способ сделать это лучше? Если бы я мог реализовать приведенный выше пример - это было бы прекрасно, однако я бы также принял менее элегантное решение - при условии, что оно более гибкое, чем <br> (например, вставка <span class="clear"></span> вместо <br>).

Answer 1

Если вам действительно по какой-то причине нужно было использовать список данных вместо того, чтобы использовать его в качестве ретранслятора, вы можете попробовать сделать что-то вроде этого:

<asp:DataList ID="dataList" runat="server" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" OnItemDataBound="dataList_ItemDataBound">
    <HeaderTemplate>
        <div>
    </HeaderTemplate>
    <SeparatorTemplate>
        </div><div>
    </SeparatorTemplate>
    <ItemTemplate>
        <%# Container.DataItem %></ItemTemplate>
    <FooterTemplate>
        </div></FooterTemplate>
</asp:DataList>

---

protected void dataList_ItemDataBound(object sender, DataListItemEventArgs e) {
    if (e.Item.ItemType == ListItemType.Separator) {
        if ((e.Item.ItemIndex + 1) % 3 != 0) {
            e.Item.Controls.Clear();
        }
    }
}

Answer 2

Вы можете достичь желаемого макета, используя CSS, не изменяя исходную сгенерированную разметку. Поскольку теги span по умолчанию отображаются встроенными, переключение на встроенный блок и указание ширины 33% для этих промежутков должно помочь.

Или, точнее, установите для свойства CssClass элемента управления DataList значение, например «threecolumns».

Определите следующий стиль CSS:

<style type="text/css">
.threecolumns span 
{
    display: inline-block;
    width: 33%;
}
</style>

VS2008 может сказать, что inline-block не является допустимым параметром для свойства display. Я бы не стал сильно беспокоиться об этом, поскольку почти каждый браузер поддерживает .

Answer 3

Я могу быть смущен, но почему бы просто не использовать ретранслятор и пользовательский шаблон элемента?

Answer 4

добавить RepeatColumns="100000"