게시판 목록을 보여주는 GridView 예제
ASP.NET 2.0에는 GridView라는 컨트롤이 있다. GridView를 사용하는 예제를 보도록 하자. 참고로 아래 예제는 소스와 간단한 설명만 한다. 직접 해보면 이해를 할 수 있기때문에..^^
1. 게시판 목록의 디자인을 위한 스타일을 정의 한다.
2. DataSource를 생성하고 GridView와 연결한다.
<asp:GridView ID="GridView1" runat="server" CellPadding="4" CellSpacing="1" GridLines="None" AutoGenerateColumns="false" AllowPaging="True" CssClass="board_size" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="id" HeaderText="번호" SortExpression="id" ReadOnly="True" >
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="40px" />
</asp:BoundField>
<asp:TemplateField HeaderText="제목" SortExpression="title" InsertVisible="False">
<ItemTemplate>
<asp:HyperLink ID="hlTitle" runat="server"></asp:HyperLink>
<asp:Label ID="lblComments" runat="server" Visible="false" CssClass="list_comment"></asp:Label>
<asp:Image ID="imgNew" runat="server" Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="작성자" SortExpression="name" ReadOnly="True" >
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:TemplateField HeaderText="작성일" SortExpression="regdate" InsertVisible="False">
<ItemTemplate>
<asp:Label ID="lblRegdate" runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="80px" />
</asp:TemplateField>
<asp:BoundField DataField="hit" HeaderText="조회" SortExpression="hit" ReadOnly="True" >
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="40px" />
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="list_title" />
<AlternatingRowStyle CssClass="list_row1" />
<RowStyle CssClass="list_row2" />
<PagerSettings Mode="NumericFirstLast" />
<PagerStyle CssClass="list_pager" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:shblitzConnectionString %>" SelectCommand="SELECT [id], [title], [comments], [name], [regdate], [hit] FROM [Board_1_Entries] WHERE ([complete] = @complete) ORDER BY [regdate] DESC">
<SelectParameters>
<asp:Parameter DefaultValue="True" Name="complete" Type="Boolean" />
</SelectParameters>
</asp:SqlDataSource>
GridView 컨트롤의 속성 설명
- CellPadding : 테이블 셀 패딩을 설정한다.
- CellSpacing : 테이블 셀 여백을 설정한다.
- GridLines : 테이블의 라인을 설정한다. (true:기본값 / false)
- AutoGenerateColumns : 컬럼을 자동 설정한다. (true:기본값 / false)
- AllowPaging : 페이징 사용여부를 설정한다. (true:기본값 / false)
- CssClass : 테이블의 스타일을 지정한다.
- DataSourceID : 데이터소스를 지정한다.
- OnRowDataBound : 데이터소스에서 가져온 데이터를 한줄씩 바운딩할때 처리하는 이벤트
GridView 컨트롤의 하위 태그 설명
- HeaderStyle : 게시판 헤더(타이틀)의 디자인을 설정한다.
- AlternatingRowStyle : 게시판의 목록의 디자인을 설정한다.
- RowStyle : 게시판의 목록의 디자인을 설정한다.
- PagerSettings : 페이징 기능을 사용시 설정한다.
- PagerStyle : 페이징의 디자인을 설정한다.
3. GridView의 OnRowDataBound 예제
바인딩시 적용되는 내용은 TemplateField에 지정된 컨트롤을 설정할 수 있습니다.
작성 : 상현넘™ [SHBLITZ.NET]
1. 게시판 목록의 디자인을 위한 스타일을 정의 한다.
<style type="text/css">
.board_size {width:660px;}
.list_title {background-color:#5D7B9D; color:#FFFFFF; height:28px; font-weight:bold;}
.list_row1 {background-color:#EEEEEE; color:#284775; height:28px;}
.list_row2 {background-color:#DDDDDD; color:#333333; height:28px;}
.list_comment {font-size:7pt; font-family:Verdana;}
.list_pager {text-align:center;}
</style>
.board_size {width:660px;}
.list_title {background-color:#5D7B9D; color:#FFFFFF; height:28px; font-weight:bold;}
.list_row1 {background-color:#EEEEEE; color:#284775; height:28px;}
.list_row2 {background-color:#DDDDDD; color:#333333; height:28px;}
.list_comment {font-size:7pt; font-family:Verdana;}
.list_pager {text-align:center;}
</style>
2. DataSource를 생성하고 GridView와 연결한다.
<asp:GridView ID="GridView1" runat="server" CellPadding="4" CellSpacing="1" GridLines="None" AutoGenerateColumns="false" AllowPaging="True" CssClass="board_size" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="id" HeaderText="번호" SortExpression="id" ReadOnly="True" >
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="40px" />
</asp:BoundField>
<asp:TemplateField HeaderText="제목" SortExpression="title" InsertVisible="False">
<ItemTemplate>
<asp:HyperLink ID="hlTitle" runat="server"></asp:HyperLink>
<asp:Label ID="lblComments" runat="server" Visible="false" CssClass="list_comment"></asp:Label>
<asp:Image ID="imgNew" runat="server" Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="작성자" SortExpression="name" ReadOnly="True" >
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="80px" />
</asp:BoundField>
<asp:TemplateField HeaderText="작성일" SortExpression="regdate" InsertVisible="False">
<ItemTemplate>
<asp:Label ID="lblRegdate" runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="80px" />
</asp:TemplateField>
<asp:BoundField DataField="hit" HeaderText="조회" SortExpression="hit" ReadOnly="True" >
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="40px" />
</asp:BoundField>
</Columns>
<HeaderStyle CssClass="list_title" />
<AlternatingRowStyle CssClass="list_row1" />
<RowStyle CssClass="list_row2" />
<PagerSettings Mode="NumericFirstLast" />
<PagerStyle CssClass="list_pager" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:shblitzConnectionString %>" SelectCommand="SELECT [id], [title], [comments], [name], [regdate], [hit] FROM [Board_1_Entries] WHERE ([complete] = @complete) ORDER BY [regdate] DESC">
<SelectParameters>
<asp:Parameter DefaultValue="True" Name="complete" Type="Boolean" />
</SelectParameters>
</asp:SqlDataSource>
GridView 컨트롤의 속성 설명
- CellPadding : 테이블 셀 패딩을 설정한다.
- CellSpacing : 테이블 셀 여백을 설정한다.
- GridLines : 테이블의 라인을 설정한다. (true:기본값 / false)
- AutoGenerateColumns : 컬럼을 자동 설정한다. (true:기본값 / false)
- AllowPaging : 페이징 사용여부를 설정한다. (true:기본값 / false)
- CssClass : 테이블의 스타일을 지정한다.
- DataSourceID : 데이터소스를 지정한다.
- OnRowDataBound : 데이터소스에서 가져온 데이터를 한줄씩 바운딩할때 처리하는 이벤트
GridView 컨트롤의 하위 태그 설명
- HeaderStyle : 게시판 헤더(타이틀)의 디자인을 설정한다.
- AlternatingRowStyle : 게시판의 목록의 디자인을 설정한다.
- RowStyle : 게시판의 목록의 디자인을 설정한다.
- PagerSettings : 페이징 기능을 사용시 설정한다.
- PagerStyle : 페이징의 디자인을 설정한다.
3. GridView의 OnRowDataBound 예제
바인딩시 적용되는 내용은 TemplateField에 지정된 컨트롤을 설정할 수 있습니다.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
System.Web.UI.WebControls.HyperLink fcTitle;
System.Web.UI.WebControls.Label fcComments, fcRegdate;
System.Web.UI.WebControls.Image fcNew;
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridViewRow row = e.Row;
int id = (int)((DataRowView)e.Row.DataItem)["id"];
string title = ((DataRowView)e.Row.DataItem)["title"].ToString();
// 제목의 길이 제한
if (title.Length > 50)
{
title = title.Substring(0, 50) + "...";
}
title = title.Replace("<", "<");
title = title.Replace(">", ">");
fcTitle = (System.Web.UI.WebControls.HyperLink)e.Row.FindControl("hlTitle");
fcTitle.NavigateUrl = "Read.aspx?BoardNo=1&Page=1&No=" + id;
fcTitle.Text = title;
// 코멘트 글이 있는 경우 제목 뒤에 코멘트 갯수를 표시해 준다.
int comments = (int)((DataRowView)e.Row.DataItem)["comments"];
if (comments != 0)
{
fcComments = (System.Web.UI.WebControls.Label)e.Row.FindControl("lblComments");
fcComments.Text = " (" + comments + ")";
fcComments.Visible = true;
}
// 24시간 이내에 올라온 글은 글 제목 뒤쪽에 이미지를 달아준다.
DateTime regdate = (DateTime)((DataRowView)e.Row.DataItem)["regdate"];
TimeSpan Gap = DateTime.Now - regdate;
if (Gap.TotalMinutes < 1440)
{
fcNew = (System.Web.UI.WebControls.Image)e.Row.FindControl("imgNew");
fcNew.ImageUrl = "images/icon_new.gif";
fcNew.Visible = true;
}
// 작성일을 표시해준다.
fcRegdate = (System.Web.UI.WebControls.Label)e.Row.FindControl("lblRegdate");
fcRegdate.Text = regdate.ToString("yyyy-MM-dd");
}
}
{
System.Web.UI.WebControls.HyperLink fcTitle;
System.Web.UI.WebControls.Label fcComments, fcRegdate;
System.Web.UI.WebControls.Image fcNew;
if (e.Row.RowType == DataControlRowType.DataRow)
{
GridViewRow row = e.Row;
int id = (int)((DataRowView)e.Row.DataItem)["id"];
string title = ((DataRowView)e.Row.DataItem)["title"].ToString();
// 제목의 길이 제한
if (title.Length > 50)
{
title = title.Substring(0, 50) + "...";
}
title = title.Replace("<", "<");
title = title.Replace(">", ">");
fcTitle = (System.Web.UI.WebControls.HyperLink)e.Row.FindControl("hlTitle");
fcTitle.NavigateUrl = "Read.aspx?BoardNo=1&Page=1&No=" + id;
fcTitle.Text = title;
// 코멘트 글이 있는 경우 제목 뒤에 코멘트 갯수를 표시해 준다.
int comments = (int)((DataRowView)e.Row.DataItem)["comments"];
if (comments != 0)
{
fcComments = (System.Web.UI.WebControls.Label)e.Row.FindControl("lblComments");
fcComments.Text = " (" + comments + ")";
fcComments.Visible = true;
}
// 24시간 이내에 올라온 글은 글 제목 뒤쪽에 이미지를 달아준다.
DateTime regdate = (DateTime)((DataRowView)e.Row.DataItem)["regdate"];
TimeSpan Gap = DateTime.Now - regdate;
if (Gap.TotalMinutes < 1440)
{
fcNew = (System.Web.UI.WebControls.Image)e.Row.FindControl("imgNew");
fcNew.ImageUrl = "images/icon_new.gif";
fcNew.Visible = true;
}
// 작성일을 표시해준다.
fcRegdate = (System.Web.UI.WebControls.Label)e.Row.FindControl("lblRegdate");
fcRegdate.Text = regdate.ToString("yyyy-MM-dd");
}
}
작성 : 상현넘™ [SHBLITZ.NET]