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
Để kích hoạt các chức năng của ASP.NET AJAX và Control Toolkit, Control ScriptManager phải được đặt bất cứ nơi nào trên trang (nhưng trong <form>):
<asp:ScriptManager ID="asm" runat="server"/>
Sau đó, thêm một nguồn dữ liệu cho trang web. Để sử dụng một số lượng hạn chế của dữ liệu, chúng ta chỉ chọn năm mục đầu tiên trong bảng bán hàng của
cơ sở dữ liệu Northwind. Nếu bạn đang sử dụng Visual Studio để tạo ra nguồn dữ liệu, ghi nhớ rằng một lỗi trong phiên bản hiện tại không tiền tố tên bảng ( người bán hàng ) với mua hàng. Các đánh dấu sau đây cho thấy cú pháp chính xác:
<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data Source=.;DATABASE=Northwind;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
[VendorID], [Name] FROM [Purchasing].[Vendor]" />
Nhớ tên (ID) của nguồn dữ liệu. Điều này xác định phải được sử dụng trong thuộc tính DataSourceID của control Accordion:
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
Trong controlAccordion, bạn có thể cung cấp các template cho các phần khác nhau của control, bao gồm cả tiêu đề ( <HeaderTemplate> ) và nội dung ( <ContentTemplate> ). Trong những phần tử này, chỉ cần đầu ra dữ liệu từ các nguồn dữ liệu, sử dụng phương thức DataBinder.Eval ():
<HeaderTemplate><b>ID :<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>
</ajaxToolkit:Accordion>
Khi trang web được tải, các nguồn dữ liệu phải được ràng buộc với accordion mã phía máy chủ:
<script runat="server">
void Page_Load()
{
acc1.DataBind();
}
</script>
Để kết thúc template này, bạn cần định nghĩa hai lớp CSS được tham chiếu trong control Accordion (thuộc tính HeaderCssClass và ContentCssClass ). Đặt các markup trong phần<head> của trang sau đây :
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
Nhớ thêm <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %> vào đầu trang.
Toàn bộ Code Default:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="accordion01.aspx.cs" Inherits="accordion01" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DNGAZ.com | Accordion</title>
<script runat="server">
void Page_Load()
{
acc1.DataBind();
}
</script>
<style type="text/css">
.header
{
background-color: #efefef;
font-weight: bold;
border-bottom-color: Green;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.content
{
border: solid;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="asm" runat="server" />
<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data Source=.;DATABASE=Northwind;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
[CustomerID], [CompanyName] FROM Customers" />
<ajaxtoolkit:Accordion ID="acc1" runat="server" HeaderCssClass="header" ContentCssClass="content"
Width="300px" DataSourceID="sds1" FadeTransitions="true">
<HeaderTemplate>
<b>ID:
<%#DataBinder.Eval(Container.DataItem, "CustomerID")%></b>
</HeaderTemplate>
<ContentTemplate>
<%#DataBinder.Eval(Container.DataItem, "CompanyName")%></ContentTemplate>
</ajaxtoolkit:Accordion>
</div>
</form>
</body>
</html>