페이징 및 정렬 보고서 데이터(C#)

  • 아티클

작성자 : Scott Mitchell

PDF 다운로드

페이징 및 정렬은 온라인 애플리케이션에서 데이터를 표시할 때 매우 일반적인 두 가지 기능입니다. 이 자습서에서는 먼저 보고서에 정렬 및 페이징을 추가하는 방법을 살펴보겠습니다. 그러면 이후 자습서에서 빌드할 예정입니다.

소개

페이징 및 정렬은 온라인 애플리케이션에서 데이터를 표시할 때 매우 일반적인 두 가지 기능입니다. 예를 들어 온라인 서점에서 ASP.NET 책을 검색할 때 수백 권의 책이 있을 수 있지만 검색 결과를 나열하는 보고서는 페이지당 10개의 일치 항목만 나열합니다. 또한 제목, 가격, 페이지 수, 작성자 이름 등을 기준으로 결과를 정렬할 수 있습니다. 지난 23개의 자습서에서는 데이터 추가, 편집 및 삭제를 허용하는 인터페이스를 포함하여 다양한 보고서를 빌드하는 방법을 살펴보았지만 데이터를 정렬하는 방법과 DetailsView 및 FormView 컨트롤을 사용하는 유일한 페이징 예제는 살펴보지 않았습니다.

이 자습서에서는 몇 가지 확인란을 선택하기만 하면 수행할 수 있는 정렬 및 페이징을 보고서에 추가하는 방법을 살펴보겠습니다. 아쉽게도 이 단순한 구현에는 정렬 인터페이스가 원하는 것을 약간 남겨 두는 단점이 있으며 페이징 루틴은 큰 결과 집합을 통해 효율적으로 페이징하도록 설계되지 않았습니다. 이후 자습서에서는 기본 제공 페이징 및 정렬 솔루션의 제한 사항을 극복하는 방법을 살펴봅니다.

1단계: 페이징 및 정렬 자습서 웹 페이지 추가

이 자습서를 시작하기 전에 먼저 이 자습서와 다음 세 가지에 필요한 ASP.NET 페이지를 추가해 보겠습니다. 먼저 라는 PagingAndSorting프로젝트에 새 폴더를 만듭니다. 다음으로, 다음 5개의 ASP.NET 페이지를 이 폴더에 추가하여 모두 master 페이지를 Site.master사용하도록 구성합니다.

  • Default.aspx
  • SimplePagingSorting.aspx
  • EfficientPaging.aspx
  • SortParameter.aspx
  • CustomSortingUI.aspx

PagingAndSorting 폴더 만들기 및 자습서 ASP.NET 페이지 추가

그림 1: PagingAndSorting 폴더 만들기 및 자습서 ASP.NET 페이지 추가

다음으로, 페이지를 열고 Default.aspx 폴더에서 SectionLevelTutorialListing.ascxUserControls 디자인 화면으로 사용자 컨트롤을 끕니다. 마스터 페이지 및 사이트 탐색 자습서에서 만든 이 사용자 컨트롤은 사이트 맵을 열거하고 글머리 기호 목록의 현재 섹션에 해당 자습서를 표시합니다.

SectionLevelTutorialListing.ascx 사용자 컨트롤을 추가하여 Default.aspx

그림 2: SectionLevelTutorialListing.ascx 사용자 컨트롤을 Default.aspx

글머리 기호 목록에 페이징 및 정렬 자습서가 표시되도록 하려면 사이트 맵에 추가해야 합니다. Web.sitemap 파일을 열고 사이트 맵 노드 편집, 삽입 및 삭제 태그 뒤에 다음 태그를 추가합니다.

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

새 ASP.NET 페이지를 포함하도록 사이트 맵 업데이트

그림 3: 새 ASP.NET 페이지를 포함하도록 사이트 맵 업데이트

2단계: GridView에 제품 정보 표시

페이징 및 정렬 기능을 실제로 구현하기 전에 먼저 제품 정보를 나열하는 정렬 불가능하고 페이징할 수 없는 표준 GridView를 만들어 보겠습니다. 이 작업은 이 자습서 시리즈 전체에서 이전에 여러 번 수행했으므로 이러한 단계를 숙지해야 합니다. 먼저 페이지를 열고 SimplePagingSorting.aspx Toolbox에서 Designer GridView 컨트롤을 끌어 속성을 IDProducts로 설정합니다. 다음으로 ProductsBLL 클래스의 GetProducts() 메서드를 사용하여 모든 제품 정보를 반환하는 새 ObjectDataSource를 만듭니다.

GetProducts() 메서드를 사용하여 모든 제품에 대한 정보 검색

그림 4: GetProducts() 메서드를 사용하여 모든 제품에 대한 정보 검색

이 보고서는 읽기 전용 보고서이므로 ObjectDataSource의 Insert(), Update()또는 Delete() 메서드를 해당 ProductsBLL 메서드에 매핑할 필요가 없으므로 UPDATE, INSERT 및 DELETE 탭의 드롭다운 목록에서 (없음)을 선택합니다.

UPDATE, INSERT 및 DELETE 탭의 Drop-Down 목록에서 (없음) 옵션을 선택합니다.

그림 5: UPDATE, INSERT 및 DELETE 탭의 Drop-Down 목록에서 (없음) 옵션을 선택합니다.

다음으로 제품 이름, 공급업체, 범주, 가격 및 중단된 상태만 표시되도록 GridView 필드를 사용자 지정해 보겠습니다. 또한 속성을 조정하거나 가격을 통화로 서식 지정하는 등 필드 수준 서식을 HeaderText 자유롭게 변경할 수 있습니다. 이러한 변경 후 GridView의 선언적 태그는 다음과 유사하게 표시됩니다.

<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

그림 6은 브라우저를 통해 볼 때 지금까지 진행 상황을 보여줍니다. 페이지에는 각 제품의 이름, 범주, 공급업체, 가격 및 중단된 상태 표시된 모든 제품이 한 화면에 나열됩니다.

각 제품이 나열됩니다.

그림 6: 각 제품이 나열됩니다(전체 크기 이미지를 보려면 클릭).

3단계: 페이징 지원 추가

한 화면에 모든 제품을 나열하면 사용자가 데이터를 정독하는 정보 오버로드가 발생할 수 있습니다. 결과를 보다 쉽게 관리할 수 있도록 데이터를 더 작은 데이터 페이지로 분할하고 사용자가 한 번에 한 페이지씩 데이터를 단계별로 실행할 수 있도록 할 수 있습니다. 이렇게 하려면 GridView의 스마트 태그에서 페이징 사용 확인란을 검사. 그러면 GridView의AllowPaging 속성true이 로 설정됩니다.

페이징 지원 추가를 위한 페이징 사용 확인란을 선택합니다.

그림 7: 페이징 사용 확인란을 선택하여 페이징 지원 추가(전체 크기 이미지를 보려면 클릭)

페이징을 사용하도록 설정하면 페이지당 표시되는 레코드 수가 제한되고 GridView에 페이징 인터페이스 가 추가됩니다. 그림 7에 표시된 기본 페이징 인터페이스는 일련의 페이지 번호이므로 사용자가 한 데이터 페이지에서 다른 페이지로 빠르게 이동할 수 있습니다. 이 페이징 인터페이스는 이전 자습서에서 DetailsView 및 FormView 컨트롤에 페이징 지원을 추가할 때 살펴보았듯이 친숙해 보일 것입니다.

DetailsView 및 FormView 컨트롤 모두 페이지당 단일 레코드만 표시합니다. 그러나 GridView는 해당PageSize 속성을 참조하여 페이지당 표시할 레코드 수를 결정합니다(이 속성의 기본값은 10).

이 GridView, DetailsView 및 FormView의 페이징 인터페이스는 다음 속성을 사용하여 사용자 지정할 수 있습니다.

  • PagerStyle는 페이징 인터페이스의 스타일 정보를 나타냅니다. 는 , , ForeColor, CssClassHorizontalAlign등과 같은 BackColor설정을 지정할 수 있습니다.

  • PagerSettings 에는 페이징 인터페이스의 기능을 사용자 지정할 수 있는 속성이 포함되어 있습니다. PageButtonCount 페이징 인터페이스에 표시되는 최대 숫자 페이지 번호 수를 나타냅니다(기본값은 10). Mode 속성 은 페이징 인터페이스의 작동 방식을 나타내며 다음으로 설정할 수 있습니다.

    • NextPrevious 다음 및 이전 단추를 표시하여 사용자가 한 번에 한 페이지를 앞으로 또는 뒤로 나아갈 수 있도록 합니다.
    • NextPreviousFirstLast 다음 및 이전 단추 외에도 첫 번째 및 마지막 단추도 포함되어 사용자가 데이터의 첫 번째 또는 마지막 페이지로 빠르게 이동할 수 있습니다.
    • Numeric 일련의 페이지 번호를 표시하여 사용자가 모든 페이지로 즉시 이동할 수 있도록 합니다.
    • NumericFirstLast 페이지 번호 외에도 첫 번째 및 마지막 단추가 포함되어 사용자가 데이터의 첫 번째 또는 마지막 페이지로 빠르게 이동할 수 있습니다. 첫 번째/마지막 단추는 모든 숫자 페이지 번호가 맞지 않는 경우에만 표시됩니다.

또한 GridView, DetailsView 및 FormView는 모두 PageIndex 현재 보기 페이지와 데이터의 총 페이지 수를 나타내는 및 PageCount 속성을 제공합니다. 속성은 PageIndex 0부터 인덱싱됩니다. 즉, 데이터의 PageIndex 첫 번째 페이지를 볼 때 0이 됩니다. PageCount반면, 는 1에서 계산을 시작합니다. 즉 PageIndex , 0과 PageCount - 1사이의 값으로 제한됩니다.

잠시 시간을 내어 GridView 페이징 인터페이스의 기본 모양을 개선해 보겠습니다. 특히 페이징 인터페이스가 연한 회색 배경과 오른쪽 맞춤되도록 하겠습니다. GridView 속성을 PagerStyle 통해 이러한 속성을 직접 설정하는 대신 명명 PagerRowStyle 된 에서 Styles.css CSS 클래스를 만든 다음 Theme를 통해 s CssClass 속성을 할당 PagerStyle 해 보겠습니다. 먼저 다음 CSS 클래스 정의를 열고 Styles.css 추가합니다.

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

그런 다음 폴더 내 GridView.skin 의 폴더 App_Themes 에서 DataWebControls 파일을 엽니다. 마스터 페이지 및 사이트 탐색 자습서에서 설명한 대로 스킨 파일을 사용하여 웹 컨트롤의 기본 속성 값을 지정할 수 있습니다. 따라서 s 속성을 로 설정하는 PagerStyleCssClass 것을 포함하도록 기존 설정을 보강합니다 PagerRowStyle. 또한 페이징 인터페이스를 사용하여 최대 5개의 숫자 페이지 단추를 표시하도록 페이징 인터페이스를 NumericFirstLast 구성해 보겠습니다.

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

페이징 사용자 환경

그림 8은 GridView의 페이징 사용 확인란이 선택 PagerStyle 되고 파일을 통해 및 PagerSettings 구성이 만들어진 후 브라우저를 통해 GridView.skin 방문한 웹 페이지를 보여줍니다. 10개의 레코드만 표시되고 페이징 인터페이스는 데이터의 첫 번째 페이지를 보고 있음을 나타냅니다.

페이징을 사용하도록 설정하면 레코드의 하위 집합만 한 번에 표시됩니다.

그림 8: 페이징을 사용하도록 설정하면 레코드의 하위 집합만 한 번에 표시됩니다(전체 크기 이미지를 보려면 클릭).

사용자가 페이징 인터페이스에서 페이지 번호 중 하나를 클릭하면 포스트백이 계속되고 요청된 페이지 레코드를 표시하는 페이지가 다시 로드됩니다. 그림 9는 데이터의 마지막 페이지를 보기로 선택한 후의 결과를 보여줍니다. 마지막 페이지에는 하나의 레코드만 있습니다. 이는 총 81개의 레코드가 있으므로 페이지당 10개 레코드의 8페이지와 단독 레코드가 있는 한 페이지가 생성되기 때문입니다.

페이지 번호를 클릭하면 포스트백이 발생하고 레코드의 적절한 하위 집합이 표시됩니다.

그림 9: 페이지 번호를 클릭하면 포스트백이 발생하고 적절한 레코드 하위 집합 표시(전체 크기 이미지를 보려면 클릭)

페이징 Server-Side 워크플로

최종 사용자가 페이징 인터페이스의 단추를 클릭하면 포스트백이 계속되고 다음 서버 쪽 워크플로가 시작됩니다.

  1. GridView(또는 DetailsView 또는 FormView) PageIndexChanging 이벤트가 발생합니다.
  2. ObjectDataSource는 BLL에서 모든 데이터를 다시 요청합니다. GridView 및 PageSize 속성 값은 GridView PageIndex 에 표시해야 하는 BLL에서 반환된 레코드를 결정하는 데 사용됩니다.
  3. GridView 이벤트가 PageIndexChanged 발생합니다.

2단계에서 ObjectDataSource는 해당 데이터 원본에서 모든 데이터를 다시 요청합니다. 이 페이징 스타일은 속성을 로 설정할 AllowPaging 때 기본적으로 사용되는 페이징 동작이므로 일반적으로 기본 페이징이라고 합니다true. 기본적으로 데이터 페이징을 사용하면 웹 컨트롤은 실제로 브라우저로 전송되는 HTML에 레코드 하위 집합만 렌더링되더라도 데이터의 각 페이지에 대한 모든 레코드를 순진하게 검색합니다. 데이터베이스 데이터가 BLL 또는 ObjectDataSource에 의해 캐시되지 않는 한, 충분히 큰 결과 집합 또는 많은 동시 사용자가 있는 웹 애플리케이션에서는 기본 페이징을 사용할 수 없습니다.

다음 자습서에서는 사용자 지정 페이징을 구현하는 방법을 살펴보겠습니다. 사용자 지정 페이징을 사용하면 ObjectDataSource에 요청된 데이터 페이지에 필요한 정확한 레코드 집합만 검색하도록 구체적으로 지시할 수 있습니다. 상상할 수 있듯이 사용자 지정 페이징은 큰 결과 집합을 통해 페이징의 효율성을 크게 향상시킵니다.

참고

기본 페이징은 충분히 큰 결과 집합을 통해 페이징하거나 많은 동시 사용자가 있는 사이트에 대해 적합하지 않지만 사용자 지정 페이징을 구현하려면 더 많은 변경 내용과 노력이 필요하며 확인란을 확인하는 것만큼 간단하지 않습니다(기본 페이징과 마찬가지로). 따라서 기본 페이징은 트래픽이 적은 소규모 웹 사이트나 비교적 작은 결과 집합을 통해 페이징할 때 훨씬 쉽고 빠르게 구현할 수 있는 이상적인 선택일 수 있습니다.

예를 들어 데이터베이스에 100개 이상의 제품이 없을 것이라는 것을 알고 있는 경우 사용자 지정 페이징으로 인한 최소 성능 향상은 구현에 필요한 노력으로 상쇄될 수 있습니다. 그러나 언젠가 수천 또는 수만 개의 제품이 있을 수 있는 경우 사용자 지정 페이징을 구현 하지 않으면 애플리케이션의 확장성을 크게 저해할 수 있습니다.

4단계: 페이징 환경 사용자 지정

데이터 웹 컨트롤은 사용자 페이징 환경을 개선하는 데 사용할 수 있는 다양한 속성을 제공합니다. 예를 들어 속성은 총 페이지 수를 나타내고 PageIndex 속성은 PageCount 방문 중인 현재 페이지를 나타내며 사용자를 특정 페이지로 빠르게 이동하도록 설정할 수 있습니다. 이러한 속성을 사용하여 사용자 페이징 환경을 개선하는 방법을 설명하기 위해 현재 방문하는 페이지를 사용자에게 알리는 레이블 웹 컨트롤과 지정된 페이지로 빠르게 이동할 수 있는 DropDownList 컨트롤을 추가해 보겠습니다.

먼저 페이지에 레이블 웹 컨트롤을 추가하고, 해당 ID 속성을 로 PagingInformation설정하고, 해당 Text 속성을 지웁습니다. 다음으로 GridView 이벤트에 DataBound 대한 이벤트 처리기를 만들고 다음 코드를 추가합니다.

protected void Products_DataBound(object sender, EventArgs e)
{
    PagingInformation.Text = string.Format("You are viewing page {0} of {1}...",
        Products.PageIndex + 1, Products.PageCount);
}

이 이벤트 처리기는 레이블의 Text 속성을 사용자에게 현재 방문하는 Products.PageIndex + 1 총 페이지 Products.PageCount 수를 알리는 메시지에 할당 PagingInformation 합니다(0부터 인덱싱되므로 속성 PageIndex 에 Products.PageIndex 1을 추가합니다). 이벤트가 GridView에 바인딩될 때마다 이벤트가 실행되는 반면 PageIndexChanged 이벤트 처리기는 페이지 인덱스가 변경될 PageIndexChanged 때만 발생하므로 이벤트 처리 DataBound 기가 아닌 이벤트 처리기에서 DataBound 이 Label의 Text 속성 할당을 선택했습니다. GridView가 처음 첫 번째 페이지 방문 PageIndexChanging 에서 데이터가 바인딩된 경우 이벤트가 발생하지 않습니다(반면 DataBound 이벤트는 실행됨).

이 추가를 통해 사용자에게 방문하는 페이지와 데이터의 총 페이지 수를 나타내는 메시지가 표시됩니다.

현재 페이지 번호 및 총 페이지 수가 표시됩니다.

그림 10: 현재 페이지 번호와 총 페이지 수가 표시됩니다(전체 크기 이미지를 보려면 클릭).

레이블 컨트롤 외에도 현재 표시된 페이지가 선택된 GridView의 페이지 번호를 나열하는 DropDownList 컨트롤을 추가해 보겠습니다. 여기서 아이디어는 사용자가 DropDownList에서 새 페이지 인덱스만 선택하여 현재 페이지에서 다른 페이지로 빠르게 이동할 수 있다는 것입니다. 먼저 dropDownList를 Designer 추가하고, 속성을 ID 로 PageList 설정하고, 스마트 태그에서 AutoPostBack 사용 옵션을 선택합니다.

다음으로, 이벤트 처리기로 DataBound 돌아가서 다음 코드를 추가합니다.

// Clear out all of the items in the DropDownList
PageList.Items.Clear();
// Add a ListItem for each page
for (int i = 0; i < Products.PageCount; i++)
{
    // Add the new ListItem
    ListItem pageListItem = new ListItem(string.Concat("Page ", i + 1), i.ToString());
    PageList.Items.Add(pageListItem);
    // select the current item, if needed
    if (i == Products.PageIndex)
        pageListItem.Selected = true;
}

이 코드는 DropDownList의 항목을 지우는 것으로 PageList 시작합니다. 페이지 수가 변경될 것으로 예상하지 않지만 다른 사용자가 동시에 시스템을 사용하여 테이블에서 레코드 Products 를 추가하거나 제거할 수 있으므로 불필요한 것처럼 보일 수 있습니다. 이러한 삽입 또는 삭제는 데이터 페이지 수를 변경할 수 있습니다.

다음으로, 페이지 번호를 다시 만들고 기본적으로 선택된 현재 GridView PageIndex 에 매핑되는 페이지 번호를 만들어야 합니다. 현재 반복 인덱스가 GridView의 PageIndex 속성과 같으면 0PageCount - 1에서 로의 루프를 사용하여 각 반복에 새 ListItem 를 추가하고 해당 Selected 속성을 true로 설정합니다.

마지막으로 사용자가 목록에서 다른 항목을 선택할 때마다 발생하는 DropDownList SelectedIndexChanged 이벤트에 대한 이벤트 처리기를 만들어야 합니다. 이 이벤트 처리기를 만들려면 Designer DropDownList를 두 번 클릭한 다음 다음 코드를 추가하면 됩니다.

protected void PageList_SelectedIndexChanged(object sender, EventArgs e)
{
    // Jump to the specified page
    Products.PageIndex = Convert.ToInt32(PageList.SelectedValue);
}

그림 11에서 보여 주듯이 GridView의 PageIndex 속성을 변경하면 데이터가 GridView로 다시 설정됩니다. GridView의 DataBound 이벤트 처리기에서 적절한 DropDownList ListItem 가 선택됩니다.

6페이지 Drop-Down 목록 항목을 선택하면 사용자가 자동으로 여섯 번째 페이지로 이동됩니다.

그림 11: 6페이지 Drop-Down 목록 항목을 선택하면 사용자가 자동으로 여섯 번째 페이지로 이동됩니다(전체 크기 이미지를 보려면 클릭).

5단계: Bi-Directional 정렬 지원 추가

양방향 정렬 지원을 추가하는 것은 GridView의 스마트 태그(GridView의AllowSorting 속성을true로 설정)에서 정렬 사용 옵션을 검사 페이징 지원을 추가하는 것만큼 간단합니다. 이렇게 하면 GridView 필드의 각 헤더가 LinkButtons로 렌더링됩니다. 이 헤더를 클릭하면 포스트백이 발생하고 클릭한 열을 기준으로 정렬된 데이터를 오름차순으로 반환합니다. 동일한 헤더 LinkButton을 다시 클릭하면 데이터가 내림차순으로 다시 정렬됩니다.

참고

형식화된 데이터 세트가 아닌 사용자 지정 데이터 액세스 계층을 사용하는 경우 GridView의 스마트 태그에 정렬 사용 옵션이 없을 수 있습니다. 기본적으로 정렬을 지원하는 데이터 원본에 바인딩된 GridView만 이 확인란을 사용할 수 있습니다. Typed DataSet은 ADO.NET DataTable이 호출될 때 지정된 조건을 사용하여 DataTable의 DataRows를 정렬하는 메서드를 제공 Sort 하므로 기본 정렬 지원을 제공합니다.

DAL이 정렬을 기본적으로 지원하는 개체를 반환하지 않는 경우 정렬 정보를 비즈니스 논리 계층에 전달하도록 ObjectDataSource를 구성해야 합니다. 이 경우 데이터를 정렬하거나 DAL을 기준으로 데이터를 정렬할 수 있습니다. 향후 자습서에서는 비즈니스 논리 및 데이터 액세스 계층에서 데이터를 정렬하는 방법을 살펴봅니다.

정렬 LinkButton은 HTML 하이퍼링크로 렌더링되며, 현재 색(보기 없는 링크의 경우 파란색, 방문한 링크의 경우 진한 빨간색)이 머리글 행의 배경색과 충돌합니다. 대신 방문 여부에 관계없이 모든 머리글 행 링크가 흰색으로 표시되도록 합니다. 클래스에 다음 Styles.css 을 추가하여 이 작업을 수행할 수 있습니다.

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

이 구문은 HeaderStyle 클래스를 사용하는 요소 내에서 해당 하이퍼링크를 표시할 때 흰색 텍스트를 사용한다는 것을 나타냅니다.

이 CSS 추가 후 브라우저를 통해 페이지를 방문할 때 화면은 그림 12와 유사해야 합니다. 특히 그림 12는 가격 필드의 머리글 링크를 클릭한 후의 결과를 보여줍니다.

가격 열을 기준으로 오름차순으로 정렬된 결과를 보여 주는 간단한 페이징 & 정렬 창의 스크린샷

그림 12: 결과가 UnitPrice를 기준으로 오름차순으로 정렬되었습니다(전체 크기 이미지를 보려면 클릭).

정렬 워크플로 검사

BoundField, CheckBoxField, TemplateField 등의 모든 GridView 필드에는 SortExpression 해당 필드의 정렬 헤더 링크를 클릭할 때 데이터를 정렬하는 데 사용해야 하는 식을 나타내는 속성이 있습니다. GridView에는 속성도 있습니다 SortExpression . 정렬 헤더 LinkButton을 클릭하면 GridView에서 해당 필드의 SortExpression 값을 해당 SortExpression 속성에 할당합니다. 그런 다음 ObjectDataSource에서 데이터를 다시 검색하고 GridView의 SortExpression 속성에 따라 정렬합니다. 다음 목록에서는 최종 사용자가 GridView에서 데이터를 정렬할 때 발생하는 단계의 시퀀스를 자세히 설명합니다.

  1. GridView의 정렬 이벤트가 발생합니다 .
  2. GridView의 SortExpression 속성 은 정렬 헤더 LinkButton을 클릭한 필드의 로 설정 SortExpression 됩니다.
  3. ObjectDataSource는 BLL에서 모든 데이터를 다시 검색한 다음 GridView를 사용하여 데이터를 정렬합니다. SortExpression
  4. GridView의 PageIndex 속성은 0으로 다시 설정됩니다. 즉, 정렬할 때 사용자가 데이터의 첫 번째 페이지로 반환됩니다(페이징 지원이 구현되었다고 가정).
  5. GridView의Sorted 이벤트가 발생합니다.

기본 페이징과 마찬가지로 기본 정렬 옵션은 BLL에서 모든 레코드를 다시 검색합니다. 페이징 없이 정렬을 사용하거나 기본 페이징으로 정렬을 사용하는 경우 이 성능 저하를 피할 수 있는 방법이 없습니다(데이터베이스 데이터 캐싱 부족). 그러나 이후 자습서에서 볼 수 있듯이 사용자 지정 페이징을 사용할 때 데이터를 효율적으로 정렬할 수 있습니다.

GridView 스마트 태그의 드롭다운 목록을 통해 ObjectDataSource를 GridView에 바인딩하는 경우 각 GridView 필드에는 자동으로 해당 속성이 SortExpression 클래스의 데이터 필드 이름에 ProductsRow 할당됩니다. 예를 들어 ProductName BoundField s SortExpression 는 다음 선언적 태그와 같이 로 설정 ProductName됩니다.

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

해당 속성을 지우고 빈 문자열에 할당하여 SortExpression 정렬할 수 없도록 필드를 구성할 수 있습니다. 이를 설명하기 위해 고객이 제품을 가격별로 정렬하도록 하고 싶지 않다고 상상해 보십시오. BoundField의 SortExpression 속성은 UnitPrice 선언적 태그 또는 필드 대화 상자를 통해 제거할 수 있습니다(GridView의 스마트 태그에서 열 편집 링크를 클릭하여 액세스할 수 있음).

가격 및 SortExpression이 강조 표시된 필드 창의 스크린샷

그림 13: 결과가 UnitPrice를 기준으로 오름차순으로 정렬되었습니다.

BoundField에 SortExpression 대한 UnitPrice 속성이 제거되면 헤더가 링크가 아닌 텍스트로 렌더링되므로 사용자가 가격별로 데이터를 정렬할 수 없습니다.

SortExpression 속성을 제거하면 사용자는 더 이상 가격을 기준으로 제품을 정렬할 수 없습니다.

그림 14: SortExpression 속성을 제거하면 사용자는 더 이상 가격을 기준으로 제품을 정렬할 수 없습니다(전체 크기 이미지를 보려면 클릭).

프로그래밍 방식으로 GridView 정렬

GridView의 메서드를 사용하여 프로그래밍 방식으로 GridView의 Sort내용을 정렬할 수도 있습니다. (Ascending 또는 Descending)와 함께 SortDirection 정렬할 값을 전달 SortExpression 하기만 하면 GridView의 데이터가 다시 정렬됩니다.

을 기준으로 정렬을 해제한 UnitPrice 이유는 고객이 단순히 최저가 제품만 구매할 까봐 걱정했기 때문이라고 상상해 보십시오. 그러나, 우리는 그들이 가장 비싼 제품을 구입하도록 격려하고 싶습니다, 그래서 우리는 그들이 가격에 따라 제품을 정렬 할 수 있기를 바랍니다, 하지만 가장 비싼 가격에서 적어도.

이렇게 하려면 단추 웹 컨트롤을 페이지에 추가하려면 해당 ID 속성을 SortPriceDescending로 설정하고 해당 Text 속성을 가격별 정렬로 설정합니다. 다음으로, Designer Button 컨트롤을 두 번 클릭하여 Button Click 이벤트에 대한 이벤트 처리기를 만듭니다. 이 이벤트 처리기에 다음 코드를 추가합니다.

protected void SortPriceDescending_Click(object sender, EventArgs e)
{
    // Sort by UnitPrice in descending order
    Products.Sort("UnitPrice", SortDirection.Descending);
}

이 단추를 클릭하면 가장 비싼 것부터 가장 저렴한 제품까지 가격별로 정렬된 제품이 있는 첫 번째 페이지로 사용자를 반환합니다(그림 15 참조).

단추를 클릭하면 가장 비싼 제품에서 최소로 제품을 주문합니다.

그림 15: 단추를 클릭하면 가장 비싼 제품에서 최소로 제품을 주문합니다(전체 크기 이미지를 보려면 클릭).

요약

이 자습서에서는 기본 페이징 및 정렬 기능을 구현하는 방법을 알아보았습니다. 이 두 기능 모두 확인란을 확인하는 것만큼 쉬웠습니다. 사용자가 데이터를 정렬하거나 페이지를 정렬하면 유사한 워크플로가 전개됩니다.

  1. 포스트백이 계속됩니다.
  2. 데이터 웹 컨트롤의 사전 수준 이벤트가 발생합니다(PageIndexChanging 또는 Sorting).
  3. 모든 데이터는 ObjectDataSource에 의해 다시 검색됩니다.
  4. 데이터 웹 컨트롤의 사후 수준 이벤트가 발생합니다(PageIndexChanged 또는 Sorted).

기본 페이징 및 정렬을 구현하는 것은 산들바람이지만 보다 효율적인 사용자 지정 페이징을 활용하거나 페이징 또는 정렬 인터페이스를 더욱 향상시키기 위해 더 많은 노력을 기울여야 합니다. 향후 자습서에서는 이러한 topics 살펴봅니다.

행복한 프로그래밍!

저자 정보

7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술로 작업해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 티치 유어셀프 ASP.NET 24시간 만에 2.0입니다. 그는 에서mitchell@4GuysFromRolla.com 또는 에서 찾을 http://ScottOnWriting.NET수있는 자신의 블로그를 통해 도달 할 수 있습니다.

다음