Wednesday, 25 February 2015

jQuery Accordion using ASP.NET

Download the following js files from the below url.

http://jqueryui.com/download/

Default.aspx:



  <link href="jquery.ui.all.css" rel="stylesheet" />
    <script src="jquery-1.9.0.js"></script>
    <script src="jquery.ui.core.js"> </script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.accordion.js"></script>
    <link href="demos.css" rel="stylesheet" />
    <link href="jquery.ui.accordion.css" rel="stylesheet" />
    <link href="jquery.ui.theme.css" rel="stylesheet" />
    <link href="jquery.ui.core.css" rel="stylesheet" />


<script type="text/javascript">
        $(function () {
            $("#accordion").accordion();
        });
    </script>


<body>
    <form id="form1" runat="server">
        <div id="accordion" style="width: 400px">
            <asp:Repeater ID="rptAccordianDetails" runat="server">
                <ItemTemplate>
                        <h3>
                            <%# Eval("Countryname") %></h3>
                        <p>
                            <%# Eval("CountryDescription") %>
                        </p>
                  
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>







.cs page


protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindData();
        }
    }

    public void BindData()
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbtaskallocation"].ToString());
        SqlCommand cmd = new SqlCommand("select * from country", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        rptAccordianDetails.DataSource = ds;
        rptAccordianDetails.DataBind();  
    }





Output:




No comments:

Post a Comment