Taeyo's ASP.NET

lecture Home > ASP.NET > Taeyo's ASP.NET

Taeyo's ASP.NET

강좌 최초 작성일 : 2003년 08월 05일
강좌 최종 수정일 : 2003년 08월 14일

강좌 읽음 수 : 24065 회

작성자 : Taeyo(김 태영)
편집자 : Taeyo(김 태영)

강좌 제목 : 공개!! PagingHelper 컨트롤

강좌 전 태오의 잡담>

타이틀이 왠지 조금은 깝치는 듯한 문구인지라.. 거부감이 드신다는 분들이 많습니다. 조금이라도 튀어볼라고 그런 것이니... 이해해 주세염~~~ 이번 강좌에서 소개드릴 컨트롤은 사실 년초에 나름대로의 목적으로 만들었던 컨트롤인데요.. 사정이 있어서, 이제서야 공개하게 되었네요. 그 사이에 기능도 조금 보강해서.. Design Time 지원 기능까지 넣어보았습니다. 지나고 나니, 컨트롤을 만들기 위해서 무척이나 힘들었던 기억이 나네요... ㅠ_ㅠ (다시 만들라면 과연 만들 수 있을까??? -_-;)

많이 사랑해 주세여~~~

대상 : Repeater, DataList, DataGrid 컨트롤등을 다룰 수 있으며, 이미 페이징을 하실 줄 아는 분

자.. 이제 드디어 여러분이 그토록 기다리시던 태오의 스페셜 컨트롤... PagingHelper ASP.NET Control을 여러분에게 아낌없이 드리도록 하겠습니다. 그게 뭐냐구요??? -_-++++ 그게... 그건....

ASP.NET에서 페이징이 필요한 대부분의 경우, 크나큰 도움을 주는 멋진 컨트롤입니다!!!!!

이 컨트롤을 이용하신다면, 여러분은 Repeater, DataList 컨트롤과 같이 페이징 기능이 (기본적으로) 지원되지 않는 컨트롤들에 아주 쉽게 페이징 기능을 넣을 수가 있게 됩니다. ^^

물론, DataGrid 컨트롤의 경우는 페이징이 기본적으로 제공되기는 하지만, 그 제공되는 페이징 구역(페이저 바:Pager Bar 라고 부름)이 그다지 커스터마이징을 하기 쉽지 않다는 단점이 있죠. 하지만, Taeyo의 PagingHelper 컨트롤을 사용하시면 그 부분도 여러분 마음대로 변경이 가능합니다. ^^ (그렇습니다. 분위기를 탄 태오.. 오버하기 시작하면서, 뻥도 슬슬 섞어 넣고 있습니다 -_-;;;)

이 컨트롤의 사용방법은 DataGrid 에서의 페이징을 사용했던 방식과 거의 유사합니다. DataGrid에서는 DataGrid 컨트롤의 페이징 관련 속성들에 관련 정보를 지정했었죠? PagingHelper 컨트롤을 사용할 경우는 그러한 지정을 PagingHelper 컨트롤에게 해 주시기만 하면 됩니다. 해서, 사용방법은 사실 정말로 매우 간단합니다. ^^(DataGrid가 제공하는 페이징 기능 사용방법과 거의 동일하다고 보면 됩니다)

사실, 여러분이 알아주었으면 하는 것은 아니지만... 이 컨트롤을 만드는 것이 생각보다 좀 어렵기는 했습니다요... 멋지게 디자인 타임의 기능까지 지원을 하도록 하려다보니.... ㅠ_ㅠ 말입니다. 사실, 가장 많은 시간이 든 부분이 바로 Design Time을 지원하게 하는 부분이었어요... 원서를 아무리 뒤져도... 원하는 정보를 찾기는 쉽지가 않더군요...

"참~~ 말 많네... 너 잘난 거 아니깐, 어서 컨트롤이 어떤 건지나 설명해줘.. 누가 니 자랑 듣고 싶대????"

그렇습니다. 그 말이 왜 안나오나 하고 있었습니다. (ㅠ_ㅠ) 아주 시기적절한 타이밍에 강타는 날리시는구만요. 날리는 김에 강타뿐만 아니라 무늬쭌도 좀... 부탁하고 싶지만서두... 헉... (내 개그가 어렵나..?)

알겠습니다. 그렇다면, 이제 시작해 보도록 하겠습니다. 참!! 마지막으로 시작하기 전에 한가지 더 말씀 드릴 부분은요(진짜 마지막입니다 -_-;). 이 컨트롤은 제가 티를 좀 내보려는 유치한 목적으로 인해(왜 그랬을까.. ㅠ_ㅠ), 디자인 타임시에는 제 사이트의 URL이 컨트롤에 나타나도록 만들어 두었다는 것입니다. ^^ 물론, 실행 시에는 그 부분이 화면에 나오지 않으니 너무 걱정하지는 마세요.. 제 사이트의 URL을 보시게 되는 분들은 오직 개발자분들이 될테니까요.. ^^... 혹시나 하는 마음에 추가해 둔 것이거든요. 그러니, 그 정도의 표냄(!)은 너그러이 이해해 주시기 바랍니다.

그럼 시작해 보겠습니다.

DataList 에 PagingHelper 컨트롤을 적용한 페이징

이 예제를 위해서는 여러분이 이미 DataGrid를 가지고 페이징을 해보신 경험이 있으셔야 합니다. 그것도 일반 페이징이 아닌 Custom Paging를 해본 적이 있으셔야 하지요.(이에 대한 이야기는 태오의 ASP.NET 책에 더 이상 자세할 수 없을 정도로 잘 나와있지요... 커스떰 페이징~ 퍽퍽퍽!@$@@%#^@$ !) 만일, 사용자 정의 페이징에 대한 기반 지식이 없으면 이 컨트롤은 사용은 아직 이르다고 할 수 있습니다. ^^ (죄송합니다)

"말도 안돼... 그런 제약이 있다면, 이게 무슨 훌륭한 컨트롤이야~~" 라고 하시지는 않을 것이라 믿겠습니다. 페이징을 필요로 할 정도의 실력이 되신 분들은 TOP 로직을 사용하는 사용자 정의 페이징 방법을 알고 계실 것이라 믿으니까요 ^^

이미 여러분은 다음과 같은 페이징 쿼리가 낯이 익을 것이라 생각해 봅니다.

SELECT TOP @PageSize * FROM titles
WHERE title_id NOT IN
(SELECT TOP (@iPage * @PageSize) title_id FROM titles
ORDER BY title_id ASC)
ORDER BY title_id ASC

쿼리 안에 변수가 들어있어서 좀 기억이 날듯 안 날듯 하나요? 그럼 다음 쿼리를 보세요

SELECT TOP 10 * FROM titles
WHERE title_id NOT IN
(SELECT TOP 0 title_id FROM titles
ORDER BY title_id ASC)
ORDER BY title_id ASC

그렇습니다. 이 쿼리는 1 페이지에 해당하는 레코드 10개를 가져오는 쿼리입니다. 이미 이 쿼리에 대해서는 제가 '게시판 2002' 강좌에서 구체적으로 설명을 드린 적이 있습니다. 기억이 나지 않으시는 분은 다음 강좌를 한번 읽어보도록 하세요

http://www.taeyo.net/lecture/9_Board2001/Board2001_04.htm

자. 그럼 먼저 PagingHelper Control을 사용하지 않은 상태로 DataList 를 이용한 페이징 기능을 대략적으로 한번 만들어 보도록 하겠습니다. 이를 위해서는 제가 얼마전에 강좌로 올린 DataList 관련 첫 번째 강좌에서 작성해 보았던 예제를 그대로 이용해 보도록 하겠습니다. 그 강좌를 본 적이 없다구요???? -_-+ 음... 그렇다면, 그것도 먼저 봐 주시도록 하세염..

http://www.taeyo.net/Lecture/NET/DataList1.asp

강좌의 예제 중 가로로 2개의 책 정보가 나오도록 RepeatColumns 속성을 2로 지정된 예제 있죠? 그 예제에 페이징 기능을 덧붙여 보도록 하겠습니다. 일단, 먼저, 여러분의 웹 폼에 DataList를 하나 올리시구요. 다음과 같이 HTML을 만들어서(만들기 귀찮으신 분들은 DataListEx1.aspx 라는 파일을 이용하셔도 됩니다. 하지만 가급적 새로 만들어 보세요) 구성하시면 됩니다. DataList 강좌에서 만들었던 예제와 모든 것이 동일하지만, 이번 예제에서는 단지 <FooterTemplate> 구역은 제거해 보았습니다. 해서, 구성된 디자인은 다음과 같구요.(이 그림은 약간의 스타일들을 적용한 디자인입니다)

이 강좌를 보실 정도의 실력이시라면, 이미 DataList를 사용하여 데이터 바인등을 하는 정도의 수준은 쉬울 것이라 생각하지만, 그래도 소스는 보여드려야 할 것 같네요. ^^ 다음은 위 디자인에 따르는 HTML 입니다.(아참. 제가 지금 구성하고 있는 웹 폼의 이름은 UsingPagingHelper.aspx이랍니다. 참고하세요)

<%@ Page language="c#" Codebehind="UsingPagingHelper.aspx.cs" AutoEventWireup="false" Inherits="TaeyoAspNet.UsingPagingHelper" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>DataListEx1</title>
        <META http-equiv="Content-Type" content="text/html; charset=euc-kr">
        <LINK href="../css/main.css" type="text/css" rel="stylesheet">
    </HEAD>
    <body>
        <form id="UsingPagingHelper" method="post" runat="server">
        <P>
            <asp:DataList CssClass="grid" id="DataList1" runat="server" GridLines="Both"
                    Width="600" RepeatColumns="2" RepeatDirection="Vertical">
                <HeaderTemplate>
                       <B>DataList Paging</B>
                </HeaderTemplate>
                <HeaderStyle Height="30" BackColor="#e8e8e8" Font-Size="11px">
                </HeaderStyle>
                <ItemTemplate>
                    <IMG hspace=10 src='http://localhost/quickstart/ASPPlus/images/Title-
                        <%# DataBinder.Eval(Container.DataItem, "title_id") %>.gif' align=left>
                    제목 : <B>
                        <%# DataBinder.Eval(Container.DataItem, "title") %>
                    </B>
                    <BR>
                    가격 :
                    <%# DataBinder.Eval(Container.DataItem, "price", "$ {0}") %>
                    <BR>
                    <%# DataBinder.Eval(Container.DataItem, "notes") %>
                </ItemTemplate>
                <ItemStyle Width="300" Font-Size="11px"></ItemStyle>
            </asp:DataList>
        </P>
        </form>
    </body>
</HTML>

자. 이제 코드 비하인드 페이지를 작성해 보도록 하지요... 일단 간단하게 다음과 같이 작성하시면 1페이지에 해당하는 6개의 레코드가 나올 것입니다. ^^

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace AspNetTest.Paging
{
    /// <summary>
    /// UsingPagingHelper에 대한 요약 설명입니다.
    /// </summary>
    public class UsingPagingHelper : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DataList DataList1;
        private int iPage = 0;
        private int PAGESIZE= 6;

        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!IsPostBack)
            {
                BindDataList();
            }
        }

        private void BindDataList()
        {
            string connectStr = "Server=(local); database=Pubs; user id=sa; password=XXX";

            SqlConnection Con = new SqlConnection(connectStr);

            string strSql;
            strSql = " SELECT TOP " + PAGESIZE + " * FROM titles " +
                        " WHERE title_id NOT IN " +
                               " (SELECT TOP " + (iPage * PAGESIZE) + " title_id FROM titles
                                   ORDER BY title_id ASC) " +
                        " ORDER BY title_id ASC";

            SqlDataAdapter Adap = new SqlDataAdapter(strSql, Con);

            DataSet ds = new DataSet();

            Adap.Fill(ds, "titles");

            DataList1.DataSource = ds.Tables["titles"];
            DataList1.DataBind();
        }
    }
        Web Form Designer generated code

}

이 소스에서 중요한 부분은 특별하게 작성된 쿼리(페이징용 쿼리)에 의해 개발자가 지정한 페이지에 헤딩하는, 아니 해당하는 레코드들만이 가져와진다는 것입니다. ^^ 소스에서는 가져올 레코드의 개수를 6개로 지정하고 있기에, 이 쿼리는 1 페이지(iPage= 0)인경우 첫 번째 페이지에 해당하는 오직 6개의 레코드를 가져오고, 2 페이지(iPage=1)인 경우에는 두 번째 페이지에 해당하는 6개의 레코드만을 가져오게 되지요. 고로, 메모리의 낭비가 전혀 없다는 점에서 이러한 페이징 쿼리는 상당히 바람직하다고 볼 수 있습니다.

소스 중에서 iPage 변수의 값을 바꿔가면서 페이지를 실행, 테스트를 해보세요. 각각의 페이지에 맞게 데이터가 출력되어 나오는 것을 보실 수 있을 것입니다. 다음처럼 말이죠 ^^

여기까지의 결과를 보셨다면, 이제 PagingHelper 컨트롤을 탑재해서, 페이징을 간단하고도 멋지게 끝낼 준비가 된 것 같네요 ^^

그렇다면, 다음 순서대로 한번 같이 진행해 BOA요 ^^

PagingHelper Control을 VS.NET에 탑재하기!!

1. PagingHelper.zip 파일을 다운로드 받고, 압축을 풀어 TaeyoNetLib.dll 이라는 파일을 하드 드라이브 상의 적절한 위치에 복사해 두도록 합니다. (참고로, 태오는 C:\NetComponent 란 디렉터리에 두었어요. 글고, PagingHelper.zip 파일은 요 강좌 제일 밑에서 다운로드 가능합니다 ^^)

2. VS.NET에서 왼쪽의 [도구상자]를 선택한 뒤, 그 중 [Web Form] 구역에 마우스 우측클릭을 합니다. 그러면, 다음 그림과 같이 팝업 메뉴가 뜨는데, 그 중 [도구 상자 사용자 지정]을 선택하도록 합니다.

3. 그러면, [도구 상자 사용자 지정] 윈도우가 뜰텐데, 거기서 [.NET Framework 구성요소]를 선택한 다음, [찾아보기] 버튼을 선택하도록 하세요. 우리가 추가할 컨트롤은 다운로드 받은 DLL 파일에 들어있으니 말입니다.

4. 이제 TaeyoNetLib.dll 파일을 놓아둔 폴더를 찾아가서 그 DLL을 선택하도록 합니다.

5. 그러면, 다음 그림과 같이 [도구 상자 사용자 지정] 윈도우에 PagingHelper 컨트롤이 들어오는 것을 볼 수 있을 거여요~~~

6. 앗싸!!! 이제 VS.NET의 [도구 상자]를 살펴보세요. 뭔가 멋드러지는 아이콘의 새로운 컨트롤이 하나 추가되어져 있는 것을 확인할 수 있죠???!!!!

7. 이제 PagingHelper 컨트롤은 여러분의 VS.NET에서 자유로이 사용할 수 있게 된 것이옵니다.

PagingHelper Control 사용하기

그렇다면, 이제 이 컨트롤은 현재의 웹 폼에 올리고, 사용해 보도록 해요. 먼저 페이징 헬퍼 컨트롤을 올릴 공간을 확보하도록 합시당. 그래야 출력을 좀 이쁘게 구성할 수 있을테니 말입니다. 태오는 다음과 같이 파란색의 Tabel 코드를 추가하여 컨트롤을 올려놓을 공간을 확보해 보았어요.

그러면, 디자인 모드에서 볼 경우, 그 테이블이 테두리를 가지고 나타나 보일 것입니다. 이제 [도구 상자]에서 PagingHelper 컨트롤을 선택하고, 드래그 앤 드롭하여 그 테이블 위에 떨어뜨려 보도록 하세요. 다른 컨트롤들에 대해 그랬던 것처럼 말이죠~~~

그러면, 다음과 같이 일반적인 페이징 구역의 모습이 형성될 것입니다.

그리고, HTML 모드를 보면 자동으로 추가된 컨트롤 관련 태그는 다음과 같은 모습을 띄고 있을 겁니다

말씀드렸다시피, 디자인 모드에서는 컨트롤에 태오 사이트의 URL이 뻑!하니 찍혀나오고 있습니다. 부디 이해하십쇼. 강조드리지만, 런타임에는 나오지 않습니다. ^^

이제 준비는 끝났습니다. 이제는 코드 비하인드 페이지에 약간의 코드만을 추가해주시면 됩니다. 다음에서 보여지는 코드 중 푸른색의 코드는 PagingHelper 컨트롤을 사용할 경우, 추가해 주어야 하는 코드이므로 기억해 두시거나, 카피해 두세요 ^^

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace AspNetTest.Paging
{
    /// <summary>
    /// UsingPagingHelper에 대한 요약 설명입니다.
    /// </summary>
    public class UsingPagingHelper : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DataList DataList1;
        private int iPage = 0;
        private int PAGESIZE= 6;

    private void Page_Load(object sender, System.EventArgs e)
    {
        if(!IsPostBack)
        {
            PagingHelper1.PageSize = PAGESIZE;
            PagingHelper1.VirtualItemCount = GetItemCount();
            BindDataList();
        }
    }

    //전체 레코드 수를 리턴하는 함수
    private int GetItemCount()
    {
        string connectStr = "Server=(local); database= Pubs;userid=sa;password=XXX";
        SqlConnection Con = new SqlConnection(connectStr);
        SqlCommand Cmd = new SqlCommand("Select count(*) from titles", Con);
        Con.Open();
        int count = (int)Cmd.ExecuteScalar();
        Con.Close();
        Cmd = null;
        Con = null;

        return count;
    }

        private void BindDataList()
        {
            string connectStr = "Server=(local); database=Pubs; user id=sa; password=XXX";

            SqlConnection Con = new SqlConnection(connectStr);

            string strSql;
            strSql = " SELECT TOP " + PAGESIZE + " * FROM titles " +
                        " WHERE title_id NOT IN " +
                               " (SELECT TOP " + (iPage * PAGESIZE) + " title_id FROM titles
                                   ORDER BY title_id ASC) " +
                        " ORDER BY title_id ASC";

            SqlDataAdapter Adap = new SqlDataAdapter(strSql, Con);

            DataSet ds = new DataSet();

            Adap.Fill(ds, "titles");

            DataList1.DataSource = ds.Tables["titles"];
            DataList1.DataBind();
        }
    }
        Web Form Designer generated code

}

코드에서 추가된 부분은 PageSize 크기와 현재 페이징하려는 데이터의 총 레코드수를 PagingHelper 컨트롤에게 알려주는 것입니다. DataGrid에서의 페이징을 해 보신 분이라면 이러한 설정이 DataGrid의 경우와 완전하게 동일한 것을 눈치채셨을 겁니다. 그렇습니다. 단, DataGrid와 다른 점이 있다면, 여기서는 그러한 설정을 PagingHelper 컨트롤에게 해 준다는 것 정도이지요. ^^

이제 페이지를 실행하고 결과를 확인해 보도록 하세요 ^^ 그러면 다음과 같이 제대로 페이지 구역이 나타나는 것을 볼 수 있을 것입니다.

GOOD 이지 않습니까????

하지만, 현재의 상태로는 2, 3 페이지를 클릭해도 아무런 반응이 없을 것입니다. 그도 그럴 것이, 페이지가 변경될 경우의 이벤트 처리를 아직 해주지 않았기 때문이지요. DataGrid에서도 마찬가지였습니다. DataGrid의 경우도 페이지 변경시 동작하는 이벤트인 PageIndexChanged 이벤트를 작성해 주어야 했듯이, 여기서도 마찬가지 입니다. 이벤트 이름도 동일하게 PageIndexChanged를 해주시면 됩니다. 호환성을 위해서 일부러 이름을 같게 만들어 두었거든요 ^^

자... 그렇다면, 이제 그러한 이벤트 처리기를 한번 달아볼까요? 이것만 해주면, 페이징은 완결되는 것입니다.

이벤트 처리를 위해 웹 폼 디자인 모드로 가보도록 하세요. 폼에서 PagingHelper 컨트롤을 선택한 다음, [속성 창]을 보시면, PagingHelper 컨트롤이 제공하는 수많은 속성들이 있음을 보실 수 있을 것입니다. 이 속성들의 역할에 대해서는 잠시 후에 구체적으로 이야기하기로 하구요 ^^. 지금은 이벤트를 보도록 하죠. 다음 그림과 같이 [속성 창]에서 번개 모양의 버튼을 클릭하도록 하세요

그리면, 이벤트 목록이 나타날텐데요. 이 중에 OnPageIndexChanged 이벤트를 찾아서, 그 옆쪽의 구역을 더블 클릭하시면 자동으로 코드 비하인드에 PagingHelper1_OnPageIndexChanged 이벤트 처리기가 생성될 것입니다.

이렇게 말이죠 ^^

private void PagingHelper1_OnPageIndexChanged(object sender, TaeyoNetLib.PagingEventArgs e)
{

}

이제 이 구역안에 다음과 같은 코드를 넣기만 하면 모든게 끝나는 것입니다. ^^. 이 코드는 DataGrid에서 페이징을 할 경우에 DataGrid의 OnPageIndexChanged 이벤트에 작성하는 코드와 거의 동일하십니다....

private void PagingHelper1_OnPageIndexChanged(object sender, TaeyoNetLib.PagingEventArgs e)
{
iPage = e.PageIndex;
BindDataList();
}

그렇죠?

이제 페이지를 다시 컴파일하고 실행해 보도록 하세요. 이제는 멋지게 페이징이 동작하는 것을 보실 수 있을 것입니다.

결과 화면에서... 페이징 구역에 나타나는 <<와 >>는 각각 이전 10페이지, 다음 10페이지를 의미하는 것이랍니다. ^^ 여러분은 PagingHelper 컨트롤의 PrevBlockText와 NextBlockText 속성 값을 바꾸어서, 이러한 표현 대신 원하는 텍스트를 사용할 수도 있습니다. 물론, 텍스트가 아닌 이미지를 사용할 수도 있어요. 이미지를 사용하고 싶으신 경우에는 이를 위해 제공되는 속성인 Prev10ImageUrlA와 Next10ImageUrlA 속성에 이미지의 경로를 지정하시면 됩니다. 더불어, Prev10ImageUrlB와 Next10ImageUrlB도 있는데요. 이것은 각각의 링크가 존재하지 않는 경우, 즉 링크가 걸리지 않는 경우 나타나게 될 이미지를 지정하는 속성입니다.

예를 들면, 현재 페이지가 1번째 페이지라면 이전 10페이지는 존재하지 않겠죠? 그 경우에는, 자동으로 Prev10ImageUrlB 속성에 지정된 이미지가 나타나게 되는 것이구요. 현재 페이지가 11페이지인 경우는 이전 10페이지가 존재할 것이기에, 링크가 걸린 Prev10ImageUrlA 이미지가 나타나게 되는 것이지요. 물론, Prev10ImageUrlA의 경우도 마찬가지로 동작하구요 ^^. 쉽죠???

추가로, 이전/다음 페이지를 위해서도 텍스트 대신 이미지를 사용할 수 있는데요. 그를 위해서는 PrevImageUrlA, PrevImageUrlB, NextImageUrlA, NextImageUrlB를 사용할 수 있답니다. 그럼, 이번에는 그것들을 적용한 결과를 한번 보여드릴께요..

하하... 맘에 드시나요?? ^^

언니, 오빠에게 드리는 뽀~~~~우너스로 제 사이트에서 사용하는 이미지도 드릴께요 ^^

속성 이미지

PrevImageUrlA

PrevImageUrlB

NextImageUrlA

NextImageUrlB

Prev10ImageUrlA

Prev10ImageUrlB

Next10ImageUrlA

Next10ImageUrlB

한번에 다 줘~~

OK!!! 여기까지!! 좋습니다...

데이터 그리드에서도 사용하는 방법은 동일합니다. Reapeter 컨트롤에서도 마찬가지로 사용가능하구요 ^^

다음은 PagingHelper 컨트롤의 속성 정보와 이벤트 정보입니다. ^^

TaeyoNetLib.PagingHelper 클래스 : 페이징 기능을 돕는 페이징 도우미 컨트롤
액세스: Public
기본 클래스: WebControl
구현된 인터페이스: INamingContainer

속성 타입 설명

NextImageUrlA string 다음 페이지를 위한 활성 이미지의 상대 경로

NextImageUrlB string 다음 페이지를 위한 비활성 이미지의 상대 경로

Next10ImageUrlA string 다음 블럭 페이지를 위한 활성 이미지의 상대 경로

Next10ImageUrlB string 다음 블럭 페이지를 위한 비활성 이미지의 상대 경로

PrevImageUrlA string 이전 페이지를 위한 활성 이미지의 상대 경로

PrevImageUrlB string 이전 페이지를 위한 비활성 이미지의 상대 경로

Prev10ImageUrlA string 이전 블럭 페이지를 위한 활성 이미지의 상대 경로

Prev10ImageUrlB string 이전 블럭 페이지를 위한 비활성 이미지의 상대 경로

PageSize int 한 페이지에서 보여질 항목의 개수. 기본값 : 10

VirtualItemCount int 데이터 소스의 전체 레코드 수

NextText string 다음 페이지를 위한 텍스트. 기본값 : >
(이미지들이 지정될 경우에는, 이미지가 우선한다)

PrevText string 이전 페이지를 위한 텍스트. 기본값 : <
(이미지들이 지정될 경우에는, 이미지가 우선한다)

NextBlockText string 다음 블럭 페이지를 위한 텍스트. 기본값 : >>
(이미지들이 지정될 경우에는, 이미지가 우선한다)

PrevBlockText string 이전 블럭 페이지를 위한 텍스트. 기본값 : <<
(이미지들이 지정될 경우에는, 이미지가 우선한다)

CurrnetNumberColor Color¹⁾ 현재 선택된 페이지의 색상 지정. 기본값 : Silver

이벤트 타입 설명

PageIndexChanged void 페이지가 변경될 때마다 발생하는 이벤트

1) Color는 System.Drawing.Color 클래스 개체이다

TaeyoNetLib.PagingEventArgs 클래스 : PagingHelper에서 사용하는 이벤트 개체
액세스: Public
기본 클래스: EventArgs

속성 타입 설명

PageIndex int 사용자가 클릭한 페이지의 인덱스 값

에... 또

지금까지 말이 너무 길어서 어찌보면, 컨트롤의 사용법이 복잡하게 느껴지실 수도 있을 것 같네요.. 해서, 사용방법을 다시 한번 정리해 보자면... 그리드 관련 컨트롤들에서 페이징을 하시려면 다음과 같은 순서로 하시면 됩니다.

1. PagingHelper 컨트롤을 웹 폼에 올려놓는다.
2. 웹 폼 페이지의 쿼리를 페이징이 가능한 쿼리로 변경한다.
3. PagingHelper 컨트롤의 PageSize 속성과 VirtualItemCount 속성을 지정한다.
4. PagingHelper 컨트롤의 PageIndexChanged 이벤트 처리기를 작성한다.

이것이 전부인 것입니다. ^^

이 컨트롤의 단점이라면.... 오직 페이징이 10 페이지 단위로만 된다는 것이구요 ^^. 하나의 웹 폼에 2개 이상의 그리드 컨트롤을 올려놓을 경우(그런 경우는 드물겠지만) 따로 따로 동작하지는 않는다는 점입니다. 이 컨트롤은 웹 폼 하나당 하나만이 동작하게끔 되어져 있거든요... ^^. 해서, 만일 2개의 그리드를 하나의 웹 폼에서 사용하면서 PagingHelper 컨트롤을 사용하면, 페이지가 동시에 바뀌는 일이 생길 수도 있습니다.

그러한 부분은 많은 분들의 요구가 있으면 천천히 변경해 보려해요... 여기서 멈출수는 없지 않겠습니까???

그리고, 마지막으로 제가 PagingHelper에 사용하는 스타일시트는 다음과 같답니다. ^^

    A            { font-family:verdana; font-size:11px ;text-decoration: none; color:black}
    A:hover    { font-family:verdana; font-size:11px; text-decoration: none; color:blue}
    A:visited    { font-family:verdana; font-size:11px; text-decoration: none; color:black}

    .PagingHelper
    {
        font-family : Verdana, 돋움;
        font-size : 11px;
        color : blue;
    }

주욱 글을 읽어본 결과, "선심을 쓰는 마음으로 한번 사용해 봐 주마...." 하시는 분들은 다음 이미지를 클릭하셔서 다운로드를 받도록 하세요

저는 며칠 뒤에 다시 계층형 게시판 강좌를 준비해서 돌아오도록 하겠습니다. 좋은 하루 되세요

강좌 목록으로..