데이터베이스 에서 JQuery Accordion 컨트롤 을 연결 합 니 다---Repeater control

3220 단어 accordion
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.탭 에 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   

좋은 웹페이지 즐겨찾기