ResolveURL() 메서드를 이용한 GridView에 이미지 나타내기

오랜만에 글을 올립니다. ASP.NET에서 많이 쓰이는 GridView 컨트롤에 서버 사이드에 있는 이미지들을 나타내고자 할 경우 다음과 같은 System.Web.UI 네임 스페이스에 정의되어 있는  ResolveURL() 메서드와 DataTable을 이용하여 만드는 방법을 소개합니다.

public string ResolveUrl(
	string relativeUrl
)

위의 정의에서 보여지는 것처럼 문자열 형태로 입력받아 문자열 형태로 반환하는 형태입니다.
이를 이용하여 3개의 데이터행(DataRow, 레코드)을 포함하는 DataTable을 정의하여 
바인딩하는 코드는 다음과 같습니다.

protected void Page_Load(object sender, EventArgs e)
{
  GridView1.DataSource = BindData();
  GridView1.DataBind();
}

private DataTable BindData()
{
  DataTable dt = new DataTable();
  DataColumn bookname = new DataColumn("bookname", typeof(System.String));
  DataColumn bookwriter = new DataColumn("bookwriter", typeof(System.String));
  DataColumn publication = new DataColumn("publication", typeof(System.String));
  DataColumn publishday = new DataColumn("publishday", typeof(System.String));
  DataColumn pictureURL = new DataColumn("pictureURL", typeof(System.String));

  dt.Columns.Add(bookname);
  dt.Columns.Add(bookwriter);
  dt.Columns.Add(publication);
  dt.Columns.Add(publishday);
  dt.Columns.Add(pictureURL);

  addNewRow("창업자의 딜레마", "노암 와서먼", "에코리브르", "2013년 2월", 
                  ResolveUrl("~/Images/changup.jpg"), dt);
  addNewRow("이코노믹 띵킹(Economic Thinking)", "로버트 프랭크", "웅진지식하우스", 
                  "207년 9월", ResolveUrl("~/Images/economicthinking.jpg"), dt);
  addNewRow("연어이야기", "안도현", "문학동네", "2010년 5월", 
                  ResolveUrl("~/Images/salmon2.jpg"), dt);

  return dt;
}

private void addNewRow(string inbookname, string inwriter, string inpublication, 
                                string inpublishday, string inpicURL, DataTable dt)
{
  DataRow dr = dt.NewRow();
  dr[0] = inbookname;
  dr[1] = inwriter;
  dr[2] = inpublication;
  dr[3] = inpublishday;
  dr[4] = inpicURL;

  dt.Rows.Add(dr);
}

위와 같이 문자열 형태의 입,출력값들을 받는 ResolveUrl() 메서드를 이용하여 DataTable에 
이미지들의 경로를 저장한 후 간단한게 GridView에 바인딩합니다. 
그리고 마지막으로 GridView의 소스(source) 코드 부분을 다음과 같이 작성합니다.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
  <Columns>
    <asp:BoundField DataField="bookname" HeaderText="책이름"/>                
    <asp:BoundField DataField="bookwriter" HeaderText="저자"/>                
    <asp:BoundField DataField="publication" HeaderText="출판사"/>            
    <asp:BoundField DataField="publishday" HeaderText="발행일"/>
    <asp:ImageField DataImageUrlField="PictureURL" HeaderText="이미지">
    </asp:ImageField>
  </Columns>
</asp:GridView>

그러면 다음과 같이 가볍게 이미지가 나타나게 됩니다.


위의 결과에 디자인 부분이나 PDF 파일 생성은 여러분들이 응용해보기 바랍니다.