AJAX 컨트롤 도구 키트의 ReorderList 컨트롤은 끌어서 놓기를 통해 사용자가 다시 정렬할 수 있는 목록을 제공합니다. 목록의 현재 순서는 서버에 유지되어야 합니다.
개요
AJAX 컨트롤 도구 키트의 컨트롤은 ReorderList 끌어서 놓기를 통해 사용자가 다시 정렬할 수 있는 목록을 제공합니다. 목록의 현재 순서는 서버에 유지되어야 합니다.
단계
컨트롤은 ReorderList 데이터베이스에서 목록으로의 데이터 바인딩을 지원합니다. 무엇보다도 목록 요소의 순서에 대한 변경 내용을 데이터 저장소에 다시 쓰는 것도 지원합니다.
이 샘플에서는 Microsoft SQL Server 2005 Express Edition 데이터 저장소로 사용합니다. 데이터베이스는 Express Edition을 포함하여 Visual Studio 설치의 선택적(무료) 부분입니다. 아래에서 별도의 다운로드 https://go.microsoft.com/fwlink/?LinkId=64064로도 사용할 수 있습니다. 이 샘플에서는 SQL Server 2005 Express Edition instance 호출 SQLEXPRESS 되어 웹 서버와 동일한 컴퓨터에 상주한다고 가정합니다. 이는 기본 설정이기도 합니다. 설정이 다른 경우 데이터베이스에 대한 연결 정보를 조정해야 합니다.
데이터베이스를 설정하는 가장 쉬운 방법은 Microsoft SQL Server Management Studio Express(https://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796& DisplayLang=en ). 서버에 연결하고 를 두 번 클릭하고 Databases 라는 Tutorials새 데이터베이스를 만듭니다(마우스 오른쪽 단추로 클릭하고 선택New Database).
이 데이터베이스에서 다음 4개의 열을 사용하여 라는 AJAX 새 테이블을 만듭니다.
-
id(NULL이 아닌 기본 키, 정수, ID) -
char(char(1), NULL) -
description(varchar(50), NULL) -
position(int, NULL)
AJAX 테이블의 레이아웃(전체 크기 이미지를 보려면 클릭)
다음으로 테이블을 몇 가지 값으로 채웁니다. 열에는 position 요소의 정렬 순서가 있습니다.
AJAX 테이블의 초기 데이터(전체 크기 이미지를 보려면 클릭)
다음 단계에서는 새 데이터베이스 및 해당 테이블과 통신하는 컨트롤을 생성 SqlDataSource 해야 합니다. 데이터 원본은 및 UPDATE SQL 명령을 지원 SELECT 해야 합니다. 나중에 목록 요소의 순서가 변경되면 컨트롤은 ReorderList 데이터 원본의 명령에 새 위치와 요소의 Update ID라는 두 값을 자동으로 제출합니다. 따라서 데이터 원본에는 다음 두 값에 대한 섹션이 <UpdateParameters> 필요합니다.
<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=Tutorials;Integrated Security=True"
ProviderName="System.Data.SqlClient" OldValuesParameterFormatString="original_{0}"
SelectCommand="SELECT [id], [char], [description], [position] FROM [AJAX] ORDER BY [position]"
UpdateCommand="UPDATE [AJAX] SET position=@position WHERE [id]=@original_id">
<UpdateParameters>
<asp:Parameter Name="position" Type="Int32" />
<asp:Parameter Name="original_id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
컨트롤은 ReorderList 다음 특성을 설정해야 합니다.
-
AllowReorder: 목록 항목을 다시 정렬할 수 있는지 여부 -
DataSourceID: 데이터 원본의 ID -
DataKeyField: 데이터 원본의 기본 키 열 이름 -
SortOrderField: 목록 항목에 대한 정렬 순서를 제공하는 데이터 원본 열
<DragHandleTemplate> 및 <ItemTemplate> 섹션에서 목록의 레이아웃을 미세 조정할 수 있습니다. 또한 다음과 같이 메서드를 사용하여 데이터 바인딩을 Eval() 수행할 수 있습니다.
<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="position"
AllowReorder="true" DataSourceID="sds" DataKeyField="id">
<DragHandleTemplate>
<div class="DragHandleClass">
</div>
</DragHandleTemplate>
<ItemTemplate>
<asp:Label ID="ItemLabel" runat="server" Text='<%#Eval("description") %>' />
</ItemTemplate>
</ajaxToolkit:ReorderList>
다음 CSS 스타일 정보(컨트롤의 ReorderList 섹션에서 참조됨<DragHandleTemplate>)는 끌기 핸들을 마우스로 가리키면 마우스 포인터가 적절하게 변경되도록 합니다.
<style type="text/css">
.DragHandleClass
{
width: 12px;
height: 12px;
background-color: red;
cursor:move;
}
</style>
마지막으로 컨트롤은 ScriptManager 페이지의 ASP.NET AJAX를 초기화합니다.
<asp:ScriptManager ID="asm" runat="server" />
브라우저에서 이 예제를 실행하고 목록 항목을 약간 다시 정렬합니다. 그런 다음 페이지를 다시 로드하거나 데이터베이스를 살펴보십시오. 변경된 위치는 유지 관리되었으며 데이터베이스의 열에 있는 position 값과 태그를 사용하는 것만으로 코드 없이 모두 반영됩니다.
데이터베이스의 데이터는 새 목록 항목 순서에 따라 변경됩니다(전체 크기 이미지를 보려면 클릭).
