5. GridView의 바인딩 컨트롤
GridView에서 데이터 소스 컨트롤을 이용하여 GridView에 항목을 표시할 때 기본적으로 표시되는 항목들은 BoundField 컨트롤로써 표현됩니다. GridView는 BoundField 컨트롤뿐만이 아니라, 상황에 맞게 GridView에 표시될 수 있도록 다른 바인딩 컨트롤들도 제공하고 있습니다.
GridView에 적용될 수 있는 바인딩 컨트롤은 다음과 같습니다.
1. BoundField 컨트롤 : GridView의 열의 값을 텍스트로 표시합니다.
2. ButtonField 컨트롤 : GridView의 열에 임의적인 명령 버튼을 표시합니다.
3. CheckBoxField 컨트롤 : GridView의 열에 확인란(체크박스)을 표시합니다.
4. CommandField 컨트롤 : GridView의 열에 추가, 수정, 삭제 작업을 할 수 있는 명령 버튼을 표시합니다.
5. HyperLinkField 컨트롤 : GridView의 열의 값을 하이퍼링크로 표시합니다.
6. ImageField 컨트롤 : GridView의 열의 값을 이미지로 표시합니다.
7. TemplateField 컨트롤 : GridView의 열의 값을 템플릿을 이용하여 개발자가 임의대로 표시하게 합니다.
GridView는 위와 같이 7개의 바인딩 컨트롤을 제공하고 있습니다. 그러면, 예를 들어 위의 컨트롤을 사용하는 방법을 알아보도록 하겠습니다.
BoundField 컨트롤은 기본적으로 사용하는 방법대로 사용하시면 됩니다.
그러면, ButtonField 컨트롤에 대해서 알아보도록 하겠습니다.
다음과 같이, GridView에 ButtonField 컨트롤을 3개 포함시킵니다.
<Adding ButtonField Controls>
<asp:ButtonField HeaderText="ButtonField" Text="Button" ButtonType="Button" ItemStyle-HorizontalAlign="center" CommandName="normalBtn" />
<asp:ButtonField HeaderText="ButtonField" Text="ImageButton" ButtonType="Image" ItemStyle-HorizontalAlign="center" ImageUrl="~/Images/feed-icon-16x16.png" CommandName="imgBtn" />
<asp:ButtonField HeaderText="ButtonField" Text="LinkButton" ItemStyle-HorizontalAlign="center" CommandName="linkBtn" />
기존에 사용했던 GridView에 3개의 ButtonField를 추가하였습니다. 각각의 ButtonField는 일반 버튼, 이미지 버튼, 링크 버튼을 나타내고 있으며 이것은 ButtonField의 속성 중 ButtonType 값을 할당함에 따라 변경되게 됩니다. ButtonType을 할당하지 않으면, 링크 버튼이 추가되게 됩니다.
다음 코드 비하인드에서 다음과 같이 소스를 작성합니다.
<GridView Source>
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
// e.CommandArgument로는 GridView의 RowIndex가 넘어온다.
int iRowIndex = int.Parse(e.CommandArgument.ToString());
GridView1.Rows[iRowIndex].Cells[5].Text = e.CommandName + " Display";
}
ButtonField 바인딩 컨트롤은 GridView의 RowCommand 이벤트를 이용하여 처리하게 됩니다. 위의 소스에서는 GridView의 선택한 버튼이 속해 있는 행의 5번째 열의 Text를 바꾸도록 되어 있습니다.
이와 같이 소스를 추가한 후 브라우저에서 실행하면 다음과 같은 화면이 됩니다.
그림 5-1. ButtonField 컨트롤을 추가한 화면
이제, 각각의 ButtonField 컨트롤에 있는 버튼을 누르면 선택한 버튼이 속한 행의 5번째 열의 Text가 입력이 되게 됩니다.
그림 5-2 ButtonField 컨트롤의 버튼을 클릭한 후의 화면
각 버튼을 누르면, 5번째 열 안에 정상적으로 Text가 입력되는 것을 확인할 수 있습니다.
다음은, CheckBoxField 컨트롤에 대해서 알아보도록 하겠습니다. CheckBoxField는 데이터베이스의 테이블 중 필드의 타입이 BIT 또는 BOOL인 경우에 사용이 됩니다.
만약, SqlDataSource를 그대로 GridView에 바인딩 했을 경우 자동적으로 필드의 타입이 BIT인 경우에는 CheckBoxField로 변환이 되어서 보여지게 됩니다.
예를 들어 다음과 같이 AdventureWorks 데이터베이스의 Production.Product 테이블은 다음과 같은 구조를 가지고 있습니다.
그림 5-3. Production.Product 테이블의 구조
여기에서 보면, MakeFlag 필드와 FinisheGoodsFlag 필드는 BIT 타입을 가지고 있는 것을 확인할 수 있습니다. Production.Product 테이블을 GridView에 바인딩하면, MakeFlag 필드와 FinishedGoodsFlag 필드는 CheckBoxField 컨트롤로 바인딩되는 것을 확인할 수 있습니다.
그림 5-4. GridView에 나타난 CheckBoxField 화면
CheckBoxField 컨트롤에 대해서는 더 깊게 알아보지 않겠습니다. 사실 잘 쓰이지 않는 부분이기 때문입니다. 궁금하신 분들은 MSDN을 참고하시기 바랍니다.
다음은, CommandField 컨트롤에 대해서 알아보도록 하겠습니다. CommandField 컨트롤은 데이터 바인딩된 컨트롤에서 선택, 편집, 삽입 또는 삭제 작업을 수행하는 명령 단추를 표시하는 특수 필드를 GridView에 표시할 수 있게 해주는 컨트롤로써 사용방법은 GridView에 CommandField 태그를 삽입하면 됩니다. CommandField에 선택, 편집, 삽입, 삭제에 대한 버튼을 표시하기 위해서는 각각 ShowSelectButton, ShowEditButton, ShowInsertButton, ShowDeleteButton 속성을 true로 설정해야 브라우저에서 정상적으로 각각의 버튼이 표시되게 됩니다.
제가 보여드릴 예제에서는 수정 버튼과 삭제 버튼만을 화면에 표시하여 행에 속한 열의 데이터를 수정하거나 삭제하는 것을 보여드리도록 하겠습니다.
우선, 다음과 같이 SqlDataSource와 GridView를 구성합니다. 다음은 aspx 페이지의 전체 소스입니다.
<Default2.aspx>
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>제목 없음</title>
8 </head>
9 <body>
10 <form id="form1" runat="server">
11 <div>
12 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
13 <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
14 <Columns>
15 <asp:CommandField ShowEditButton="true" ShowDeleteButton="true" HeaderText="Control" />
16 <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
17 ReadOnly="True" SortExpression="ProductID" />
18 <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
19 <asp:BoundField DataField="ProductNumber" HeaderText="ProductNumber" SortExpression="ProductNumber" />
20 <asp:CheckBoxField DataField="MakeFlag" HeaderText="MakeFlag" SortExpression="MakeFlag" ReadOnly="false" />
21 </Columns>
22 <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
23 <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
24 <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
25 <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
26 </asp:GridView>
27 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
28 SelectCommand="SELECT ProductID, Name, ProductNumber, MakeFlag FROM Production.Product"
29 UpdateCommand="UPDATE Production.Product SET Name = @Name, ProductNumber = @ProductNumber, MakeFlag = @MakeFlag WHERE ProductID = @ProductID"
30 DeleteCommand="DELETE FROM Production.Product WHERE ProductID = @ProductID"></asp:SqlDataSource>
31 </div>
32 </form>
33 </body>
34 </html>
15번째 라인과 같이 CommandField를 추가한 후 ShowEditButton 속성과 ShowDeleteButton 속성을 true로 설정하였습니다.
이를 브라우저에서 확인해보면 다음과 같이 "편집" 버튼과 "삭제" 버튼이 나타나게 됩니다.
그림 5-5. CommandField에 "편집", "삭제"버튼이 표시된 GridView 화면
"편집" 버튼을 누르면, 해당 행의 열이 편집 모드로 전환됩니다.
그림 5-6. 편집 모드로 전환된 행
편집하고자 하는 열의 데이터를 편집한 후 "업데이트" 버튼을 누르면, 업데이트된 항목이 적용되어서 GridView에 표시되게 됩니다.
그림 5-7. 데이터를 수정한 후의 GridView 화면
"삭제" 버튼을 누르면, 해당 행이 삭제가 됩니다. (여기에서 DB의 제약조건에 따라 오류가 발생할 수도 있습니다. 오류의 발생 시 해당 제약 조건을 풀어주시거나, 관련된 테이블의 데이터를 제거해 주시면 오류가 없이 삭제가 됩니다.)
그림 5-8. 해당 행이 삭제된 후의 GridView 화면
이제, ImageField 컨트롤에 대해서 알아보도록 하겠습니다. ImageField 컨트롤을 사용하면, GridView에 이미지가 표시가 되게 됩니다.
우선, 다음과 같이 aspx 페이지에 코드를 작성합니다.
<Default3.aspx>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>제목 없음</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" AutoGenerateColumns="false">
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField HeaderText="FolderID" DataField="Folder" />
<asp:ImageField HeaderText="Image" DataImageUrlField="ImagePath" NullImageUrl="~/Images/feed-icon-16x16.png"></asp:ImageField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
GridView의 속한 컬럼들 중 ImageField 컨트롤을 하나 위치시켰습니다. 나중에 브라우저에서 볼 때 이 부분에 이미지가 표시되게 됩니다.
다음은 코드 비하인드의 코드입니다.
<Default3.aspx.cs>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (! Page.IsPostBack)
{
GridView1.DataSource = MakeTable().DefaultView;
GridView1.DataBind();
}
}
private DataTable MakeTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Folder", typeof(string)));
dt.Columns.Add(new DataColumn("ImagePath", typeof(string)));
DataRow dr = null;
dr = dt.NewRow();
dr[0] = "1";
dr[1] = "Images/feed-icon-10x10.png";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr[0] = "2";
dr[1] = "Images/feed-icon-12x12.png";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr[0] = "3";
dr[1] = "Images/feed-icon-14x14.png";
dt.Rows.Add(dr);
dr = null;
dr = dt.NewRow();
dr[0] = "4";
dr[1] = "";
dt.Rows.Add(dr);
dr = null;
return dt;
}
}
코드 비하인드에서는 DataTable을 하나 만들고, DataTable의 두 번째 열에 이미지가 위치하고 있는 경로를 할당하였습니다. 마지막 4번째 행은 이미지의 경로를 지정하지 않았습니다. 이것은 ImageField에 지정한 속성 중 NullImageUrl 속성을 이용하기 위해서인데, NullImageUrl 속성은 만약, 이미지가 없는 경우라면, NullImageUrl 속성에 할당된 이미지를 보여주게 하는 것입니다.
그럼, 브라우저에서 보면, GridView의 2번째 열에 Image가 위치하고 있는 것을 확인하실 수 있습니다.
그림 5-9. 이미지가 보이는 GridView
다음은 HyperLinkField를 살펴보도록 하겠습니다. HyperLinkField를 사용하면, HyperLinkField를 사용한 그 열의 표시된 내용을 클릭하였을 경우 페이지를 지정된 URL로 이동시킬 수 있습니다.
우선, 다음과 같이 코드를 작성합니다.
<Default.aspx.cs>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>제목 없음</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" SelectCommand="SELECT Person.Address.* FROM Person.Address"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="AddressID"
DataSourceID="SqlDataSource1" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" AllowPaging="True" AllowSorting="True" PageSize="5" OnPageIndexChanged="GridView1_PageIndexChanged" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound" OnSorted="GridView1_Sorted" OnSorting="GridView1_Sorting" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:HyperLinkField HeaderText="HyperLinkField" DataNavigateUrlFields="AddressID,PostalCode" DataNavigateUrlFormatString="Default4.aspx?addressid={0}&postalcode={1}" Text="이동하기" />
<asp:BoundField DataField="AddressID" HeaderText="AddressID" InsertVisible="False"
ReadOnly="True" SortExpression="AddressID" />
<asp:BoundField DataField="AddressLine1" HeaderText="AddressLine1" SortExpression="AddressLine1" />
<asp:BoundField DataField="AddressLine2" HeaderText="AddressLine2" SortExpression="AddressLine2" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="StateProvinceID" HeaderText="StateProvinceID" SortExpression="StateProvinceID" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
<asp:BoundField DataField="rowguid" HeaderText="rowguid" SortExpression="rowguid" />
<asp:BoundField DataField="ModifiedDate" HeaderText="ModifiedDate" SortExpression="ModifiedDate" />
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
위의 GridView에서는 HyperLinkField를 사용하였고, DataNavigateUrlFields 속성과 DataNavigateUrlFormatString 속성을 이용하여, 이동할 페이지의 경로를 지정하도록 하였습니다. DataNavigateUrlFormatString 속성에는 "Default4.aspx?addressid={0}&postalcode={1}"와 같이 표시된 제목을 누를 경우 Default4.aspx로 이동을 하게 하였고, 이동시에 넘겨줄 쿼리스트링으로 addressid와 postalcode값을 각각, DataNavigateUrlFields 속성에 지정된 필드의 값을 매칭시키도록 되어 있습니다. 이 필드값은 ","로 여러개의 항목을 지정할 수 있습니다. 그러면, 이것을 브라우저에서 확인해 보도록 하겠습니다.
그림 5-10. HyperLinkField가 적용된 GridView 화면
제일 첫번째 행에 있는 "이동하기" 버튼을 클릭하게 되면 이 페이지는 Default4.aspx 페이지로 이동하게 되며 쿼리스트링 값으로, addressid에는 1값이 그리고 postalcode에는 98011값이 할당되어 넘겨지게 됩니다. 그러면, 이 쿼리스트링 값들을 Default4.aspx로 정상적으로 넘어가게 되었는지 확인해 보도록 하겠습니다.
그림 5-11. Default4.aspx에 넘겨진 쿼리스트링값 출력 화면
이와 같은 식으로 이동할 페이지에 넘길 값이 있으면, DataNavigateUrlFields 속성과 DataNavigateUrlFormatString 속성을 이용하면 되겠습니다.
참고로, GridView의 경우는 게시판의 리스트 화면에서 많이 사용이 되는데 리스트의 제목을 클릭 시 조회 페이지로 몇 개의 쿼리스트링 값을 추가해서 넘겨주어야 할 때가 있습니다. 가장 많이 쓰이는 게 Page 번호입니다. Page 번호는 DataNavigateUrlFields 속성에 지정할 수 없는데 그러면 어떻게 넘겨줘야 할까요? 그것은 GridView의 DataRowBound 이벤트를 이용해서 추가해 줄 수 있습니다. 그러면, 다음 코드는 DataRowBound 이벤트를 이용하여 page에 대한 정보를 쿼리스트링에 추가하는 코드 비하인드에서의 코드입니다.
<Default.aspx.cs>
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
DataRowView drView = (DataRowView)e.Row.DataItem;
if (e.Row.RowType == DataControlRowType.DataRow)
{
for (int i = 0; i < e.Row.Cells.Count; i++)
{
if (i == 0)
{
((e.Row.Cells[i].Controls[0]) as HyperLink).NavigateUrl = ((e.Row.Cells[i].Controls[0]) as HyperLink).NavigateUrl.ToString() + "&page=3";
}
}
}
}
RowDataBound 이벤트를 이용하여, 각 행이 바운드될 때 HyperLink인 컨트롤을 찾아서 그 컨트롤이 가지고 있는 NavigateUrl에 추가할 쿼리스트링을 할당해주면, HyperLink의 Text를 클릭 시에 추가된 쿼리스트링도 같이 넘어가게 됩니다. 다음 화면은 Default2.aspx에 넘겨진 쿼리스트링값을 다시 출력한 화면입니다.
그림 5-12. Default2.aspx에 넘겨진 쿼리스트링값 출력 화면
추가된 값이 정상적으로 출력되는 것을 확인할 수 있습니다.
TemplateField 컨트롤의 경우는 ASP.NET에 대한 강좌가 들어있는 사이트에서 많이 소개를 하고 있기 때문에 굳이 제가 여기에서 소개를 하지 않아도 될 것 같기 때문에 여기에서의 소개는 생략하기로 합니다.
이상으로 GridView의 바인딩 컨트롤에 대해서 알아보았습니다. 일반적인 BoundField 컨트롤을 사용하면 간편하지만, 제공되는 다른 바인딩 컨트롤들을 사용하면, 좀 더 편한 GridView를 만들 수 있을 것입니다.
포스팅을 마치며... ----------------------------------------------------------------------------
GridView의 바인딩 컨트롤에 대해서 기술하였지만, 실질적으로 저도 잘 사용하지는 않고 있습니다. 지금 생각해보면, 바인딩 컨트롤을 이용하여 썸네일 게시판이나 자료실, 또는 한줄 메모장 등에 사용하면 좀 더 편리할 것 같습니다. GridView의 바인딩 컨트롤에 대해서 미진하지만, 이 포스트를 읽고 좀 더 GridView에 대해서 이해가 되는 그런 포스트였으면 하는 제 바램이 있습니다.