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 라는 새 데이터베이스를 만듭니다(마우스 오른쪽 단추를 클릭하고 선택 New Database) Tutorials.
이 데이터베이스에서 다음 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 에 의해 반영되며 태그를 사용하는 것만으로 코드가 없는 모든 위치도 반영됩니다.
데이터베이스의 데이터는 새 목록 항목 순서에 따라 변경됩니다(전체 크기 이미지를 보려면 클릭).
