[Asp.Net] DataList - DataList를 이용한 게시판의 리스트 구현

[Asp.Net] DataList - DataList란?
[Asp.Net] DataList - DataList를 이용한 게시판의 리스트 구현
[Asp.Net] DataList - Edit Command(수정 명령)를 사용하여 리스트를 수정하기

[Asp.Net] DataList - DataList의 컬럼을 미리 만들어둔 템플릿으로 교체하기

[Asp.Net] DataList - 교체한 템플릿의 컨트롤에 코드로 접근하기

여기서는 DB연결등은 하지 않습니다 ㅎㅎ
DataList의 사용법을 알려주는 포스트니까요 ㅡ.-;

그러니 데이터는 직접 만들어야 합니다.

0.테스트용 데이터

이전글과 마찬가지로 DataSet를 사용합니다.

//테스트용 데이터셋
DataSet dsTest = new DataSet();

//테이블 생성
dsTest.Tables.Add("tbTest");
//컬럼 생성
dsTest.Tables["tbTest"].Columns.Add("colA");
dsTest.Tables["tbTest"].Columns.Add("colB");
dsTest.Tables["tbTest"].Columns.Add("colC");

//데이터 추가
string[] a = {"0", "첫번째","두번째"};
dsTest.Tables["tbTest"].Rows.Add(a);
string[] b = {"1", "첫번째","두번째"};
dsTest.Tables["tbTest"].Rows.Add(b);
string[] c = {"2", "첫번째","두번째"};
dsTest.Tables["tbTest"].Rows.Add(c);
string[] d = { "3", "첫번째", "두번째" };
dsTest.Tables["tbTest"].Rows.Add(d);
string[] e2 = { "4", "첫번째", "두번째" };
dsTest.Tables["tbTest"].Rows.Add(e2);
string[] f = { "5", "첫번째", "두번째" };
dsTest.Tables["tbTest"].Rows.Add(f);

//데이터 소스 지정
DataList1.DataSource = dsTest;
//데이터 바인딩
DataList1.DataBind();

1.데이터 바인딩

일단 만들어진 데이터를 순서대로 출력해 보겠습니다.

디자인인을 열어 아이템 템플릿에 레이블 3개를 추가 합니다.

실행을 해보면

이렇게 나옵니다.
데이터를 5개 넣었기 때문에 5줄이 나오는 거죠 ㅎㅎㅎ

레이블에서 오른쪽클릭을 하고 'Edit DataBindings...(데이터바인딩 수정)'을 눌릅니다.

데이터 리스트에 데이터 멤버가 연결되있다면 좀더 편하게 데이터를 바인딩할수 있겠지만 그렇지 못한관계로 수동으로 바인딩 하셔야 합니다.
수동으로 바인딩할때는 위의 스크린샷과 같이 해주시면 됩니다.

//DataBinder.Eval(Container, "DataItem.컬럼")
DataBinder.Eval(Container, "DataItem.colA")
//DataBinder.Eval(Container, "DataItem.colB") + "임의 추가"
//DataBinder.Eval(Container, "DataItem.colC" ) + "-" + DataBinder.Eval(Container, "DataItem.colA" )

이것은 택스트형식으로 들어가므로 여러가지 조합도 가능합니다.

이제 나머지 레이블도 바인딩을 하고 실행해보면 다음과 같은 화면이 나옵니다.

와~ 뚝딱뚝딱 리스트가 완성 되었습니다 ㅡ,.ㅡ;

2.줄마다 색주기

이제 한줄씩 색을 넣어 봅시다.
일반적으로 게시판을 개시물간 구분용 줄을 넣거나 각줄을 격줄로 색을 넣습니다.
여기선 둘다 해보겠습니다.

2-1.격줄로 색넣기

이것은 두가지 방법이 이씁니다.
AlternatingItemTemplate를 ItemTemplate과 똑같이 만들고 배경색을 바꾸는 방법과 배경색만 바꾸는 방법이 있습니다 ㅎㅎㅎ
배경색만 바꾸려면 선행작업이 조금 있어야 하니 똑같이 만들어 넣는 방법을 설명 하겠습니다.

디자인에서 소스보기로 들어가 aspx코드를 직접 수정하셔야 합니다.
아이템 템플릿과 똑같이 코드를 만든후 배경색만 바꿔 주면 됩니다.

<<asp:DataList>    
<AlternatingItemTemplate>
        <table style="background-color:#aaaaaa" >
            <tr>
                <td>
                    <asp:Label ID="lab1" runat="server"
                        Text='<%# DataBinder.Eval(Container, "DataItem.colA") %>'></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lab2" runat="server"
                        Text='<%# DataBinder.Eval(Container, "DataItem.colB") + "임의추가" %>'></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lab3" runat="server"
                        Text='<%# DataBinder.Eval(Container, "DataItem.colC") + "-" + DataBinder.Eval(Container, "DataItem.colA") %>'></asp:Label>
                </td>
            </tr>
        </table>
    </AlternatingItemTemplate>
    <ItemTemplate>
        <table class="style1">
            <tr>
                <td>
                    <asp:Label ID="lab1" runat="server"
                        Text='<%# DataBinder.Eval(Container, "DataItem.colA") %>'></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lab2" runat="server"
                        Text='<%# DataBinder.Eval(Container, "DataItem.colB") + "임의추가" %>'></asp:Label>
                </td>
                <td>
                    <asp:Label ID="lab3" runat="server"
                        Text='<%# DataBinder.Eval(Container, "DataItem.colC") + "-" + DataBinder.Eval(Container, "DataItem.colA") %>'></asp:Label>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

이렇게 하면

요렇게 나옵니다.
오홍홍홍홍홍홍

2-2.구분선 넣기

이전글을 보신분들은 아시겠지만 구분선은 완전 껌입니다 ㅡ.-;;;
SeparatorTemplate에 그냥 넣고싶은 모양의 구분선을 넣어 주시면 됩니다.

참아~암 쉽 조잉~

3. 응용편 - 링크 바인딩

일반적인 게시판을 보면 재목을 누르면 게시물로 들어가게 되어있습니다.
이것도 쉽습니다.
바인딩할때 a태그를 사용하거나 하이퍼링크 컨트롤을 이용하면 됩니다.

보통 게시판에서는 포스트 방식이라고해서 주소줄에 필요 데이터를 붙여 보내는 방식을 사용합니다

포스트 방식에 대해서 알지 못하고 게시판 만들기에 뛰어 드셨다면 언능가서 검색하시길 바랍니다-_-;
여튼 링크로 그냥 쏴주면 된다는 것을 알수 있습니다.

하이퍼링크버튼을 추가 하고 NavigateUrl에 다음과 같이 넣습니다.

"Default.aspx?id=" + DataBinder.Eval(Container, "DataItem.colA")

이렇게 넣으면

요렇게 됩니다.

당연이 여기서는 타켓 페이지에 대한 포스트방식처리를 넣지 않았으므로 동작을 하진 않습니다.
하지만 이렇게 해서 타겟페이지 처리를 하면 게시판과 똑같이 동작을 합니다.

디비를 연결하지 않아서 그렇지 디비를 연결하기되면 데이터의 리스트는 디비에서 출력할 만큼만 받아와야 하며 패이지 처리 및 네비게이션 처리를 별도로 해야 합니다.

하지만 간단하게 데이터리스트를 이용하여 게시판의 리스트를 간단하게 구현 할수 있습니다.

위의 코드에서는 테이블은 아이탬 안에 넣었는데 데이터리스트를 사용할때 테이블을 쓰지 않고 tr이나 td테그를 사용하셔도 됩니다.(4.0이상에서만 가능) 알아서 테이블 테그가 추가 되기 때문이죠.
CssClass로 스타일지정도 가능합니다.