• 사용자 컨트롤 사용하기
• 페이지 추가
• 소스 입력
• List.aspx 에 사용자 컨트롤 추가/테스트

글 목록 부분에, 일단은 간단하게 이전/다음 페이지로 이동하도록만 했었습니다. 그런데 게시판에선 일반적으로, 페이지번호로 직접 이동하도록 하는 링크도 제공합니다.

그림은 목록 페이지(List.aspx)에, 이번 강좌에서 구현할 페이지 링크를 추가한 모습입니다. 화살표 부분입니다.
그림 처럼, 게시판에선 일반적으로 이전페이지/다음페이지 가는 버튼과 함께 해당 페이지 부근 페이지(?) 로 직접 가도록 하는 페이지 링크도 제공합니다. 이번 강좌에서 그 페이지 링크를 구현하려 합니다. 그림에서 보듯, 첫페이지로 이동하는 링크( [<<] ), 이전페이지 ( [<] ), 각 페이지로 이동하는 링크( [1][2][3][4]... ), 다음페이지 ( [>] ), 끝페이지( [>>] ) 등의 링크로 구성되어있습니다.

그런데 이러한 페이지링크는 게시판에서도 쓰이지만, 방명록, 자료실등 다른 어플리케이션에서도 쓰이게 됩니다. 그리고 여러 게시판을 각각 다른 소스로 작동시켜도 그렇고요. 거의 비슷한 로직일 텐데, 각 어플리케이션 별로 작성하게 된다면 낭비일듯 싶습니다.

그래서, 그 페이지 링크 부분을 사용자 컨트롤이란 것으로 정의해서, 이 게시판 뿐 아니라 다른 어플리케이션에서도 재 사용 할 수 있도록 하려 합니다. 소스 자체보다는 여러 app 에서 쓰일수 있는 부분을 사용자 컨트롤로 정의하고 사용하자는 것이 이번 강좌의 주제랄 수 있습니다.

솔루션 탐색기에서, 해당 프로젝트를 오른쪽 클릭, 메뉴에서 추가 -> 새 폴더를 선택해서 폴더를 만듭니다. 폴더의 이름은 UserControl 로 줍니다. 그리고 그 폴더에서 오른쪽클릭, 추가-> 웹 사용자 정의 컨트롤 추가 를 선택하고 이름란에 PageNavigator.ascx 라고 입력해서 추가합니다.

웹 폼 페이지 추가했을때 처럼 빈 페이지가 보일겁니다. 그 상태에서 HTML 모드로 전환하고, 한줄만 입력합니다. 다음 파란색 부분입니다.

<%@ Control Language="c#" ...(생략) ... %>

<%# PageLink %>

이제, 소스를 입력합니다. 소스보기로 전환( F7 ) 해서, 다음처럼 소스를 입력합니다. Page_Load 이벤트등에 코드를 추가할 필요는 없고요, 여러 속성들, 메서드들을 추가합니다. 파란색 부분입니다.

...(생략)...

public class PageNavigator : System.Web.UI.UserControl
{

  public int PageCount=1;
  public int CurrentPage=1;

  public string txtStart = "[<<]";
  public string txtPrev = "[<]";
  public string txtNext = "[>]";
  public string txtEnd = "[>>]";

  public string Action = "notsetted.aspx?p={0}";

  private string makeLink(string linkStr, int page, string title)
  {
    return String.Format( "<a href=\"{0}\" title=\"{1}\">{2}</a>" 
      , String.Format( Action, page )
      , title
      , linkStr );
  }

  protected string PageLink 
  {
    get 
    {
      int pageStart;
      int pageEnd;
      string str = "";

      pageStart=CurrentPage-4;
      if(pageStart<1) 
        pageStart=1;
      pageEnd=pageStart+8;
      if(pageEnd>=PageCount)
        pageEnd=PageCount;
      pageStart=pageEnd-8;
      if(pageStart<1) 
        pageStart=1;
    
      if(CurrentPage>1) 
      {
        str=makeLink(txtStart,1,"첫 페이지") 
            + " "+ makeLink(txtPrev,CurrentPage-1,"이전 페이지");
      }
      else 
      {
        str=txtStart +" "+ txtPrev;
      }
      str+=" ";

      for( int i=pageStart;i<=pageEnd;i++) 
      {
        if( i==CurrentPage )
          str+="<b>["+i+"]</b> ";
        else
          str+=makeLink( "["+i+"]",i,i+" 페이지" )+" ";
      }

      if(CurrentPage<PageCount) 
      {
        str += makeLink(txtNext,CurrentPage+1,"다음 페이지") 
               + " "+ makeLink(txtEnd,PageCount,"끝 페이지");
      }
      else 
      {
        str+=txtNext +" "+ txtEnd;
      }
      return str;
    }
  }
  ...(생략)...
}

...(생략)...

이제 방금 정의한 컨트롤을 List.aspx 에 넣을 차례입니다. List.aspx 를 열어서, [이전페이지] [다음페이지]라고 표시되었던, id 가 lnkPrevBtn, lnkNextBtn 이었던 HyperLink 두개를 삭제합니다. 삭제한 후, 솔루션 탐색기에서 PageNavigator.ascx 를 드래그-드롭 해서 그 위치에 컨트롤을 추가합니다. 그러면 UserControl - PageNavigator1 이란 컨트롤이 추가될텐데요, 그 컨트 속성란의 (id)를 myPageNavigator라고 바꿉니다.

직접 추가하시려면, HTML 보기 모드에서, 페이지 맨 첫줄과, 중간의 해당 위치에 다음 파란색 부분을 넣으시면 됩니다.

<%@ Register TagPrefix="Me" TagName="PageNavigator" 
             Src="UserControl/PageNavigator.ascx" %>
<%@ Page language="c#" ...(생략)... %>
...(생략)...
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="600" border="1">
  <TR>
    <TD><Me:PageNaviagator id="myPageNavigator" runat="server" /></TD>
    <TD align="right">...(생략)...</TD>
  </TR>
</TABLE>
...(생략)...

이제 코드 보기로 전환해서(List.aspx.cs) 방금 추가한 컨트롤( myPageNavigator )를 List 클래스에 추가합니다. 다른 컨트롤은 VS.NET이 알아서 추가해 주지만, 사용자 컨트롤은 사용자가 직접 추가해야 합니다. 다음 파란 색 부분입니다.

public class List : System.Web.UI.Page
{
  protected System.Web.UI.WebControls.HyperLink lnkWrite;
  protected System.Web.UI.WebControls.Label lblRecordCount;
  ...(생략)...
  protected MessageBoard.UserControl.PageNavigator myPageNavigator;

  protected string BindWriter( Object item )
  {
  ...(생략)...

private void Page_Load(object sender, System.EventArgs e)
{
  ...(생략)...

  // 다음 부분을 리마크 합니다
  /* 
  // 이전 페이지, 다음페이지를 설정합니다.
  lnkPrevBtn.NavigateUrl="List.aspx?p="+(page-1);
  lnkNextBtn.NavigateUrl="List.aspx?p="+(page+1);

  if(page<=1)
    lnkPrevBtn.Visible=false;
  if(page>=pageCount)
    lnkNextBtn.Visible=false;
  */

  // 다음 네줄을 추가합니다.

  myPageNavigator.PageCount = pageCount;
  myPageNavigator.CurrentPage = page;
  myPageNavigator.Action = "list.aspx?p={0}";
  myPageNavigator.DataBind();
  
}

만약 [<<][<][>][>>] 버튼의 모양을 바꾸고 싶다면, PageNavigator 태그를 다음과 같은 방식으로 설정하시면 될겁니다.

<Me:PageNaviagator id="myPageNavigator" runat="server" 
  txtStart="<img src='b_start.gif' border=0 align=absmiddle>"
  txtEnd="<img src='b_end.gif' border=0 align=absmiddle>"
  txtPrev="<img src='b_prev.gif' border=0 align=absmiddle>"
  txtNext="<img src='b_next.gif' border=0 align=absmiddle>"
/>