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

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

jQuery dynamic menu from database in asp.net

Automatically send Birthday email using C#.Net