AJAX 컨트롤 도구 키트의 아코디언 컨트롤은 여러 창을 제공하며 사용자가 한 번에 하나의 창을 표시할 수 있도록 합니다. 패널은 일반적으로 페이지 자체 내에서 선언되지만 데이터 원본에 바인딩하면 더 많은 유연성을 제공합니다.
개요
AJAX 컨트롤 도구 키트의 아코디언 컨트롤은 여러 창을 제공하며 사용자가 한 번에 하나의 창을 표시할 수 있도록 합니다. 패널은 일반적으로 페이지 자체 내에서 선언되지만 데이터 원본에 바인딩하면 더 많은 유연성을 제공합니다.
단계
우선 데이터 원본이 필요합니다. 이 샘플에서는 AdventureWorks 데이터베이스 및 Microsoft SQL Server 2005 Express Edition 사용합니다. 데이터베이스는 Visual Studio 설치(Express Edition 포함)의 선택적 부분이며 에서 https://go.microsoft.com/fwlink/?LinkId=64064별도의 다운로드로도 사용할 수 있습니다. AdventureWorks 데이터베이스는 SQL Server 2005 샘플 및 샘플 데이터베이스의 일부입니다(에서 https://www.microsoft.com/download/details.aspx?id=10679다운로드). 데이터베이스를 설정하는 가장 쉬운 방법은 Microsoft SQL Server Management Studio(/sql/ssms/download-sql-server-management-studio-ssms)을 사용하고 데이터베이스 파일을 연결하는 AdventureWorks.mdf 것입니다.
이 샘플에서는 SQL Server 2005 Express Edition instance 호출 SQLEXPRESS 되고 웹 서버와 동일한 컴퓨터에 상주한다고 가정합니다. 이는 기본 설정이기도 합니다. 설정이 다른 경우 데이터베이스에 대한 연결 정보를 조정해야 합니다.
ASP.NET AJAX 및 Control Toolkit의 기능을 활성화하려면 컨트롤을 ScriptManager 페이지의 아무 곳에나 배치해야 합니다(요소 내 <form> ).
<asp:ScriptManager ID="asm" runat="server"/>
그런 다음, 페이지에 데이터 원본을 추가합니다. 제한된 양의 데이터를 사용하기 위해 AdventureWorks 데이터베이스의 Vendor 테이블에서 처음 5개 항목만 선택합니다. Visual Studio 도우미 사용하여 데이터 원본을 만드는 경우 현재 버전의 버그가 테이블 이름(Vendor)Purchasing에 접두사를 추가하지 않습니다. 다음 태그는 올바른 구문을 보여 줍니다.
<asp:SqlDataSource ID="sds1" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 5
[VendorID], [Name] FROM [Purchasing].[Vendor]" />
데이터 원본의 이름(ID)을 기억하세요. 그런 다음, 아코디언 컨트롤의 DataSourceID 속성에서 이 식별을 사용해야 합니다.
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content"Width="300px"
DataSourceID="sds1" FadeTransitions="true">
아코디언 컨트롤 내에서 헤더() 및 콘텐츠<ContentTemplate>(<HeaderTemplate>)를 포함하여 컨트롤의 다양한 부분에 대한 템플릿을 제공할 수 있습니다. 이러한 요소 내에서 메서드를 사용하여 데이터 원본에서 데이터를 출력하기 DataBinder.Eval() 만 하면 됩니다.
<HeaderTemplate><b>Vendor #<%#DataBinder.Eval(Container.DataItem, "VendorID")%></b>
</HeaderTemplate>
<ContentTemplate><%#DataBinder.Eval(Container.DataItem, "Name")%></ContentTemplate>
</ajaxToolkit:Accordion>
페이지가 로드되면 데이터 원본은 다음 서버 쪽 코드를 사용하여 아코디언에 바인딩되어야 합니다.
<script runat="server">
void Page_Load()
{
acc1.DataBind();
}
</script>
이 샘플을 완료하려면 아코디언 컨트롤에서 참조되는 두 개의 CSS 클래스(및 속성 HeaderCssClassContentCssClass)를 정의해야 합니다. 페이지의 섹션에 <head> 다음 태그를 넣습니다.
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
아코디언의 데이터는 데이터 원본에서 직접 가져옵니다(전체 크기 이미지를 보려면 클릭).
