Chú ý: Phải thực hiện các hướng dẫn từ đầu
Tổng quan
Việc sử dụng Control Accordion trong AJAX Control Toolkit cung cấp nhiều panel và cho phép người sử dụng hiển thị một vài dữ liệu trong cùng 1 lúc. Các Panel thường được khai báo trong trang riêng, nhưng liên kết với một nguồn dữ liệu cung cấp linh hoạt hơn.
Các bước
Control Accordion cho thấy tất cả các thuộc tính quan trọng phía máy chủ. Thuộc tính Panes cấp quyền truy cập vào tập hợp các panel tạo nên Accordion. Mỗi panel là một loại AccordionPane. Ví dụ khởi tạo pane:
AccordionPane ap1 = new AccordionPane();
Các thuộc tính HeaderContainer của AccordionPane cung cấp quyền truy cập vào các control ASP.NET trong phần tiêu đề của pane, thuộc tính ContentContainer của AccordionPane không giống nhau phần nội dung của pane. Điều này cho phép mã ASP.NET thêm nội dung các pane:
ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Code"));
ap1.ContentContainer.Controls.Add(new
LiteralControl("Adding panes using code is really flexible."));
Cuối cùng, pane phải được Add vào tập hợp các Pane của Accordion:
acc1.Panes.Add(ap1);
Dưới đây là mã server-side hoàn chỉnh cho biết Add hai pane vào Control Accordion:
<script runat="server">
void Page_Load()
{
if (!Page.IsPostBack)
{
AccordionPane ap1 = new AccordionPane();
ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Markup"));
ap1.ContentContainer.Controls.Add(new
LiteralControl("Adding panes using markup is really simple."));
AccordionPane ap2 = new AccordionPane();
ap2.HeaderContainer.Controls.Add(new LiteralControl("Using Code"));
ap2.ContentContainer.Controls.Add(new
LiteralControl("Adding panes using code is really flexible."));
acc1.Panes.Add(ap1);
acc1.Panes.Add(ap2);
}
}
</script>
Chỉ thiếu thành phần nữa là Accordion, mà phụ thuộc vào sự hiện diện của control ASP.NET ScriptManager:
<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"
Width="300px" FadeTransitions="true">
</ajaxToolkit:Accordion>
</div>
</form>
Để hoàn tất ví dụ, hai class CSS được tham chiếu trong control Accordion cung cấp thông tin style cho trình duyệt:
<style type="text/css">
.header {background-color: green;
color: White;}
.content {border: solid;}
</style>
Các dữ liệu trong accordion được tự động thêm vào mã phía máy chủ
P/s: Chắc chắn khi chạy sẽ bị lỗi
AJAX Accordion Control - Multiple controls with the same ID '_header' were found. FindControl requires that controls have unique IDs.
Để khắc phục lỗi này, bạn cần thêm dòng này vào trước mỗi khởi tạo AccordionPane
ap1.ID = "AccordionPane1" + Guid.NewGuid().ToString();
Toàn bộ Code:
Code Aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="accordion02.aspx.cs" Inherits="accordion02" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load()
{
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DNGAZ.com | Accordion</title>
<style type="text/css">
.header
{
background-color: green;
color: White;
}
.content
{
border: solid;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<ajaxtoolkit:Accordion ID="Accordion12" runat="server" HeaderCssClass="header" ContentCssClass="content"
Width="300px" FadeTransitions="true">
</ajaxtoolkit:Accordion>
</div>
</form>
</body>
</html>
Code C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
public partial class accordion02 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
AccordionPane ap1 = new AccordionPane();
ap1.ID = "AccordionPane1" + Guid.NewGuid().ToString();
ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Markup"));
ap1.ContentContainer.Controls.Add(new
LiteralControl("Adding panes using markup is really simple."));
AccordionPane ap2 = new AccordionPane();
ap1.ID = "AccordionPane2" + Guid.NewGuid().ToString();
ap2.HeaderContainer.Controls.Add(new LiteralControl("Using Code"));
ap2.ContentContainer.Controls.Add(new
LiteralControl("Adding panes using code is really flexible."));
Accordion12.Panes.Add(ap1);
Accordion12.Panes.Add(ap2);
}
}
}