ASP.NET数据师 - 重复水平并使用流程布局时定义“列/行”

StackOverflow https://stackoverflow.com/questions/449344

  •  19-08-2019
  •  | 
  •  

题

这是我的数据师：

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

我能获得的最接近的是将重复列定为“ 3”，然后将 <br> 在数据师中每三个项目后插入。

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

有帮助吗？

解决方案

如果您确实需要出于某种原因使用数据师，而不是将其作为中继器实施，则可以尝试执行类似的事情：

<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();
        }
    }
}

其他提示

我可能会感到困惑，但是为什么不只是使用中继器和自定义项目模板呢？

您可以使用CSS实现所需的布局，而无需更改原始生成的标记。由于默认情况下显示跨度标签在线显示，因此切换到内联块并指定这些跨度的宽度为33％，应该可以解决问题。

或更具体地说，将数据库控制的CSSClass属性设置为“三个元素”之类的值。

定义以下CSS样式：

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

VS2008可能会告诉您，Inline Block不是显示属性的有效设置。我不会担心太多了 几乎每个浏览器都支持它.

添加 RepeatColumns="100000"

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top