从SQL数据库值填充Accoridon

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

enter image description here

这里是我迄今为止使用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; 
     }

的任何信息创建这个动态的手风琴将是巨大的帮助。

感谢

来源

2015-05-19 CSharpDev4Evr

你不是说用什么样的错误，如果有的话，你用当前的代码得到...... – matt

@matt，没有错误。手风琴只是不显示。这导致我相信我没有循环遍历每条记录并显示数据库中的值。 – CSharpDev4Evr

在ASPX文件中的每个循环来做到这一点

使用：（请记住，您还需要添加到您的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> 
<% } %>

来源

2015-05-19 15:39:53

感谢您的回复。在这种情况下，我会用你添加的foreach循环替换数据列表吗？ – CSharpDev4Evr

这里的概念是每个循环将在每次迭代中将所有包含的html元素添加到页面（即，4次循环迭代= 4次手风琴项目）。在你的情况下，你会有一个手风琴项目的循环内的HTML - 我猜测它在上面。所以你会把循环放到面板组中。 –

从SQL数据库值填充Accoridon

回答

相关问题