从 SQL 数据库值填充 Accoridon

Question

我正在创建一个将从 sql 数据库填充的手风琴。例如，如果数据库有 5 条记录（包括标题和描述），那么手风琴将有 5 个面板。绑定到面板标题字段的标题和由描述组成的正文。如下图：

这是我到目前为止使用 DataList 并将手风琴添加到项目模板的结果。

<asp:DataList ID="DynamicAccordion" runat="server" DataKeyField="Id" RepeatDirection="Vertical">
    <HeaderTemplate>
        <!--items in here are rendered once for the entire table and can be title, etc...)    -->
    </HeaderTemplate>
    <ItemTemplate>
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a runat="server" data-toggle="collapse" href="#collapseOne" data-parent="#accordion">
                            <asp:Label runat="server" Text='<%#Eval("Section") %>' ID="SectionTitle"></asp:Label>
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                         <a runat="server" data-toggle="collapse" href="#collapseOne" data-parent="#accordion">
                            <asp:Label runat="server" Text='<%#Eval("Description") %>' ID="Description"></asp:Label>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
    <FooterTemplate>
        <!--Same as the header template just the footer-->
    </FooterTemplate>
</asp:DataList>

这里是将手风琴绑定到 sql 记录的后端：

   protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadData();
    }

}

private void LoadData()
{
    var data = DataAccess.GetCurrentProject();


    try
    {
        //data.Columns.Add("hrefPath");
        foreach (DataRow dr in data.Rows)
        {
            dr["SectionTitle"] = dr["Section"];
            dr["Description"] = dr["Description"];
        }
        DynamicAccordion.DataSource = data;
        DynamicAccordion.DataBind();

    }
    catch (Exception ex)
    {

    }
}

//Data Access class code
       public static DataTable GetCurrentProject()
        {
            DataTable dt = new DataTable();
            try
            {
                string sqlCommandText = "Select * FROM RequestData";
                using (SqlConnection connect = new SqlConnection(strConn))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter(sqlCommandText, connect))
                    {
                        sda.Fill(dt);
                    }
                }
            }
            catch (Exception ex)
            {
                throw;
            }
            return dt;
        }

任何有助于创建这种动态手风琴的信息都会很棒。

谢谢

Answer 1

在 aspx 文件中使用 for each 循环来执行此操作： （请记住，您还需要附加到您的 ID 字段以使其唯一，否则您最终会得到重复）

<% foreach (DataRow dr in data.Rows) { %>
    <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a runat="server" data-toggle="collapse" href="#collapseOne" data-parent="#accordion">
                        <%= dr["Section"] %>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                     <a runat="server" data-toggle="collapse" href="#collapseOne" data-parent="#accordion">
                        <%= dr["Description"] %>
                    </a>
                </div>
            </div>
        </div>
 <% } %>