기존의 ASP.NET 1.x 버전에서 ASP.NET 2.0 버전의 증가 때에는 많은 유용한 컨트롤이 추가된 반면에, ASP.NET 3.5에서는 그다지 ASP.NET 2.0과의 차이점을 느끼지 못할 정도로 변화된 점이 없는데요.... 그래도 ASP.NET 3.5에 새롭게 추가된 ListView 컨트롤에 대해서 짧막하게나마 설명을 드리고자 합니다.
ListView 컨트롤 Part1
ListView 컨트롤은 새롭게 ASP.NET 3.5에서 추가된 데이터 바운드 컨트롤로써, GridView 컨트롤과 거의 기능이 유사하지만 좀 더 개발자에게 유연하게 프로그래밍을 할 수 있는 기능을 제공하는 컨트롤입니다.
ListView 컨트롤에서 내용을 출력하기 위한 템플릿의 종류는 여러가지가 있으며, 이중 LayoutTemplate 템플릿과 ItemTemplate 템플릿은 필수적으로 포함되어야 합니다. ListView 컨트롤에서 사용할 수 있는 템플릿의 종류와 설명은 아래의 테이블과 같습니다. (아래의 테이블은 MSDN의 ListView 클래스에 정의된 설명을 그대로 사용하였습니다.)
|
템플릿명 |
설명 |
| LayoutTemplate | ItemTemplate 또는 GroupTemplate 템플릿에 정의된 내용을 포함할 table, div 또는 span 요소와 같은 컨테이너 개체를 정의하는 루트 템플릿입니다. 이 템플릿에는 DataPager 개체도 포함될 수 있습니다. |
| ItemTemplate |
개별 항목에 대해 표시할 데이터 바인딩된 내용을 정의합니다. |
| ItemSeparatorTemplate |
개별 항목 사이에 렌더링할 내용을 정의합니다. |
| GroupTemplate | ItemTemplate 및 EmptyItemTemplate 템플릿에 정의된 내용을 포함할 테이블 행(tr), div 또는 span 요소와 같은 컨테이너 개체를 정의합니다. 그룹에 표시되는 항목 수는 GroupItemCount 속성에 의해 지정됩니다. |
| GroupSeparatorTemplate | 항목 그룹 사이에 렌더링할 내용을 정의합니다. |
| EmptyItemTemplate | GroupTemplate 템플릿이 사용된 경우 빈 항목에 대해 렌더링할 내용을 정의합니다. 예를 들어, GroupItemCount 속성이 5로 설정되어 있고, 데이터 소스에서 반환된 전체 항목 수가 8개이면 ListView 컨트롤에 표시되는 마지막 데이터 그룹에는 ItemTemplate 템플릿에 지정된 3개의 항목과 EmptyItemTemplate 템플릿에 지정된 2개의 항목이 포함됩니다. |
| EmptyDataTemplate | 데이터 소스에서 데이터를 반환하지 않는 경우 렌더링할 내용을 정의합니다. |
| SelectedItemTemplate | 선택한 항목을 다른 항목과 구별하기 위해 선택한 데이터 항목에 대해 렌더링할 내용을 정의합니다. |
| AlternatingItemTemplate | 연속된 항목을 쉽게 구별하기 위해 대체 항목에 대해 렌더링할 내용을 정의합니다. |
| EditItemTemplate | 항목을 편집할 때 렌더링할 내용을 정의합니다. EditItemTemplate 템플릿이 ItemTemplate 템플릿 대신 편집 중인 데이터 항목에 대해 렌더링됩니다. |
| InsertItemTemplate | 항목을 삽입하기 위해 렌더링할 내용을 정의합니다. InsertItemTemplate 템플릿이 ItemTemplate 템플릿 대신 ListView 컨트롤에 표시된 항목의 처음이나 끝에서 렌더링됩니다. ListView 컨트롤의 InsertItemPosition 속성을 사용하여 InsertItemTemplate 템플릿의 렌더링 위치를 지정할 수 있습니다. |
우선, ListView 컨트롤에서 사용할 데이터를 저장하는 테이블을 만들어보도록 하겠습니다. 테이블명은 "VIDEOLIST_ASPNET35"이며, 아래의 실행하여 데이터를 테이블에 추가하도록 합니다. (이미지는 Images 폴더 아래에 미리 저장을 시켜 놓았으며, 필요하신 분은 ASP.NET 3.5 VIDEOS에 가셔서 이미지를 다운로드하시면 됩니다.)
insert into videolist_aspnet35 values ('ASP.NET AJAX Support in Visual Studio 2008', 'You will get a quick overview of the inclusion of ASP.NET AJAX into Visual Studio 2008 (Orcas) and .NET 3.5. This will be demonstrated by using Visual Studio 2008 and the building of web site application.', 'images/video-224.jpg')
insert into videolist_aspnet35 values ('The ListView Control', 'By creating a new website, I will demonstrate the new ListView control. Because the ListView is data drive, we will need a data source. You can use any data source: SQL, object data, link data or XAML. I will use my blog as the data source in this video.', 'images/video-225.jpg')
insert into videolist_aspnet35 values ('The DataPager Control', 'Generally the DataPager control is used with the ListView control. The ListView control is data driven. First create a ListView control and provide it some data. Next drop the DataPager control onto the page to enhance the web page functionally. If you have not watched the ListView control How-Do-I video it would be best to review it before using the DataPager control.', 'images/video-221.jpg')
insert into videolist_aspnet35 values ('Visual Studio 2008 and Nested Masterpages', 'I will use a web template from oswd.org to demonstrate the use of Master Pages and how they are supported in Visual Studio 2008. Specifically, I will show the inheritance features by using two Master Pages.', 'images/video-226.jpg')
insert into videolist_aspnet35 values ('New Designer Support in Visual Studio 2008', 'In this video I will demonstrate several of the new designer features in Visual Studio 2008.', 'images/video-220.jpg')
|
위의 코드를 실행시킨 후 "VIDEOLIST_ASPNET35" 테이블에 입력된 데이터는 아래와 같이 표현됩니다.
ListView 컨트롤에서 사용하기 위해서 SqlDataSource 컨트롤을 이용하여 "VIDEOLIST_ASPNET35" 테이블 정보를 연결시키도록 하겠습니다. SqlDataSource 컨트롤을 웹 폼에 추가한 후, SqlDataSource의 스마트 태그를 이용하여 "데이터 소스 구성(Configure Data Source...)" 메뉴를 이용하여 데이터 소스 구성 마법사를 실행시킨 후, 필요한 정보를 입력하여 데이터 소스 구성 마법사를 종료합니다.
다음으로, 데이터를 출력하기 위한 ListView 컨트롤을 도구 상자에서 드래그 앤 드랍으로 웹 폼에 위치시킨 후, 위에서 설명한 ListView 컨트롤의 템플릿 중에서 필수 템플릿인 LayoutTemplate 템플릿과 ItemTemplate 템플릿을 사용하여 데이터를 출력하는 코드를 다음과 같이 작성합니다.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListViewControlEx.aspx.cs" Inherits="ListViewControlEx" %> <!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>ListView Control Example</title> <style type="text/css"> .td_header { border-top:1px solid gray;border-bottom:1px solid gray;background-color:#D5D5D5;text-align:center; } .td_item {border-bottom:1px dotted gray;} </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" ItemPlaceholderID="phItemList"> <LayoutTemplate> <table width="550px" cellpadding="0" cellspacing="0" border="0"> <tr valign="middle"> <td class="td_header" style="width:40%">VideoImage</td> <td class="td_header" style="width:60%">VideoDescription</td> </tr> <asp:PlaceHolder ID="phItemList" runat="server"></asp:PlaceHolder> </table> </LayoutTemplate> <ItemTemplate> <tr valign="middle"> <td class="td_item" style="width:40%"> <asp:Image ID="ImgVideo" runat="server" ImageAlign="AbsMiddle" ImageUrl='<%#Eval("VideoImageSrc")%>' /> </td> <td class="td_item" style="width:60%"> <strong><%#Eval("VideoName")%></strong><hr /> <p><%#Eval("VideoDesc")%></p> </td> </tr> </ItemTemplate> </asp:ListView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ArticleDataBaseConnectionString %>" SelectCommand="SELECT [VideoID], [VideoDesc], [VideoName], [VideoImageSrc] FROM [VIDEOLIST_ASPNET35]"></asp:SqlDataSource> </div> </form> </body> </html>
|
위의 코드를 바탕으로 ListView 컨트롤이 적용된 웹 브라우저의 화면을 보면 다음과 같이 데이터가 표현되게 됩니다.
위에서 보는 것과 같이 GridView 컨트롤을 이용하여 리스트 화면을 출력하는 것보다는 좀 더 HTML에 관련된 코드를 개발자가 손쉽게 적용할 수 있도록 되어 있는 것을 확인할 수 있습니다.
<주의>
여러분이 위와 같이 코드를 작성한 후 브라우저에서 볼 경우에 간혹 아래와 같은 오류를 만나게 될 수도 있습니다.
위와 같은 오류는 ListView 컨트롤에는 ItemPlaceholderID라는 속성이 반드시 지정되어야 하는데, 지정이 되지 않아서 발생하는 오류입니다. 이는, LayoutTemplate 템플릿에 ItemTemplate 템플릿에 정의된 내용을 출력해주기 위한 특정 자리를 지정하는 컨트롤을 ItemPlaceholderID 속성에 반드시 지정해야하기 때문입니다. 일반적으로, ItemPlaceholderID 속성에 지정되는 컨트롤은 화면에 어떠한 HTML 코드도 표현하지 않는 PlaceHolder 컨트롤을 이용하게 되며, <코드 2>에서도 PlaceHolder 컨트롤을 이용하였습니다. 또는 ListView 컨트롤에 ItemPlaceholderID 속성을 지정하지 않을 경우에는 LayoutTemplate 템플릿에 정의된 컨트롤 중 ItemTemplate 템플릿에 정의된 내용을 출력해주기 위한 컨트롤의 ID를 "itemPlaceholder"로 지정해주면 됩니다.
LayoutTemplate 템플릿과 ItemTemplate 템플릿은 위에서 간단하게 설명드렸으며, 사용 방법 또한 그렇게 어렵지 않으므로 별도의 설명은 생략하도록 하겠습니다. 이제부터 ListView 컨트롤에서 사용할 수 있는 다른 템플릿에 대해서 간단하게 설명을 드리도록 하겠습니다.
1. ItemSeparatorTemplate 템플릿
: ItemSeparatorTemplate 템플릿을 사용하면, 렌더링 시에 ItemTemplate 템플릿 사이에 ItemSeparatorTemplate 템플릿에 정의된 내용이 화면에 출력되게 됩니다.
|
<ItemSeparatorTemplate> <tr> <td class="td_seperate" style="width:100%" colspan="2"> </td> </tr> </ItemSeparatorTemplate>
|
위의 ItemSeparatorTemplate 템플릿을 적용한 ListView 컨트롤의 화면은 다음과 같이 나타나게 됩니다.
2. GroupTemplate 템플릿
: GroupTemplate 템플릿을 사용하면, 화면 출력 시에 바둑판식(?)의 레이아웃을 만들 수 있습니다. 이는 DataList 컨트롤의 RepeatColumns 속성과 RepeatDirection 속성을 사용한 것과 같은 효과를 나타낼 수 있습니다. GroupTemplate 템플릿을 사용하기 위해서는 ListView 컨트롤의 GroupPlaceholderID 속성에 LayoutTemplate 템플릿에 GroupTemplate 템플릿에 정의된 내용을 출력해주기 위한 특정 자리를 지정하는 컨트롤을 ItemPlaceholderID 속성과 마찬가지로 지정해야 합니다. 그 후에 GroupTemplate 템플릿 안에 ItemTemplate 템플릿에 정의된 내용을 출력해주기 위한 컨트롤을 ListView 컨트롤의 ItemPlaceholderID 속성에 정의합니다. (또는 LayoutTemplate에 GroupTemplate 템플릿에 정의된 내용을 출력해주기 위한 컨트롤의 ID를 "groupPlaceholder"로 지정하고, GroupTemplate 템플릿에서 표현하기 위한 ItemTemplate 템플릿에 정의된 내용을 출력해주기 위한 컨트롤의 ID를 "itemPlaceholder"로 지정해주면 됩니다.). ListView 컨트롤의 GroupItemCount 속성을 이용하여 화면에 출력할 반복 회수를 지정할 수 있습니다. 다음의 코드는 GroupTemplate 템플릿을 사용한 ListView의 코드를 보여주고 있습니다.
|
<asp:ListView ID="ListView2" runat="server" DataSourceID="SqlDataSource1" GroupPlaceholderID="phGroupList" ItemPlaceholderID="phItemList" GroupItemCount="2"> <LayoutTemplate> <table width="600px" cellpadding="0" cellspacing="0" border="0"> <tr valign="middle"> <td class="td_header" style="width:20%">VideoImage</td> <td class="td_header" style="width:30%">VideoDescription</td> <td class="td_header" style="width:20%">VideoImage</td> <td class="td_header" style="width:30%">VideoDescription</td> </tr> <asp:PlaceHolder ID="phGroupList" runat="server"></asp:PlaceHolder> </table> </LayoutTemplate> <GroupTemplate> <tr valign="middle"> <asp:PlaceHolder ID="phItemList" runat="server"></asp:PlaceHolder> </tr> </GroupTemplate> <ItemTemplate> <td style="width:20%;text-align:center;"> <asp:Image ID="ImgVideo" runat="server" ImageAlign="AbsMiddle" ImageUrl='<%#Eval("VideoImageSrc")%>' /> </td> <td style="width:30%"> <strong><%#Eval("VideoName")%></strong><hr /> <p><%#Eval("VideoDesc")%></p> </td> </ItemTemplate> </asp:ListView>
|
GroupTemplate 템플릿을 사용한 ListView 컨트롤의 화면은 다음과 같습니다.
3. GroupSeparatorTemplate 템플릿
: GroupSeparatorTemplate 템플릿은 ItemSeparatorTemplate 템플릿과 마찬가지의 역할을 하며, 렌더링 시에 GroupTemplate 템플릿 사이에 GroupSeparatorTemplate 템플릿에 정의된 내용이 화면에 출력되게 됩니다. GroupSeparatorTemplate 템플릿을 위한 코드를 다음과 같이 작성한 후, 웹 브라우저에서 보면 아래의 화면과 같이 표현되게 됩니다.
|
<GroupSeparatorTemplate> <tr> <td class="td_seperate" style="width:100%" colspan="4"> </td> </tr> </GroupSeparatorTemplate>
|
4. EmptyItemTemplate 템플릿
: EmptyItemTemplate 템플릿은 GroupTemplate 템플릿을 사용한 경우에, 빈 항목에 렌더링될 내용을 정의하는 템플릿입니다. ListView 컨트롤의 GroupItemCount 속성에 2를 지정하였고, 테이블에 들어있는 데이터는 총 5개이므로, 마지막 데이터를 출력할 경우 우측의 TableCell에는 값이 없게 됩니다. 이러한 빈 TableCell 부분을 정의해주는 템플릿입니다. EmptyItemTemplate 템플릿을 사용하는 코드는 아래와 같습니다.
|
<EmptyItemTemplate> <td style="width:50%" colspan="2"> <div style="text-align:center;border:1px solid purple;"><b>NO DATA</b></div> </td> </EmptyItemTemplate>
|
EmptyItemTemplate 템플릿을 사용한 후, 빈 항목에 렌더링되는 화면은 위의 코드에 정의한 것과 같이 "NO DATA"라는 항목이 아래의 화면과 같이 나타나게 됩니다.
5. EmptyDataTemplate 템플릿
: EmptyDataTemplate 템플릿은 반환되는 데이터가 없을 경우에 화면에 표시되는 내용을 정의하는 템플릿입니다. SqlDataSource의 쿼리를 변경하여 반환되는 데이터가 없게 한 후, 아래와 같이 EmptyDataTemplate 템플릿을 추가한 후 데이터가 없을 경우에 화면에 보여지기 위한 HTML 코드를 작성합니다.
|
<EmptyDataTemplate> <table width="600px" cellpadding="0" cellspacing="0" border="0"> <tr valign="middle"> <td class="td_header" style="width:20%">VideoImage</td> <td class="td_header" style="width:30%">VideoDescription</td> <td class="td_header" style="width:20%">VideoImage</td> <td class="td_header" style="width:30%">VideoDescription</td> </tr> <tr valign="middle"> <td style="width:100%" colspan="4" class="td_item"> <center><b>NO DATA</b></center> </td> </tr> </table> </EmptyDataTemplate>
|
EmptyDataTemplate 템플릿에 의해서 데이터가 없을 경우에는 아래의 화면과 같이 보여지게 됩니다.
<주의>
EmptyDataTemplate 템플릿이 사용되는 경우는 LayoutTemplate 템플릿에 정의된 내용도 나오지 않기 때문에 이에 대한 처리도 같이 해 주어야 합니다.
6. AlternatingItemTemplate 템플릿
: AlternatingItemTemplate 템플릿은 화면에 출력되는 데이터의 정보를 구별하기 위한 내용을 정의하는 템플릿입니다. 여러분들도 아시다시피, 홀수번째의 항목은 ItemTemplate 템플릿에 정의된 코드가 화면에 보여지게 되며, 짝수번째의 항목은 AlternatingItemTemplate 템플릿을 사용할 경우 AlternatingItemTemplate 템플릿에 정의된 코드가 보여지게 됩니다.
|
<AlternatingItemTemplate> <tr valign="middle"> <td style="width:40%;text-align:center;" class="td_alteritem"> <asp:Image ID="ImgVideo" runat="server" ImageAlign="AbsMiddle" ImageUrl='<%#Eval("VideoImageSrc")%>' /> </td> <td style="width:60%" class="td_alteritem"> <strong><%#Eval("VideoName")%></strong><hr /> <p><%#Eval("VideoDesc")%></p> </td> </tr> </AlternatingItemTemplate>
|
AlternatingItemTemplate 템플릿을 사용한 ListView 컨트롤의 화면은 아래와 같습니다.
이상으로, 간단하나게마 ListView 컨트롤에서 사용할 수 있는 템플릿에 대해서 알아보았습니다. 여기에서 설명드리지 못한 SelectedItemTemplate 템플릿, EditItemTemplate 템플릿, 그리고 InsertItemTemplate 템플릿은 추후 작성할 ListView 컨트롤의 Part 2에서 설명을 드리도록 하겠습니다.
:{3} 
({4})