http://aspsnippets.com/Articles/jQuery-Accordion-example-in-ASPNet-using-C-and-VBNet.aspx
1. 添加JQuery 引用
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
2.在<head></head>标签里面 写JQuery代码---dvAccordian是div层的id
<script type="text/javascript">
$(function () {
$("#dvAccordian").accordion();
})
</script>
3.在body标签里面，添加Repeater控件，并绑定数据库字段
<div id="dvAccordian" style="500px"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <h3><%# Eval("Title") %></h3> <div> <p><%# Eval("Content") %></p> </div> </ItemTemplate> </asp:Repeater> </div>
4.在后台添加以下的命名空间
using System.Data; using System.Configuration; using System.Data.SqlClient;
5.构造绑定Repeater控件的方法
private void BindRepeater()
{
string constr = ConfigurationManager.ConnectionStrings["DemosDatabaseConnectionString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select Title,Content from AccordionContent";
cmd.Connection = con;
con.Open();
Repeater1.DataSource = cmd.ExecuteReader();
Repeater1.DataBind();
con.Close();
}
}
}
6.在页面加载的时候，绑定控件
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindRepeater();
}
}
