login register Sysop! about ME  
qrcode
    최초 작성일 :    2002년 10월 21일
  최종 수정일 :    2002년 10월 21일
  작성자 :    cassatt
  편집자 :    Taeyo (김 태영)
  읽음수 :    50,137

강좌 목록으로 돌아가기

필자의 잡담~

사용자 컨트롤 사용하기

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

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

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

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


페이지 추가

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

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

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

<%# PageLink %>
PageLink 라는 속성만 바인딩하도록 해놓았습니다. 나머지는 클래스로 정의해서, 몇가지 속성값을 설정하면 알아서 [<<][<][1][2][3][>][>>] 형태의 페이지 링크를 출력하도록 할 생각입니다.


소스 입력

이제, 소스를 입력합니다. 소스보기로 전환( 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 에 넣을 차례입니다. 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>
...(생략)...
사용자 컨트롤은, 소스도 aspx 페이지와 거의 같고, 만든 후엔 위에 설명한 것처럼 마우스로 드래그-드롭 하거나, <%@ Register... %> 지시자를 쓰고 원하는 곳에 태그를 넣으면 되기 때문에 사용하기  쉽습니다.

이제 코드 보기로 전환해서(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 )
  {
  ...(생략)...
Page_Load 이벤트의 마지막 부분, 이전 다음페이지 부분을 지우거나 리마크처리하고, 방금 추가한 사용자 컨트롤을 사용하도록 고칩니다. 다음 소스의 파란색 부분입니다.
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 인스턴스에 페이지 갯수(PageCount), 현재 페이지(CurrentPage), 링크(Action) 를 설정하고 DataBind() 를 호출하고 있습니다. 방명록 같은 다른 App의 경우에도 같은 방식으로 추가해서 사용하면 될겁니다.

만약 [<<][<][>][>>] 버튼의 모양을 바꾸고 싶다면, 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>"
/>
txtStart, txtEnd, txtPrev, txtNext 등의 어트리뷰트에 원하는 내용을 넣으시면 됩니다. 이미지라면 <img> 태그를 넣으시면 되겠죠.

authored by


 
 
.NET과 Java 동영상 기반의 교육사이트

로딩 중입니다...

서버 프레임워크 지원 : NeoDEEX
based on ASP.NET 3.5
Creative Commons License
{5}
{2} 읽음   :{3} ({4})