从数据库中，绑定JQuery Accordion控件---Repeater control

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="width: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();
            }
       }

   

 

posted @ 2014-10-17 15:02  songxia777  阅读(279)  评论(0)    收藏  举报