ASP.NET DataList - definizione di & # 8220; colonne / righe & # 8221; quando si ripete in orizzontale e si utilizza il layout del flusso

Question

Ecco il mio DataList:

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

Questo genera un markup che ha ogni oggetto avvolto in un arco. Da lì, vorrei dividere ciascuna di queste campate in file di tre colonne. Idealmente, vorrei qualcosa del genere:

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

Il più vicino a cui posso arrivare è impostare RepeatColumns su " 3 " e quindi un < br > viene inserito ogni tre elementi nel 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>

Questo mi fa chiudere una specie di , ma in realtà non fa il trucco - non riesco ancora a controllare il layout come vorrei essere in grado di

Qualcuno può suggerire un modo per renderlo migliore? Se potessi implementare l'esempio sopra - sarebbe perfetto, comunque accetterei anche una soluzione meno elegante - purché sia ??più flessibile di < br > (come l'inserimento di un < span class = " clear " > < / span > anziché < br > ).

Answer 1

Se hai davvero bisogno di usare un datalist per qualche motivo invece di implementarlo come ripetitore, puoi provare a fare qualcosa del genere:

<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

Potrei essere confuso, ma perché non usare semplicemente un ripetitore e un modello di elemento personalizzato?

Answer 3

È possibile ottenere il layout desiderato utilizzando CSS senza alterare il markup generato originale. Poiché i tag span sono visualizzati in linea per impostazione predefinita, passare al blocco inline e specificare una larghezza del 33% su tali span dovrebbe fare il trucco.

O più specificamente, imposta la proprietà CssClass del tuo controllo DataList su un valore come " threecolumns " ;.

Definisci il seguente stile css:

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

VS2008 potrebbe indicare che il blocco inline non è un'impostazione valida per la proprietà display. Non me ne preoccuperei troppo poiché quasi tutti i browser lo supportano .

Answer 4

aggiungi questo RepeatColumns="100000"