Search Your Dot Net Topic

Friday 14 May 2021

accordion using repeater in asp.net | repeater control | how to create accordion in asp.net c#






SOURCE CODE:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="rpeater-accordian.aspx.cs" Inherits="rpeater_accordian" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="rptAccord" runat="server">
            <HeaderTemplate>
                <div id="accordion">
            </HeaderTemplate>
            <ItemTemplate>
                <h3><%# Eval("FullName") %></h3>
                <div>
                    <ul>
                        <li><%# Eval("City") %></li>
                        <li><%# Eval("PhoneNumber") %></li>
                        <li><a href="mailto:<%# Eval("EmailID") %>"><%# Eval("EmailID") %></a></li>
                        <li><%# Eval("WebSite") %></li>
                    </ul>
                </div>
            </ItemTemplate>
            <FooterTemplate>
                </div>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>









using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class rpeater_accordian : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        FriendDataClassesDataContext db = new FriendDataClassesDataContext();
        var MemList = (from a in db.dbMembers select a).ToList();
        rptAccord.DataSource = MemList;
        rptAccord.DataBind();
    }
}


No comments:

Post a Comment