從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

回答

相關問題