Cấp bậc tác giả:

DOTNET

Asp.net Ajax Accordion control Outlook 2003 style

Được viết bởi QuangIT ngày 03/09/2012 lúc 12:26 AM
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.
  • 0
  • 1544
Tải tệp tin: Click ở đây

Asp.net Ajax Accordion control Outlook 2003 style


Ở đâ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.

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML