jQuery accordion using asp.net repeater control

Steps to modify the example in Part 74, to use asp.net repeater control 
 
Step 1 : Add a reference to the ASMX web service 
 
a) In the Solution Explorer, right click on the project and select Add > Service Reference
b) In the Add Service Reference dialog box, click the Discover button. This should discover the CountryService.asmx
c) In the Namespace textbox, type Services and click OK 

Step 2 : Add a new WebForm to the project. Copy and paste the following code in the code-behind file 
 
using System;
namespace Demo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Services.CountryServiceSoapClient client = new
                Services.CountryServiceSoapClient();
            Repeater1.DataSource = client.GetCountries();
            Repeater1.DataBind();
 
            ListView1.DataSource = client.GetCountries();
            ListView1.DataBind();
        }
    }
}
 
Step 3 : Copy and paste the following HTML and jQuery code in the ASPX page 
 
<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#accordion').accordion();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="accordion" style="width: 600px">
            <asp:Repeater ID="repeaterCountries" runat="server">
                <ItemTemplate>
                    <h3>
                        <%#Eval("Name") %>
                    </h3>
                    <div>
                        <%#Eval("CountryDescription") %>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>
 
Please note : You can also use the ASP.NET ListView control instead of Repeater control. 

Comments

Popular posts from this blog

jQuery dynamic menu from database in asp.net

Drag and Drop multiple File upload using jQuery AJAX in ASP.Net using C# and VB.Net

Automatically send Birthday email using C#.Net