The fact is, I needed to quickly bind an Accordion form the AJAX Control Kit to a simple list of objects, I didn't want to create a Table in the DB, simply because it wasn't necessary, I didn't want to write LINQ because it wan't part of my entity model. All I had was a Collection of anonymous types called (items) and I wanted to bind it to an accordian. Here is how you do it :
Step 1 : Create a new class and dump this in there.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Collections;
namespace WebSiteManagerz
{
public class AccordianItems
{
public static ArrayList FetchItems()
{
ArrayList Items = new ArrayList();
Items .Add(new { Name = "Full packaged solution including Design, Development, Hosting and Maintenance", ImageUrl = "img/icon1.gif" });
Items .Add(new { Name = "A vast range of different technologies catered for you needs", ImageUrl = "img/icon2.gif" });
Items .Add(new { Name = "A talented team of experienced web professionals, dedicated to your project", ImageUrl = "img/icon3.gif" });
Items .Add(new { Name = "Different levels of client interaction, from the \"Just get it done\" approach, to a much more intimate client experience", ImageUrl = "img/icon4.gif" });
return Items ;
}
}
}
Step 2: In your ASPX page, here is what you should add :
<asp:ObjectDataSource ID="Items" runat="server" SelectMethod="FetchItems" TypeName="WebSiteManagerz.AccordianItems" /> <cc1:Accordion ID="accordion" runat="server" FadeTransitions="false" FramesPerSecond="100" TransitionDuration="250" CssClass="accordion" HeaderCssClass="header" ContentCssClass="content" RequireOpenedPane="True" AutoSize="Fill"> <Panes> <cc1:AccordionPane ID="mail" runat="server"> <Header> <div> <span>What we offer?</span> </div> </Header> <Content> <asp:ListView ID="pane1" runat="server" DataSourceID="Items"> <LayoutTemplate> <ul> <li id="someid" runat="server" /> </ul> </LayoutTemplate> <ItemTemplate> <li style='background-image: url(<%# Eval("ImageUrl") )'> <%# Eval("Name") %></li> </ItemTemplate> </asp:ListView> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion>
No comments:
Post a Comment