html - 使用包含列的数据集内容渲染 Div

Question

我正在努力将我的 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

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

 <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 标签存在问题。

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