Asp.net Ajax Accordion control Outlook 2003 style

 Trong bài viết này tôi giới thiệu các bạn tiếp ứng dụng của AjaxControlToolkit's Accordion control để hiển thị dạng Mail list với style giống với Outlook 2003.

Ở đây ta sẽ sử dụng các ListView để thể hiện các Accodion Content như code sau:

<ajaxToolkit:Accordion
ID="accordion" runat="server"
FadeTransitions="false" FramesPerSecond="100" TransitionDuration="250"
CssClass="accordion" HeaderCssClass="header" ContentCssClass="content"
RequireOpenedPane="True" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane ID="mail" runat="server">
<Header>
<div style="background-image:url(_assets/img/mail_large.gif)">
<span>Mail</span>
</div>
</Header>
<Content>
<asp:ListView ID="lvMailItems" runat="server">
<LayoutTemplate>
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li style='background-image:url(<%# Eval("ImageUrl") %>)'><%# Eval("Name") %></li>
</ItemTemplate>
</asp:ListView>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="notes" runat="server">
<Header>
<div style="background-image:url(_assets/img/notes_large.gif)">
<span>Notes</span>
</div>
</Header>
<Content>
<asp:ListView ID="lvNoteItems" runat="server">
<LayoutTemplate>
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li style='background-image:url(<%# Eval("ImageUrl") %>)' title='<%# Eval("Name")%>'><%# Eval("Name") %></li>
</ItemTemplate>
</asp:ListView>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="contacts" runat="server">
<Header>
<div style="background-image:url(_assets/img/contact_large.gif)">
<span>Contacts</span>
</div>
</Header>
<Content>
<asp:ListView ID="lvContactItems" runat="server">
<LayoutTemplate>
<ul>
<li id="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li style='background-image:url(<%# Eval("ImageUrl") %>)' title='<%# Eval("Name")%>'><%# Eval("Name") %></li>
</ItemTemplate>
</asp:ListView>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Trong code behind bạn viết các hàm bind dữ liệu như sau:

protected void Page_Load(object sender, EventArgs e)
{
FetchMailItems();
FetchNoteItems();
FetchContactItems();
}
private void FetchMailItems()
{
ArrayList mailItems = new ArrayList();
mailItems.Add(new { Name = "Mailbox", ImageUrl = "_assets/img/mailbox.gif" });
mailItems.Add(new { Name = "Inbox", ImageUrl = "_assets/img/inbox.gif" });
mailItems.Add(new { Name = "Drafts", ImageUrl = "_assets/img/drafts.gif" });
mailItems.Add(new { Name = "Outbox", ImageUrl = "_assets/img/outbox.gif" });
mailItems.Add(new { Name = "Junk Mail", ImageUrl = "_assets/img/junk.gif" });
mailItems.Add(new { Name = "Deleted Items", ImageUrl = "_assets/img/deleted.gif" });
mailItems.Add(new { Name = "Search Folders", ImageUrl = "_assets/img/search.gif" });
mailItems.Add(new { Name = "Sent Items", ImageUrl = "_assets/img/sentitems.gif" });

lvMailItems.DataSource = mailItems;
lvMailItems.DataBind();
}
private void FetchNoteItems()
{
ArrayList mailItems = new ArrayList();
mailItems.Add(new { Name = "Icons", ImageUrl = "_assets/img/note_small.gif" });
mailItems.Add(new { Name = "Note List", ImageUrl = "_assets/img/note_small.gif" });
mailItems.Add(new { Name = "Last Seven Days", ImageUrl = "_assets/img/note_small.gif" });
mailItems.Add(new { Name = "By Category", ImageUrl = "_assets/img/note_small.gif" });
mailItems.Add(new { Name = "By Color", ImageUrl = "_assets/img/note_small.gif" });

lvNoteItems.DataSource = mailItems;
lvNoteItems.DataBind();
}
private void FetchContactItems()
{
ArrayList mailItems = new ArrayList();
mailItems.Add(new { Name = "Address Cards", ImageUrl = "_assets/img/contact_small.gif" });
mailItems.Add(new { Name = "Detailed Address List", ImageUrl = "_assets/img/contact_small.gif" });
mailItems.Add(new { Name = "By Category", ImageUrl = "_assets/img/contact_small.gif" });
mailItems.Add(new { Name = "By Company", ImageUrl = "_assets/img/contact_small.gif" });
mailItems.Add(new { Name = "By Follow-up Flag", ImageUrl = "_assets/img/contact_small.gif" });

lvContactItems.DataSource = mailItems;
lvContactItems.DataBind();
}

Ở đây tôi dùng dữ liệu tĩnh và tạo các ArrayList rồi bind dữ liệu vào các DataList. Bạn có thể tham khảo và áp dụng vào dữ liệu của bạn.
Download demo project: http://www.mediafire.com/?pk0cjryhx85nci2