使用后台数据集动态加载数据到手风琴控件
4.75/5 (14投票s)
使用后台数据集填充手风琴 Ajax 控件
引言
在本文中，我使用代码后台数据集填充了手风琴控件。所以来深入了解一下这篇文章吧。这是我在 CodeProject 上的第一篇文章。我发布这篇文章是因为我在一个项目中遇到了这个问题。所以，我与大家分享。也许您也面临同样的问题。
Using the Code
对于这篇文章，您应该在您的计算机上安装 Visual Studio 2005 或更高版本，Microsoft SQL Server。
创建一个数据库，其中包含一个包含 Title 和 Detail 字段或列的表
现在，来创建 Visual Studio ASP.NET 网站，在页面上从工具箱中拖放脚本管理器和手风琴控件到页面上。代码将如下所示
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/accordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:Accordion ID="acrDynamic" runat="server" SelectedIndex="0"
HeaderCssClass="headerAccordion" ContentCssClass="contentAccordion">
</form>
</body>
手风琴控件的样式表标签是
.contentAccordion{
padding:4px;
background-color:Olive;
}
.headerAccordion
{
color:white;
background-color:Navy;
padding:4px;
border:solid 1px black;
}
现在您已经放置了手风琴控件和脚本管理器。在进入手风琴的动态填充之前，先介绍一下手风琴控件中的 static 数据。当您在手风琴控件中添加 static 数据时，您必须遵循以下步骤。
步骤 1
从工具箱中添加手风琴控件
<asp:Accordion ID="acrStatic" runat="server"
HeaderCssClass="headerAccordion" ContentCssClass="contentAccordion">
</asp:Accordion>
第二步
将 Panes 标签放在手风琴控件的结束标签内
<asp:Accordion ID="acrStatic" runat="server"
HeaderCssClass="headerAccordion" ContentCssClass="contentAccordion">
<panes></panes>
</asp:Accordion>
步骤 3
在 <panes> 的结束标签内，从工具箱中根据您的需求放置手风琴窗格。在每个手风琴窗格中，插入 Header 和 Content 标签，例如
<asp:Accordion ID="acrStatic" runat="server">
<Panes>
<asp:AccordionPane ID="AccordionPane1" runat="server">
<Header> First Header</Header>
<Content>Contents with in the ist header </Content>
</asp:AccordionPane>
<asp:AccordionPane ID="AccordionPane2" runat="server">
<Header>Second Header</Header>
<Content>Content with in the second Header</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
这就是关于手风琴控件中的 static 数据。希望您已经掌握了手风琴控件及其子控件和内部标签的确切层次结构。这只是为了向您介绍层次结构。
现在是动态部分...
希望您熟悉什么是 dataset 以及如何通过 C# 代码从 SQL 数据库获取数据。使用以下代码，我从数据库中获取 dataset。
string sql = "select * from tbl_Contents where CategoryID=37 and _
Title like 'What is Accordion control%'";
SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings_
["dbconnectionRW"].ToString());
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
int i =0; // I will use this for creating unique accordion panes
// in each iteration of the loop
Label lblTitle; // This i will use as a child control to handle Header Text
// in the accordion pane
Label lblConten; // This i will use as a child control to handle Content Text
// in the accordion pane
AjaxControlToolkit.AccordionPane pn; // I have declared an accordion pane but
// not yet initialized
如果您使用 datatable 而不是 dataset 也是可以的。我个人也推荐使用 Datatable，而不是 dataset，但在这里我使用了 dataset 来对应文章标题。
foreach(DataRow dr in ds.Tables[0].Rows)
{
lblTitle = new Label();
lblContent = new Label();
lblTitle.Text=dr["Title"].ToString();
lblContent.Text=dr["Detail"].ToString();
pn = new AjaxControlToolkit.AccordionPane();
pn.ID = "Pane" + i;
pn.HeaderContainer.Controls.Add(lblHtitle);
pn.ContentContainer.Controls.Add(lblContent);
acrDynamic.Panes.Add(pn);
++i;
}
我在代码中做了什么？使用 foreach 循环集合迭代器，在每次迭代中，我从数据集的 Table[0] 中获取一行，并将其存放在 DataRow dr 中，直到表中的记录结束。
lblTitle = new Label();
lblContent = new Label();
lblTitle.Text=dr["Title"].ToString();
lblContent.Text=dr["Detail"].ToString();
在这些语句中，我初始化了 lblTitle 和 lblcontent 标签，以便它们存在并且可以保存窗格的文本数据。所以，我将数据库表的 Title 字段数据放置到 lblTitle，将数据库表的 Detail 字段数据放置到 lblContent。
pn = new AjaxControlToolkit.AccordionPane();
在这里，在上面的语句中，我初始化了 AccordionPane，我在循环上方声明了它
pn.ID = "Pane" + i;
使用上面的语句，我在每次迭代中为手风琴窗格 pn 分配一个唯一的名称，因为我在每次迭代中都会递增，所以在每次迭代中，我都有一个唯一的 i 值，以便在每次迭代中创建的 accordionpane 变得唯一，否则它将无法工作，并由于 ID 冲突而产生多个 ID 的错误。
pn.HeaderContainer.Controls.Add(lblTitle);
pn.ContentContainer.Controls.Add(lblContent);
使用上面的语句，我将 lblTitle 添加为 Panel 的 Header 部分的子控件，并将 lblContent 添加为 Panel 的 Content 部分的子控件。现在是时候将 accordionpane 添加到手风琴控件了，因此在下面的语句的帮助下，可以完成。
acrDynamic.Panes.Add(pn);
++i; // incrementation so that in the next iteration I can have a unique value of i.
循环体在那里结束，但迭代没有结束。迭代将持续到最后一条记录。因此，在每次迭代中，它将创建窗格，并为窗格分配一个唯一的 ID，否则如果 ID 保持不变，它将生成一个错误。将这些标签分配给它们相应的部分。最后将窗格添加到 accordioncontrol 中，并为下一次迭代递增 i 变量。
转到页面的代码隐藏，它将如下所示
using System;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PopulateAcrDynamically();
}
}
private void PopulateAcrDynamically()
{
string sql = "select * from tbl_Contents";
SqlConnection con = new SqlConnection
(ConfigurationManager.AppSettings["dbConnection"]);
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count != 0)
{
Label lbTitle;
Label lbContent;
AjaxControlToolkit.AccordionPane pn;
int i=0; // This is just to use for assigning pane an id
foreach (DataRow dr in ds.Tables[0].Rows)
{
lbTitle = new Label();
lbContent = new Label();
lbTitle.Text = dr["Title"].ToString();
lbContent.Text = dr["Detail"].ToString();
pn = new AjaxControlToolkit.AccordionPane();
pn.ID = "Pane" + i;
pn.HeaderContainer.Controls.Add(lbTitle);
pn.ContentContainer.Controls.Add(lbContent);
acrDynamic.Panes.Add(pn);
++i;
}
}
}
}
现在在浏览器中运行。结果将是这样的
还有一件事 - 如果您下载解决方案，并且在执行时遇到一些错误，请告诉我。
谢谢，祝您好运。期待您的评论和建议。此致。