从数据库中,绑定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();

            }

       }

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

 

你可能感兴趣的:(accordion)