ASP.NET Datalist - Definieren von „Spalten/Zeilen“ beim Wiederholen von Horizontalen und Verwenden von Flusslayout

Question

Hier ist mein Datalist:

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

Dies erzeugt Markup, das jedes Element in einer Spannweite verpackt hat. Von dort möchte ich jede dieser Spannweiten in Reihen von drei Säulen zerlegen. Idealerweise möchte ich so etwas:

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

Das nächste, was ich dazu bringen kann, ist das Einstellen von Wiederholungen auf "3" und dann auf a <br> wird nach drei Elementen im Datalisten eingefügt.

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

Das bringt mich So'ne Art Nahe, aber wirklich nicht den Trick - ich kann das Layout immer noch nicht so kontrollieren, wie ich es gerne hätte.

Kann jemand einen Weg vorschlagen, dies besser zu machen? Wenn ich das obige Beispiel implementieren könnte - das wäre perfekt, würde ich jedoch auch eine weniger elegante Lösung akzeptieren - solange es flexibler ist als sie <br> (wie zum Beispiel ein Einfügen a <span class="clear"></span> Anstatt von <br>).

Answer 1

Wenn Sie aus irgendeinem Grund einen Datalisten verwenden mussten, anstatt dies als Repeater zu implementieren, können Sie versuchen, so etwas zu tun:

<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

Ich mag verwirrt sein, aber warum nicht einfach einen Repeater und eine benutzerdefinierte Elementvorlage verwenden?

Answer 3

Sie können Ihr gewünschtes Layout mit CSS erreichen, ohne das ursprünglich erzeugte Markup zu ändern. Da Span-Tags standardmäßig inline angezeigt werden, sollte der Umschalten auf Inline-Block und die Angabe einer Breite von 33% für diese Spannweiten den Trick machen.

Setzen Sie die CSSCASS -Eigenschaft Ihrer Datalistensteuerung genauer auf einen Wert wie "Threecolumns".

Definieren Sie den folgenden CSS -Stil:

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

VS2008 könnte Ihnen sagen, dass Inline-Block keine gültige Einstellung für die Anzeigeeigenschaft ist. Ich würde mich seitdem nicht zu sehr Sorgen machen Fast jeder Browser unterstützt es.

Answer 4

füge das hinzu RepeatColumns="100000"