使用包含列的数据集内容渲染 div答案

【问题标题】：Render Divs with DataSet content including Columns使用包含列的数据集内容渲染 div
【发布时间】：2014-02-14 09:45:42
【问题描述】：

我正在努力将我的 DataSet 内容呈现为以列名作为标题的 DIV 标记。

我试图在这样的结构中得到它：

<div class="dataset">
        <div class="dsheader">
           <div class="dscell"><h6>Staff Name</h6></div>
           <div class="dscell"><h6>Accrued Hours</h6></div>
           <div class="dscell"><h6>Date Accrued</h6></div>
        </div>

        <div class="dsrow">
            <div class="dscell"><p>1</p></div>
            <div class="dscell"><p>2</p></div>
            <div class="dscell"><p>3</p></div>
        </div>

        <div class="clearfix"/>             
</div>

我不知道如何开始，所以我开始使用简单的方法并将数据呈现到表格中：

  Dim r As DataRow
    Dim dvCont As New HtmlGenericControl
    Dim dvHead As New HtmlGenericControl
    Dim dvRow As New HtmlGenericControl
    Dim dvCell As HtmlGenericControl


    For i As Integer = 0 To DataTable.Rows.Count - 1

        Dim myRow As New HtmlTableRow
        Dim divrow As New HtmlGenericControl
        Dim divcell As New HtmlGenericControl
        Dim StaffMemberCell As New HtmlTableCell
        Dim LieuTypeCell As New HtmlTableCell
        Dim LieuDateCell As New HtmlTableCell
        Dim LieuDetailsCell As New HtmlTableCell

        StaffMemberCell.InnerHtml = DataTable.Rows(i).Item("staff_member").ToString
        myRow.Cells.Add(StaffMemberCell)

        LieuTypeCell.InnerHtml = DataTable.Rows(i).Item("lieu_type").ToString
        myRow.Cells.Add(LieuTypeCell)

        LieuDateCell.InnerHtml = DataTable.Rows(i).Item("lieu_date").ToString
        myRow.Cells.Add(LieuDateCell)

        LieuDetailsCell.InnerHtml = DataTable.Rows(i).Item("lieu_details").ToString
        myRow.Cells.Add(LieuDetailsCell)

        lieuTable.Rows.Add(myRow)
    Next

我从这里去哪里？我知道要在 ASPX 页面上的 DIV 标签中添加runat="server"。

 <div id="dvContainer" class="dataset" runat="server">
    <div id="dvContHeader" class="dsheader" runat="server">
        <div id="dvContCell" class="dscell" runat="server"><h6>Header</h6></div>
        <div id="Div1" class="dscell" runat="server"><h6>Header</h6></div>
        <div id="Div2" class="dscell" runat="server"><h6>Header</h6></div>
    </div>

    <div id="dvRow" class="dsrow" runat="server"><p>data1</p></div>
        <div id="dvContCell" class="dsrow" runat="server"><p>data1</p></div>
        <div id="Div4" class="dsrow" runat="server"><p>data1</p></div>
        <div id="Div5" class="dsrow" runat="server"><p>data1</p></div>
    </div>
</div>

我遇到的另一个问题是我必须在 ASPX 文档中明确声明 div 吗？见下文。我发现多次使用 ID 标签存在问题。

【问题讨论】：

标签： html asp.net css vb.net

【解决方案1】：

我通过使用中继器达到了我想要的结果。

<asp:Repeater ID="Repeater1" runat="server">

<HeaderTemplate>
    <div class="dsDataSet">
            <div class="dsheader">
                <div class="dscell"><h6>Staff Name</h6></div>
                <div class="dscell"><h6>Accrued Hours</h6></div>
                <div class="dscell"><h6>Date Accrued</h6></div>
            </div>
</HeaderTemplate>
<ItemTemplate>
            <div class="dsrow">
                <div class="dscell"><p><%# Eval("Staff_member")%></p></div>
                <div class="dscell"><p><%# Eval("Num_Hours")%></p></div>
                <div class="dscell"><p><%# Format(Eval("Lieu_Date"), "dd-MM-yyyy")%></p></div>
            </div>

</ItemTemplate>

<FooterTemplate>
        <div class="clearfix"/>
    </div>  
</FooterTemplate>
</asp:Repeater>

【讨论】：