ASP.NET 2.0 게시판 만들기 4 (List.aspx - 글목록 페이지)

사랑+이별=추억 | 소심비형
http://blog.naver.com/ngmaster/120045802383

이전에 만든 List.aspx 페이지를 보도록 하겠습니다.

새로 다시 만들건데요. 이유인 즉, 다른방식으로 바인딩을 해보려고 합니다. 주로, 강좌 사이트들에서 볼 수 있는 방식입니다. 하지만, 현업에선 이러한 방식도 사용을 하지 않죠-_-;; 거의 대부분이 자체 솔루션을 가지고 있기 때문에 App_Code나 Bin 폴더에 있는 클레스를 이용합니다. 그 안에 정의되어져 있는 메서드를 이용하겠죠? 프로젝트마다 틀리지만말입니다.

아래 그림처럼 GridView와 Button을 하나씩 던져 놓습니다.

GridView는 자동서식을 "기본"으로 했습니다.

열편집을 열어서 필드를 아래와 같이 수정해줍니다.

전부 BoundField로 추가해줍니다.

순서대로...

DataField : seq | HeaderText : No.

DataField : id | HeaderText : 아이디

DataField : title | HeaderText : 제목

DataField : nickName | HeaderText : 작성자

DataField : wdate | HeaderText : 작성일

이제 코드 비하인드로 이동합니다.

네임스페이스 영역에 using System.Data.SqlClient;를 추가해줍니다.

Page_Load 이벤트 안에 코드를 추가해 줍니다.

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{ BindData(); }
}

굳이 설명을 하자면, PostBack이 아니라면, BindData() 메서드를 실행하라는 것입니다.

그럼 이제 BindData() 메서드를 만들어야 겠군요.

아래 그림처럼 한번 해보세요..ㅎㅎ;; 머 다들 알고 계시겠지만...

그럼 아래의 코드를 자동으로 생성해줍니다.

private void BindData()
{
throw new Exception("The method or operation is not implemented.");
}

위의 throw new Exception("The method or operation is not implemented."); 이 부분은 필요가 없으므로 삭제합니다. 그리고 아래의 코드를 작성해주시면 되겠습니다.

private void BindData()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ToString());
SqlCommand cmd = new SqlCommand("UP_SELECT_BOARD", con);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adapter.Fill(ds, "BoardList");
GridView1.DataSource = ds.Tables["BoardList"];
GridView1.DataBind();
}

이제 시작(F5, ctrl + F5)을 해보면 아래의 그림처럼 잘 작동을 합니다.

그리드뷰의 "작업상태"에서 해주셔도 되지만 이렇듯, 직접 하드코딩하셔도 됩니다. 결과는 같으니까요-_-;; 이제 좀더 세부적으로 조정을 해보도록 하죠.

지금 화면에서 다른것들은 굳이 건드릴 필요가 없지만, 작성일이 좀 걸립니다. 단순하게 "2007년 12월 17일"이라고만 표현하고 싶다면 어떻게 해야 할까요?

GridView 의 작업상태에서 "열 편집"을 선택합니다.

아래의 그림처럼 "작성일" 필드를 선택한 후 우측의 DataFormatString에 "{0:yyyy년 MM월 dd일}"을 입력해줍니다. 또, 밑에 HtmlEncode를 False로 변경해주어야 제대로 작동하게 됩니다.

Html로 인코딩을 하지 않고 문자열을 표현해주어야 합니다.

이제 시작을 해보면 아래의 그림처럼 표현이 됩니다.

이제는 24시간 이내에 작성된 글에 대한 스포트라이트를 주도록 하겠습니다. 말은 먼가 거창하게 했지만 사실은 글 작성 후 24시간이 경과되지 않으면, 다시 말해서 작성한지 만 하루가 지나지 않은 따끈 따끈한 새글이라면 제목 뒤에 "new"라는 멘트를 달아주겠습니다. 머 보통은 이미지로 하지만요^^;

준비된 이미지가 없을뿐더라 이쁜 이미지를 찾기 위해 허비될 시간을 생각하니 그냥 간단하게 텍스트로 처리하는게 좋을듯 하군요.-_-;;

아래의 코드를 추가해 줍니다.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if ((ListItemType)e.Row.RowType == ListItemType.Item || (ListItemType)e.Row.RowType == ListItemType.AlternatingItem)
{
DateTime newDate = (DateTime)((DataRowView)e.Row.DataItem)["wdate"];
TimeSpan gap = DateTime.Now - newDate;
if (gap.TotalHours < 24)
{
Literal l = new Literal();
l.Text = e.Row.Cells[2].Text +" [new]";
e.Row.Cells[2].Controls.Add(l);
}
}
}

이렇게 작성한 후 시작을 해보시면 아래의 그림처럼 잘 표현이 되죠?

잠깐 설명을 하자면, if ((ListItemType)e.Row.RowType == ListItemType.Item || (ListItemType)e.Row.RowType == ListItemType.AlternatingItem) 이 부분이 없다면 애러를 던져 줍니다. 이유인 즉, GridView를 디자인 하면서 HeaderText 부분도 포함되기 때문입니다. 일전에 이것과 비슷한 예제를 하면서 Trace를 켜놓고 설명한 적이 있는데 혹시라도 찾아보셨으면 아마도 아시리라 생각이 듭니다.

여하튼 저 부분에서 HeaderText 부분을 건너뛰지 않는다면 작성일이라는 문자열이 날짜형에 맞지 않아서 에러를 발생시키게 됩니다.

DateTime newDate = (DateTime)((DataRowView)e.Row.DataItem)["wdate"];
TimeSpan gap = DateTime.Now - newDate;
if (gap.TotalHours < 24)
{
Literal l = new Literal();
l.Text = e.Row.Cells[2].Text +" [new]";
e.Row.Cells[2].Controls.Add(l);
}

요 부분은 Row에 바인딩된 개체(object)인 DataItem을 DataRowView로 형변환 해줍니다. 이렇게 사용자 지정 뷰로 케스팅을 해준 후 키값을 이용하여 wdate를 가져옵니다. 다시 한번 DateTime로 형변환을 해준 후 newDate에 넣어줍니다. 마지막에 DateTime로 다시한번 케스팅을 해준 이유는 현재 날짜와 입력된 날짜를 비교하기 위함이죠..ㅎㅎ;

마지막으로 리터럴 컨트롤을 하나 추가해줍니다. 물론 컨트롤을 만들필요가 없긴 하지만, 좀더 유연한(?) 작업을 할수 있고, 수정도 편리하기에 이렇게 해주도록 하겠습니다. 지금은 그냥 문자열의 붙여넣기지만 말입니다. 차후에는 제목필드의 텍스트도 컨트롤로 만들어야 합니다. 그게 관리가 더 쉽거든요.-_-;; 음~ 말이 나온김에 제목을 컨트롤로 바꿔보도록 합시다. 아래처럼 말이죠!

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if ((ListItemType)e.Row.RowType == ListItemType.Item || (ListItemType)e.Row.RowType == ListItemType.AlternatingItem)
{
HyperLink hl = new HyperLink();
hl.Text = e.Row.Cells[2].Text;
hl.NavigateUrl = "Content.aspx?seq=" + e.Row.Cells[0].Text;
e.Row.Cells[2].Controls.Clear();

e.Row.Cells[2].Controls.Add(hl);

DateTime newDate = (DateTime)((DataRowView)e.Row.DataItem)["wdate"];
TimeSpan gap = DateTime.Now - newDate;
if (gap.TotalHours < 24)
{
Literal l = new Literal();
l.Text = " [new]";
e.Row.Cells[2].Controls.Add(l);
}
}
}

어차피 제목을 클릭하면, 해당 글을 보여주기 위한 Content.aspx 페이지로 이동해야 합니다. 그래서 HyperLink 컨트롤을 생성해서 링크를 걸어주었습니다.

실해을 시키면 아래의 그림처럼 제목에 언더바가 생기면서 링크가 걸리게 됩니다.

클릭해보면 아래와 같은 에러가 뜹니다. 물론 아직 만들지 않은 페이지에 접근을 할 수 없기에 던져지는 에러죠. 확인할 내용은 주소에 seq로 정확한 값을 가지고 넘어가는지만 확인하면 되겠습니다.

내일은 계층적인 리스트를 뿌려주는걸 알아볼께요-_-;;