如何重写数据列表被渲染成div而不是表

Question

我想将数据显示为div而不是表，重复列将通过浮动样式固定在div上。

有人知道重载渲染方法来做这个吗

谢谢。

Answer 1

我发现了这个解决方案，但是我把它贴出来帮助别人;

一些用户建议使用中继器，这是对的，但在这种情况下，datalist中的table应替换为div

RepeatLayout=RepeatLayout.Flow 

这将使span与br。但使用Horizontal的RepeatDirection将删除br，但仍然是span渲染项目。

RepeatDirection=RepeatDirection.Horizontal 

此语句将删除br，但仍然使用span呈现项目。

所以重写RenderContents，在span之外创建自己的divs，如果你不想使用Horizontal RepeatDirection，删除br，如下所示:

protected override void RenderContents(HtmlTextWriter w)
{
    writer.WriteBeginTag("div");
    writer.WriteAttribute("id", this.ClientID);
    writer.WriteAttribute("class", cssClass);
    writer.Write(HtmlTextWriter.TagRightChar);
    foreach (DataListItem li in this.Items)
    {
        writer.WriteBeginTag("div");
        writer.WriteAttribute("id", li.ClientID);
        writer.WriteAttribute("class", li.CssClass);
        writer.Write(HtmlTextWriter.TagRightChar);
        li.CssClass = null; // clear css not to added in span
        li.RenderControl(w);
        writer.WriteEndTag("div");
    }
    writer.WriteEndTag("div");
}

我问候

Answer 2

使用<asp:Repeater>控件代替<asp:DataList>控件。在<asp:Repeater>的<ItemTemplate>中，您可以使用<div>标签来控制布局，因为中继器除了您给它的内容外，不会呈现任何自己的html。

Answer 3

我总是这样设置DataList to Flow布局:

RepeatLayout="Flow" CssClass="my_repeater_cssclass"

这里的问题是，正如上面提到的。net仍然给你一个br标签来玩。

我的解决方案是通过应用于DataList本身的CSS类来设置DataList生成的br标签来显示:none。

.my_repeater_cssclass br
{
    display : none;   
}

然后，如果，出于某种原因，你有br标签，你想要显示，只要给你的br标签一个css类，让它做你想要的…就像我的实际例子一样，我最终使用它来清除每一行之后的浮点数:

.my_repeater_cssclass br.clear
{
    display : block;
    clear : both;
}

如果你有很多的br标签要处理，那么这可能不是你的解决方案。但我发现这是一个很好的简单的修复。