다음을 통해 공유

DetailsView 웹 서버 컨트롤의 페이징

  • 아티클

업데이트: 2007년 11월

ASP.NET DetailsView 컨트롤에서는 사용자가 레코드를 한 번에 하나씩 페이징하는 기능을 기본적으로 지원합니다. 또한 이 컨트롤에서는 UI(사용자 인터페이스) 페이징의 사용자 지정도 지원합니다. DetailsView 컨트롤에서 데이터 페이지 하나는 바인딩된 행 하나에 해당합니다.

DetailsView 컨트롤의 페이징 동작

DetailsView 컨트롤에서는 데이터 소스의 레코드에 대한 페이징을 지원합니다. 페이징 동작을 사용하려면 AllowPaging 속성을 true로 설정합니다. DetailsView 컨트롤에서 요청하는 페이지 크기는 항상 한 행입니다.

DetailsView 컨트롤이 데이터 소스 컨트롤에 바인딩되거나 ICollection 인터페이스를 구현하는 데이터 집합 등의 데이터 구조에 바인딩되어 있으면 이 컨트롤은 데이터 소스에서 모든 레코드를 가져온 다음 현재 페이지에 대한 레코드를 표시하고 나머지는 삭제합니다. 사용자가 다른 페이지로 이동하면 DetailsView 컨트롤은 이 과정을 반복하여 다른 레코드를 표시합니다.

참고:

데이터 소스가 ICollection 인터페이스를 구현하지 않는 경우에는 DetailsView 컨트롤이 페이징을 수행할 수 없습니다. 예를 들어, SqlDataSource 컨트롤을 사용하고 이 컨트롤의 DataSourceMode 속성을 DataReader로 설정한 경우 DetailsView 컨트롤은 페이징을 구현할 수 없습니다.

ObjectDataSource 컨트롤과 같은 일부 데이터 소스에서는 고급 페이징 기능을 제공합니다. 이 경우 DetailsView 컨트롤은 페이징할 때 데이터 소스의 고급 기능을 이용하여 성능과 유연성을 향상시킵니다. 요청되는 행 수는 데이터 소스가 총 행 수 확인을 지원하는지 여부에 따라 다를 수 있습니다.

참고:

ObjectDataSource 컨트롤에 대한 소스 개체에서 SelectCountMethod 메서드를 구현하는 경우와 같이 데이터 소스를 만드는 경우에는 데이터의 페이지를 제공할 때 데이터 소스에서 총 행 수를 반환하는 것이 좋습니다. 이렇게 하면 데이터의 페이지를 검색하기 위해 DetailsView 컨트롤에서 요청해야 하는 레코드 수를 최소화할 수 있습니다. 소스 데이터 개체에서 총 행 수를 제공하는 경우 DetailsView 컨트롤은 각 페이지에 대해 행을 한 번에 하나만 요청합니다. 총 행 수가 제공되지 않으면 DetailsView 컨트롤에서 요청된 데이터 페이지를 나타내는 행부터 시작하여 데이터 소스의 모든 행을 요청하고 표시되는 행을 제외한 모든 행을 삭제해야 합니다.

페이징 설정 및 사용자 인터페이스 사용자 지정

여러 가지 방법으로 DetailsView 페이징의 UI(사용자 인터페이스)를 사용자 지정할 수 있습니다.

페이징 모드

AllowPaging 속성을 true로 설정한 경우 PagerSettings 속성을 사용하여 DetailsView 컨트롤이 생성한 페이징 UI(사용자 인터페이스)의 모양을 사용자 지정할 수 있습니다. DetailsView 컨트롤은 사용자가 앞으로 또는 뒤로 이동하는 데 사용할 수 있는 방향 컨트롤과 특정 페이지로 이동하는 데 사용할 수 있는 숫자 컨트롤을 표시할 수 있습니다.

DetailsView 컨트롤의 PagerSettings 속성은 PagerSettings 클래스로 설정되어 있습니다. DetailsView 컨트롤의 Mode 속성을 PagerButtons 값으로 설정하여 페이징 모드를 사용자 지정할 수 있습니다. 예를 들면, 다음과 같이 설정하여 페이징 UI 모드를 사용자 지정할 수 있습니다.

DetailsView1.PagerSettings.Mode = PagerButtons.NextPreviousFirstLast

다음과 같은 모드를 사용할 수 있습니다.

페이저 컨트롤 모양

DetailsView 컨트롤에는 여러 가지 페이저 모드에 대한 텍스트와 이미지를 사용자 지정하는 데 사용할 수 있는 다양한 속성이 있습니다. 예를 들어, DetailsView 컨트롤의 페이징 모드를 NextPrevious로 설정한 경우 표시되는 텍스트를 사용자 지정하려면 NextPageText 및 PreviousPageText 속성을 사용자 고유의 값으로 설정하면 됩니다. 기본적으로 PreviousPageText 및 NextPageText 속성은 각각 "<"와 ">"로 설정됩니다.

이미지를 사용하여 페이징 컨트롤의 모양을 사용자 지정할 수도 있습니다. PagerSettings 클래스에는 첫 번째, 마지막, 이전 및 다음 페이지 명령 단추에 대한 이미지 URL 속성이 포함되어 있습니다.

마지막으로, DetailsView 컨트롤의 PagerStyle 속성을 TableItemStyle 값으로 설정하여 페이징 명령의 모양을 조정할 수 있습니다.

데이터 페이징 템플릿

DetailsView 컨트롤의 AllowPaging 속성을 true로 설정하면 DetailsView 컨트롤에서 페이징을 위한 UI(사용자 인터페이스) 컨트롤을 자동으로 추가합니다. PagerTemplate 템플릿을 추가하여 페이징을 위한 UI를 사용자 지정할 수 있습니다. 수행할 페이징 작업을 지정하려면 템플릿에 Button 컨트롤을 추가한 다음 이 컨트롤의 CommandName 속성을 Page로 설정하고 CommandArgument 속성을 다음 값 중 하나로 설정합니다.

  • First   첫 번째 페이지로 이동하려는 경우

  • Last   마지막 페이지로 이동하려는 경우

  • Prev   이전 페이지로 이동하려는 경우

  • Next   데이터의 다음 페이지로 이동하려는 경우

  • 숫자   특정 페이지를 나타내려는 경우

다음 코드 예제에서는 페이징을 제공하도록 구성된 DetailsView 컨트롤을 보여 줍니다.

<%@ Page language="VB" %>
<!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 >
    <title>DetailsView Example</title>
</head>
<body>
    <form id="form1" >
      <h3>DetailsView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:DetailsView ID="EmployeesDetailsView"
                DataSourceID="EmployeesSqlDataSource"
                AutoGenerateRows="false"
                AllowPaging="true"
                DataKeyNames="EmployeeID"     
                >

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <Fields>
                  <asp:BoundField Datafield="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
                  <asp:BoundField Datafield="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField Datafield="LastName"   HeaderText="Last Name"/>                    
                </Fields>

                <PagerSettings Mode="NextPreviousFirstLast"
                               FirstPageText="<<"
                               LastPageText=">>"
                               PageButtonCount="1"  
                               Position="Top"/> 
              </asp:DetailsView>

            </td>
          </tr>
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource" 
          SelectCommand="SELECT * FROM [Employees]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

<%@ Page language="C#" %>
<!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 >
    <title>DetailsView Example</title>
</head>
<body>
    <form id="form1" >
      <h3>DetailsView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:DetailsView ID="EmployeesDetailsView"
                DataSourceID="EmployeesSqlDataSource"
                AutoGenerateRows="false"
                AllowPaging="true"
                DataKeyNames="EmployeeID"     
                >

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <Fields>
                  <asp:BoundField Datafield="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
                  <asp:BoundField Datafield="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField Datafield="LastName"   HeaderText="Last Name"/>                    
                </Fields>

                <PagerSettings Mode="NextPreviousFirstLast"
                               FirstPageText="<<"
                               LastPageText=">>"
                               PageButtonCount="1"  
                               Position="Top"/> 
              </asp:DetailsView>

            </td>
          </tr>
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource" 
          SelectCommand="SELECT * FROM [Employees]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

참고 항목

참조

DetailsView 웹 서버 컨트롤 개요