지난번 게시물을 작성하고 올리는 부분을 만들었으므로 이번에는 올라온 게시물들을 리스트로 보여주는 사용자 컨트롤을 만들어 보자. ListPost.ascx라는 이름으로 아래와 같은 컨트롤을 만든다.
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="ListPost.ascx.cs" Inherits="DotNetBBS.ListPost" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<
asp:datagrid
id
="PostList"
runat
="server"
autogeneratecolumns
="False"
ShowHeader
="False">
<
alternatingitemstyle
cssclass
="PostAlter"></
alternatingitemstyle
>
<
itemstyle
cssclass
="PostList"></
itemstyle
>
<
headerstyle
cssclass
="SubHead"></
headerstyle
>
<
columns
>
<
asp:templatecolumn
itemstyle-width
="0"
itemstyle-verticalalign
="Top"
Visible
=False>
<
itemtemplate
>
<%# DataBinder.Eval(Container, "DataItem.PostSystemID") %>
</
itemtemplate
>
</
asp:templatecolumn
>
<
asp:templatecolumn
ItemStyle-Wrap
="False"
itemstyle-verticalalign
="Top">
<
itemtemplate
>
<%# DataBinder.Eval(Container, "DataItem.PostNo") %>
</
itemtemplate
>
</
asp:templatecolumn
>
<
asp:templatecolumn
ItemStyle-Wrap
="False"
ItemStyle-Width
="300px"
itemstyle-verticalalign
="Top">
<
itemtemplate
>
<%# DataBinder.Eval(Container, "DataItem.Subject") %>
</
itemtemplate
>
</
asp:templatecolumn
>
<
asp:templatecolumn
ItemStyle-Wrap
="False"
ItemStyle-Width
="100px"
itemstyle-verticalalign
="Top">
<
itemtemplate
>
<%# DataBinder.Eval(Container, "DataItem.CreatorName") %>
</
itemtemplate
>
</
asp:templatecolumn
>
<
asp:templatecolumn
ItemStyle-Wrap
="False"
itemstyle-verticalalign
="Top">
<
itemtemplate
>
<%# DataBinder.Eval(Container, "DataItem.CreateDate") %>
</
itemtemplate
>
</
asp:templatecolumn
>
<
asp:templatecolumn
HeaderText
="aaa"
itemstyle-horizontalalign
="Center"
itemstyle-verticalalign
="Top"
headerstyle-horizontalalign
="Center">
<
itemtemplate
>
<
table
>
<
tr
>
<
td
nowrap
><
asp:linkbutton
commandname
="Delete"
runat
="server"
borderwidth
="0"
id
="Linkbutton2">
삭제</asp:linkbutton></td>
</
tr
>
</
table
>
</
itemtemplate
>
</
asp:templatecolumn
>
</
columns
>
</
asp:datagrid
>
게시글을 보여주기 위한 컨트롤은 DataGrid 컨트롤을 사용한다. DataGrid컨트롤은 기능이 매우 다양하여 대부분의 표 형식의 데이터를 보여주거나 수정하거나 할 때 매우 유용하다. 주의 깊에 볼만한 부분은 첫 번째 아이템 템플릿이다. PostSystemID를 표시하는 템플릿인데 Visible=”False”로 되어 있음을 주의 깊게 봐 둘 필요가 있다. PostSystemID는 사용자에게는 의미 없는 게시물의 유니크한 ID이다.(DB에서 생성하는 ID임을 상기하자) 그러므로 사용자에게는 보여줄 필요가 없지만 내부적으로 게시물을 다루는 데는 필요하다. 이러한 경우에 이 데이터를 저장해 두는 방법이 여러가지가 있겠지만 여기서는 DataGrid속의 숨겨둔 아이템으로 저장하는 방식을 사용하는 것이다. 아래쪽에서 게시물을 삭제할 때 다시 한번 살펴볼 기회가 있다.
DataGrid 컨트롤에서는 각 게시물의 색상을 번갈아 보여줄 수 있도록 alternatingitemstyle 을 사용하고 있다. 이 스타일은 BBS.css라는 파일을 만들어 아래와 같이 정의 한다.
.PostList
{
background-color:Aqua;
}
.PostListAltar
{
background-color:white;
}
간단히 배경색상을 바꾸는 방법을 쓰고 있다. 이 스타일 쉬트는 당연히 폼의 헤더에 포함시켜줘야 한다. 이제 이 컨트롤의 코드를 살펴보자.
namespace
DotNetBBS
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
///
<summary>
///
ListPost
에 대한 요약 설명입니다.
///
</summary>
public
class ListPost : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.DataGrid PostList;
private
void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
PostController pc = new PostController();
PostList.DataSource = pc.GetAllForBBSID(1);
PostList.DataBind();
}
}
//
중략
…
private
void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
this.PostList.DeleteCommand += new System.Web.UI.WebControls.DataGridCommandEventHandler(this.PostList_DeleteCommand);
}
#endregion
private
void PostList_DeleteCommand(object source, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
int PostSystemID = int.Parse(((System.Web.UI.DataBoundLiteralControl)(e.Item.Cells[0].Controls[0])).Text);
PostController pc = new PostController();
pc.Delete(PostSystemID);
Response.Redirect(Request.RawUrl);
}
}
}
Page_Load에서 PostList컨트롤에 데이터를 바인딩하고 있다. GetForBBSID함수는 다음과 같다.
public DataSet GetAllForBBSID(Int32 BBSID)
{
SqlConnection dbConn=new SqlConnection(myConnString);
DataSet ds=new DataSet();
ds.Tables.Add("tblPostList");
string queryStr =
string.Format("select PostSystemID,PostNo,Subject,BodyText,CreatorID,CreatorName,CreateDate from DNBBSPost " +
"where BBSID={0}", BBSID);
SqlDataAdapter dbAdapter=new SqlDataAdapter(queryStr, dbConn);
dbAdapter.Fill(ds,"tblPostList");
return ds;
}
BBSID에 해당하는 모든 게시글을 DataSet의 테이블로 넣어주고 있다. PostList컨트롤의 삭제 명령 구현을 살펴보자. 페이지 초기화 때 DataGridCommandEventHandler를 등록하고 있음을 주목하자. 이 핸들러에 의하여 불려지는 함수가 하단의 PostList_DeleteCommand 함수이다. 이 함수에서는 PostSystemID를 구하는 부분을 주목하여 봐두자. 앞에서 DataGrid 컨트롤 속에 숨겨진 아이템으로 넣어뒀던 값을 가져오는 부분이다. 이 핸들러 함수의 마지막은
Response.Redirect(Request.RawUrl);
라는 문장으로 끝나는데 현재 페이지를 다시 리프레쉬 하는 역할을 한다. 즉 삭제된 게시물을 반영하여 다시 DataGrid를 그려줘야 하기 때문이다. 여기까지 완성이 되었다면 이 컨트롤은 BBS.ascx에 추가 해주면 된다.
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="BBS.ascx.cs" Inherits="DotNetBBS.BBS" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<%@ Register TagPrefix="Gosu" TagName="AddNewPost" Src="AddNewPost.ascx" %>
<%@ Register TagPrefix="Gosu" TagName="ListPost" Src="ListPost.ascx" %>
<
Gosu:ListPost
runat
="server"></
Gosu:ListPost
>
<
br
>
<
Gosu:AddNewPost
runat
="server"></
Gosu:AddNewPost
>
지난번 만들어 두었던 AddNewPost 컨트롤 위에 나타나도록 하고 있다. 더불어 AddNewPost.ascx.cs의 AddNewPost_Click함수 마지막에 아래와 같은 문장을 추가한다.
Response.Redirect(Request.RawUrl);
게시물을 추가 했을 경우도 페이지를 다시 그리게 하여 PostList 컨트롤이 변경된 부분을 반영하게 하기 위해서이다. 이제 실행을 해보자. 아래와 같은 화면이 나오면 성공이다. 글 올리기와 삭제를 눌러 가면서 글이 잘 들어가는지, 삭제는 제대로 이루어지는지 살펴본다.
소스다운로드: http://www.code99.net/tabid/842/ItemID/13/Default.aspx