ListView 웹 서버 컨트롤 개요

  • 아티클

업데이트: 2007년 11월

ASP.NET ListView 컨트롤을 사용하면 데이터 소스에서 반환되는 데이터 항목에 바인딩하여 해당 항목을 표시할 수 있습니다. 데이터는 페이지에 표시할 수 있습니다. 항목은 개별적으로 표시하거나 그룹화할 수 있습니다.

ListView 컨트롤에서는 템플릿과 스타일을 사용하여 정의하는 형식으로 데이터를 표시합니다. 이 컨트롤은 DataList 및 Repeater 컨트롤과 마찬가지로 모든 반복적인 구조의 데이터에 대해 유용합니다. 그러나 이러한 컨트롤과 달리 ListView 컨트롤을 사용하면 사용자가 코드 없이 데이터를 편집, 삽입, 삭제, 정렬 및 페이징하도록 할 수 있습니다.

이 항목의 내용은 다음과 같습니다.

  • ListView 컨트롤에 데이터 바인딩

  • ListView 컨트롤의 템플릿 만들기

  • 데이터 페이징

  • 데이터 정렬

  • 데이터 수정

  • ListView 항목에 스타일 적용

  • 클래스 참조

  • 코드 예제

  • 추가 리소스

ListView 컨트롤에 데이터 바인딩

ListView 컨트롤은 다음과 같은 방식으로 바인딩할 수 있습니다.

  • DataSourceID 속성 사용. 이 방법을 사용하면 ListView 컨트롤을 SqlDataSource 컨트롤 등의 데이터 소스 컨트롤에 바인딩할 수 있습니다. 이 경우 ListView 컨트롤에서 데이터 소스 컨트롤의 기능을 활용할 수 있으므로 이 방법을 사용하는 것이 좋습니다. 또한 정렬, 페이징, 삽입, 삭제 및 업데이트를 위한 기본 제공 기능을 얻을 수 있습니다. 뿐만 아니라 이 접근 방식을 사용하면 양방향 바인딩 식을 사용할 수도 있습니다. 데이터 소스 컨트롤에 대한 자세한 내용은 데이터 소스 컨트롤 개요를 참조하십시오.

  • DataSource 속성 사용. 이 방법을 사용하면 ADO.NET 데이터 집합과 데이터 판독기 그리고 컬렉션 등의 메모리 내 구조가 포함된 다양한 개체에 바인딩할 수 있습니다. 이 방법을 사용하려면 정렬, 업데이트 및 페이징 등의 추가 기능을 위한 코드를 작성해야 합니다.

맨 위로 이동

ListView 컨트롤의 템플릿 만들기

ListView 컨트롤에 의해 표시되는 항목은 템플릿을 통해 정의되며, 이는 DataList 및 Repeater 컨트롤과도 비슷합니다. ListView 컨트롤을 사용하면 데이터를 개별 항목으로 표시하거나 그룹에 표시할 수 있습니다.

ListView 컨트롤의 기본(루트) 레이아웃은 LayoutTemplate 템플릿을 사용하여 정의합니다. LayoutTemplate에는 데이터에 대한 자리 표시자 역할을 하는 컨트롤이 들어 있어야 합니다. 예를 들어 레이아웃 템플릿에는 ASP.NET Table, Panel 또는 Label 컨트롤이 포함될 수 있습니다. 또한 runat 특성이 "server"로 설정된 HTML table, div 또는 span 요소도 포함될 수 있습니다. 이러한 컨트롤에는 ItemTemplate 템플릿에서 정의한 대로 각 항목에 대한 출력이 포함되며, 이 템플릿은 GroupTemplate 템플릿을 통해 정의되는 내용에 그룹화될 수 있습니다.

개별 항목의 내용은 ItemTemplate 템플릿에서 정의합니다. 이 템플릿에는 대개 데이터 열 또는 다른 개별 데이터 요소에 대해 데이터 바인딩된 컨트롤이 들어 있습니다.

항목 그룹화

GroupTemplate 템플릿을 사용하여 ListView 컨트롤에서 항목을 선택적으로 그룹화할 수 있습니다. 일반적으로 항목의 그룹화는 바둑판식 테이블 레이아웃을 만들기 위해 수행합니다. 바둑판식 테이블 레이아웃의 항목은 GroupItemCount 속성에 지정된 횟수만큼 행에서 반복됩니다. 바둑판식 테이블 레이아웃을 만들기 위해 레이아웃 템플릿에는 ASP.NET Table 컨트롤이나 runat 특성이 "server"로 설정된 HTML table 요소가 포함될 수 있습니다. 그러면 그룹 템플릿에는 ASP.NET TableRow 컨트롤이나 HTML tr 요소가 포함될 수 있습니다. 항목 템플릿에는 ASP.NET TableCell 컨트롤이나 HTML td 요소 내에 있는 개별 컨트롤이 포함될 수 있습니다.

EditItemTemplate 템플릿은 사용자가 기존 데이터 항목을 수정할 수 있도록 하는 데이터 바인딩된 UI를 제공하는 데 사용할 수 있습니다. 또한 InsertItemTemplate 템플릿은 사용자가 새 데이터 항목을 추가할 수 있도록 하는 데이터 바인딩된 UI를 정의하는 데 사용할 수 있습니다. 자세한 내용은 이 항목 뒷부분에서 데이터 수정을 참조하십시오.

사용 가능한 템플릿

다음 표에서는 ListView 컨트롤에 사용하는 모든 템플릿을 보여 줍니다.

  • LayoutTemplate
    컨트롤의 기본 레이아웃을 정의하는 루트 템플릿을 식별합니다. 테이블 행(tr), div 또는 span 요소 같은 자리 표시자 개체가 포함되어 있습니다. 이 요소는 ItemTemplate 템플릿 또는 GroupTemplate 템플릿에 정의된 내용으로 바뀝니다. 또한 DataPager 개체도 포함될 수 있습니다.

  • ItemTemplate
    단일 항목에 대해 표시할 데이터 바인딩된 내용을 식별합니다.

  • ItemSeparatorTemplate
    단일 항목 간에 렌더링할 내용을 식별합니다.

  • GroupTemplate
    그룹 레이아웃의 내용을 식별합니다. ItemTemplate 및 EmptyItemTemplate 템플릿 등의 다른 템플릿에 정의된 내용으로 바뀔 테이블 셀(td), div 또는 span 같은 자리 표시자가 개체가 포함되어 있습니다.

  • GroupSeparatorTemplate
    항목 그룹 간에 렌더링할 내용을 식별합니다.

  • EmptyItemTemplate
    GroupTemplate 템플릿이 사용된 경우 빈 항목에 대해 렌더링할 내용을 식별합니다. 예를 들어 GroupItemCount 속성이 5로 설정되어 있고, 데이터 소스에서 반환된 전체 항목 수가 8개이면 ListView 컨트롤에 표시되는 마지막 데이터 행에는 ItemTemplate 템플릿에 지정된 3개의 항목과 EmptyItemTemplate 템플릿에 지정된 2개의 항목이 포함됩니다.

  • EmptyDataTemplate
    데이터 소스에서 데이터를 반환하지 않은 경우 렌더링할 내용을 식별합니다.

  • SelectedItemTemplate
    선택한 항목을 표시된 다른 항목과 구별하기 위해 선택한 데이터 항목에 대해 렌더링할 내용을 식별합니다.

  • AlternatingItemTemplate
    연속된 항목을 쉽게 구별하기 위해 대체 항목에 대해 렌더링할 내용을 식별합니다.

  • EditItemTemplate
    항목을 편집할 때 렌더링할 내용을 식별합니다. EditItemTemplate 템플릿이 ItemTemplate 템플릿 대신 편집 중인 데이터 항목에 대해 렌더링됩니다.

  • InsertItemTemplate
    항목을 삽입할 때 렌더링할 내용을 식별합니다. InsertItemTemplate 템플릿이 ItemTemplate 템플릿 대신 ListView 컨트롤에 표시된 항목의 처음이나 끝에서 렌더링됩니다. ListView 컨트롤의 InsertItemPosition 속성을 사용하여 InsertItemTemplate 템플릿의 렌더링 위치를 지정할 수 있습니다.

항목 템플릿 만들기

다음 예제에서는 항목 템플릿의 기본 구조를 보여 줍니다.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table  id="table1"  >
      <tr  id="itemPlaceholder" ></tr>
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr runat="server>
      <td >
        <%-- Data-bound content. --%>
        <asp:Label ID="NameLabel"  
          Text='<%#Eval("Name") %>' />
      </td>
    </tr>
  </ItemTemplate>
</asp:ListView>

항목을 개별적으로 표시하려면 LayoutTemplate 템플릿을 서버측 컨트롤에 추가하고 컨트롤의 ID 속성을 itemPlaceholder로 설정합니다. 이 컨트롤은 대개 ItemTemplate 템플릿 같은 다른 템플릿에 대한 자리 표시자 역할만 합니다. 따라서 이 컨트롤은 런타임에 다른 템플릿의 내용으로 바뀝니다.

참고:

ItemPlaceholderID 속성을 새 값으로 설정하여 항목 컨테이너를 식별하는 데 사용되는 ID 속성의 값을 변경할 수 있습니다.

레이아웃 템플릿을 정의한 후에는 대개 데이터 바인딩된 내용을 표시하는 컨트롤이 포함된 ItemTemplate 템플릿을 추가합니다. Eval 메서드를 사용하여 컨트롤을 데이터 소스의 값에 바인딩함으로써 각 항목을 표시하는 데 사용할 태그를 지정할 수 있습니다. Eval 메서드에 대한 자세한 내용은 데이터 바인딩 식 개요을 참조하십시오.

항목 간에 포함할 내용을 식별하는 ItemSeparatorTemplate 템플릿을 사용하여 렌더링할 내용을 추가로 제공할 수 있습니다.

다음 그림에서는 항목당 여러 테이블 행을 사용하여 데이터 소스의 데이터를 표시하는 레이아웃을 보여 줍니다.

다음 예제에서는 레이아웃을 만드는 방법을 보여 줍니다.

<asp:ListView  ID="EmployeesListView" 
    DataSourceID="EmployeesDataSource" 
    DataKeyNames="EmployeeID">
  <LayoutTemplate>
    <table cellpadding="2"  id="tblEmployees" 
        style="width:460px">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="3">
      <Fields>
        <asp:NumericPagerField
          ButtonCount="5"
          PreviousPageText="<--"
          NextPageText="-->" />
      </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
     <tr >
       <td valign="top" colspan="2" align="center" 
           class="EmployeeName">
         <asp:Label ID="FirstNameLabel"  
           Text='<%#Eval("FirstName") %>' />
         <asp:Label ID="LastNameLabel"  
           Text='<%#Eval("LastName") %>' />
       </td>
     </tr>
     <tr style="height:72px" >
       <td valign="top" class="EmployeeInfo">
         <asp:Label ID="JobTitleLabel"  
             Text='<%#Eval("JobTitle") %>' />
         <br />
         <asp:HyperLink ID="EmailAddressLink"  
             Text='<%#Eval("EmailAddress") %>'  
             href='<%#"mailto:" + Eval("EmailAddress") %>' />
         <br />
         <asp:Label ID="PhoneLabel"  
             Text='<%#Eval("Phone") %>' />
       </td>
       <td valign="top" class="EmployeeAddress">
         <asp:Label ID="AddressLine1Label"  
             Text='<%#Eval("AddressLine1") %>' />
         <br />
         <asp:Panel ID="AddressLine2Panel"  
            Visible='<%#Eval("AddressLine2").ToString() != String.Empty %>'>
         <asp:Label ID="AddressLine2Label"  
            Text='<%#Eval("AddressLine2").ToString()%>'  />
         <br />
         </asp:Panel>
         <asp:Label ID="CityLabel"  
           Text='<%#Eval("City") %>' />,
         <asp:Label ID="StateProvinceNameLabel"  
           Text='<%#Eval("StateProvinceName") %>' />
         <asp:Label ID="PostalCodeLabel"  
           Text='<%#Eval("PostalCode") %>' />
         <br />
         <asp:Label ID="CountryRegionNameLabel"  
           Text='<%#Eval("CountryRegionName") %>' />
       </td>
     </tr>
   </ItemTemplate>
</asp:ListView>

그룹 템플릿 만들기

다음 예제에서는 그룹 템플릿을 만드는 방법을 보여 줍니다.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1" 
    GroupItemCount="5">
  <LayoutTemplate>
    <table  id="table1">
      <tr  id="groupPlaceholder">
      </tr>
    </table>
  </LayoutTemplate>
  <GroupTemplate>
    <tr  id="tableRow">
      <td  id="itemPlaceholder" />
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td >
      <%-- Data-bound content. --%>
      <asp:Label ID="NameLabel"  
          Text='<%#Eval("Name") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

항목을 그룹에 표시하려면 해당 그룹에 대한 자리 표시자 역할을 하는 LayoutTemplate 템플릿에 서버 컨트롤을 사용합니다. 예를 들어 TableRow 컨트롤을 사용할 수 있습니다. 자리 표시자 컨트롤의 ID 속성은 groupPlaceholder로 설정합니다. 이 자리 표시자 컨트롤은 런타임에 GroupTemplate 템플릿의 내용으로 바뀝니다.

그런 다음 자리 표시자 컨트롤을 추가하고 해당 ID 속성을 itemPlaceholder로 설정합니다. 이 컨트롤은 대개 ItemTemplate 템플릿 같은 다른 템플릿에 대한 자리 표시자 역할만 합니다. 따라서 이 컨트롤은 런타임에 다른 템플릿의 내용으로 바뀝니다. 내용은 ListView 컨트롤의 GroupItemCount 속성에 지정된 횟수만큼 반복됩니다.

마지막으로 데이터 바인딩된 내용이 있는 ItemTemplate 템플릿을 추가하여 각 항목의 포함하는 컨트롤 내에 표시합니다.

참고:

GroupPlaceholderID 속성에 대해 새 값을 설정하여 그룹 자리 표시자를 식별하는 데 사용되는 ID 속성의 값을 변경할 수 있습니다.

항목 간의 구분 기호는 ItemSeparatorTemplate 템플릿을 사용하여 지정할 수 있으며, 그룹 간의 구분 기호는 GroupSeparatorTemplate 속성을 사용하여 지정할 수 있습니다.

다음 그림에서는 행마다 데이터 소스의 여러 항목을 표시하는 레이아웃을 보여 줍니다.

다음 예제에서는 레이아웃을 만드는 방법을 보여 줍니다.

<asp:ListView  ID="ProductsListView"
    GroupItemCount="3"
    DataSourceID="ProductsSqlDataSource" DataKeyNames="ProductID">
  <LayoutTemplate>
    <table cellpadding="2" 
           id="tblProducts" style="height:320px">
      <tr  id="groupPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager"
                   PageSize="9">
       <Fields>
         <asp:NumericPagerField ButtonCount="3"
              PreviousPageText="<--"
              NextPageText="-->" />
       </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <GroupTemplate>
    <tr  id="productRow"
        style="height:80px">
      <td  id="itemPlaceholder">
      </td>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <td valign="top" align="center" style="width:100" >
      <asp:Image ID="ProductImage" 
           ImageUrl='<%#"~/images/thumbnails/" + 
               Eval("ThumbnailPhotoFileName") %>'
           Height="49" /><br />
      <asp:HyperLink ID="ProductLink" 
           Target="_blank" Text='<% #Eval("Name")%>'
           href='<%#"ShowProduct.aspx?ProductID=" + 
              Eval("ProductID") %>' />
    </td>
  </ItemTemplate>
</asp:ListView>

맨 위로 이동

데이터 페이징

사용자가 ListView 컨트롤의 데이터를 페이징할 수 있도록 하려면 DataPager 컨트롤을 사용합니다. DataPager 컨트롤은 LayoutTemplate 템플릿 내에 있거나 ListView 컨트롤 외부의 페이지에 있을 수 있습니다. DataPager 컨트롤이 ListView 컨트롤 내에 없으면 PagedControlID 속성을 ListView 컨트롤의 ID로 설정해야 합니다.

DataPager 컨트롤은 페이징 UI를 기본적으로 지원합니다. NumericPagerField 개체를 사용하면 사용자가 페이지 번호를 기준으로 데이터의 페이지를 선택하도록 할 수 있습니다. 또한 NextPreviousPagerField 개체를 사용할 수도 있습니다. 이렇게 하면 사용자가 데이터 페이지를 한 번에 하나씩 이동하거나 첫 번째 또는 마지막 데이터 페이지로 이동할 수 있습니다. 데이터 페이지의 크기는 DataPager 컨트롤의 PageSize 속성을 사용하여 설정합니다. 단일 DataPager 컨트롤 내에 하나 이상의 페이저 필드 개체를 사용할 수 있습니다.

또한 TemplatePagerField 개체를 사용하여 사용자 지정 페이징 UI를 만들 수도 있습니다. TemplatePagerField 템플릿에서 Container 속성을 사용하여 DataPager 컨트롤을 참조할 수 있습니다. 이 속성은 DataPager 컨트롤의 속성에 액세스할 수 있도록 합니다. 이러한 속성에는 시작 행 인덱스, 페이지 크기, ListView 컨트롤에 현재 바인딩된 전체 행 수가 포함됩니다.

다음 예제에서는 ListView 컨트롤의 LayoutTemplate 템플릿에 포함된 DataPager 클래스를 보여 줍니다.

<asp:ListView  ID="ListView1" 
    DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table  id=" table1">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="5">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr >
      <%-- Data-bound content. --%>
    </tr>
  </ItemTemplate>
</asp:ListView>

다음 그림에서는 NumericPagerField 개체를 사용하여 페이지 번호를 기준으로 데이터 페이지 링크가 표시된 레이아웃을 보여 줍니다.

다음 예제에서는 레이아웃을 만드는 방법을 보여 줍니다.

<asp:DataPager  ID="DataPager" PageSize="10">
  <Fields>
    <asp:NumericPagerField ButtonCount="10"
         CurrentPageLabelCssClass="CurrentPage"
         NumericButtonCssClass="PageNumbers"
         NextPreviousButtonCssClass="PageNumbers" NextPageText=" > "
         PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

다음 그림에서는 NextPreviousPagerField 개체를 사용하여 다음, 이전, 첫 번째 및 마지막 데이터 페이지 링크가 표시된 페이징 UI를 보여 줍니다. 페이징 UI에는 현재 항목 번호 범위와 전체 항목 수를 표시하는 TemplatePagerField 템플릿의 사용자 지정 내용도 포함되어 있습니다. TemplatePagerField 템플릿에는 사용자가 이동할 항목의 수를 입력할 수 있는 텍스트 상자가 들어 있습니다. 지정된 항목은 페이지에서 첫 번째 항목으로 표시됩니다.

다음 예제에서는 페이징 UI를 만드는 방법을 보여 줍니다.

<asp:DataPager  ID="EmployeesDataPager" PageSize="8">
  <Fields>
    <asp:TemplatePagerField>
      <PagerTemplate>
        &nbsp;
        <asp:TextBox ID="CurrentRowTextBox" 
             AutoPostBack="true"
             Text="<%# Container.StartRowIndex + 1%>" 
             Columns="1" 
             style="text-align:right" 
             OnTextChanged="CurrentRowTextBox_OnTextChanged" />
        to
        <asp:Label ID="PageSizeLabel"  Font-Bold="true"
             Text="<%# Container.StartRowIndex + Container.PageSize > Container.TotalRowCount ? Container.TotalRowCount : Container.StartRowIndex + Container.PageSize %>" />
        of
        <asp:Label ID="TotalRowsLabel"  Font-Bold="true"
             Text="<%# Container.TotalRowCount %>" />
      </PagerTemplate>
    </asp:TemplatePagerField>
    <asp:NextPreviousPagerField 
         ShowFirstPageButton="true" ShowLastPageButton="true"
         FirstPageText="|<< " LastPageText=" >>|"
         NextPageText=" > " PreviousPageText=" < " />
  </Fields>
</asp:DataPager>

다음 예제에서는 TemplatePagerField 템플릿에 포함된 TextBox 컨트롤의 TextChanged 이벤트에 대한 이벤트 처리기를 보여 줍니다. 처리기의 코드는 사용자가 지정하는 데이터 항목으로 이동합니다.

Protected Sub CurrentRowTextBox_OnTextChanged(ByVal sender As Object, _
        ByVal e As EventArgs) 
    Dim t As TextBox = CType(sender, TextBox)
    Dim pager As DataPager = _
        CType(EmployeesListView.FindControl("EmployeesDataPager"), _
        DataPager)
    pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, _
        pager.PageSize, True)
End Sub

protected void CurrentRowTextBox_OnTextChanged(object sender, 
    EventArgs e)
{
    TextBox t = (TextBox)sender;
    DataPager pager = 
        (DataPager)EmployeesListView.FindControl("EmployeesDataPager");
    pager.SetPageProperties(Convert.ToInt32(t.Text) - 1, 
         pager.PageSize, true);
}

맨 위로 이동

데이터 정렬

LayoutTemplate 템플릿에 단추를 추가하고 단추의 CommandName 속성을 "Sort"로 설정하여 ListView 컨트롤에 표시되는 데이터를 정렬할 수 있습니다. 단추의 CommandArgument 속성은 정렬할 열 이름으로 설정합니다. 정렬 단추를 반복해서 클릭하면 정렬 방향이 Ascending과 Descending 사이에서 전환됩니다.

정렬 단추의 CommandArgument 속성에 여러 개의 열 이름을 지정할 수 있습니다. 그러나 ListView 컨트롤은 전체 열 목록에 정렬 방향을 적용합니다. 그러므로 정렬 방향은 목록의 마지막 열에만 적용됩니다. 예를 들어 CommandArgument에 "LastName, FirstName"이 들어 있는 경우 정렬 단추를 반복해서 클릭하면 "LastName, FirstName ASC" 또는 "LastName, FirstName DESC" 같은 정렬 식이 생성됩니다.

다음 예제에서는 데이터를 성별로 정렬하는 정렬 단추가 포함된 ListView 컨트롤을 보여 줍니다.

<asp:ListView  ID="ListView1" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <asp:LinkButton  ID="SortButton" 
         Text="Sort" CommandName="Sort" CommandArgument="LastName" />
    <table  id="table1">
      <tr  id="itemPlaceholder">
      </tr>
    </table>
    <asp:DataPager  ID="DataPager" PageSize="20">
        <Fields>
          <asp:NumericPagerField ButtonCount="10"
               PreviousPageText="<--"
               NextPageText="-->" />
        </Fields>
    </asp:DataPager>
  </LayoutTemplate>
  <ItemTemplate>
    <tr >
      <td><asp:Label  ID="FirstNameLabel" 
               Text='<%# Eval("FirstName")' /></td>
      <td><asp:Label  ID="LastNameLabel" 
               Text='<%# Eval("LastName")' /></td>
    </tr>
  </ItemTemplate>
</asp:ListView>

동적으로 정렬 식 설정

ListView 컨트롤의 정렬 식을 동적으로 설정하여 사용자 지정된 정렬을 만들 수 있습니다. 이렇게 하려면 Sort 메서드를 호출하거나 Sorting 이벤트를 처리합니다.

다음 예제에서는 Sorting 이벤트에 대한 처리기를 보여 줍니다. 코드에서는 SortExpression 속성의 모든 열에 동일한 정렬 방향을 적용합니다.

Protected Sub ContactsListView_Sorting(ByVal sender As Object, _
        ByVal e As ListViewSortEventArgs)

    If (String.IsNullOrEmpty(e.SortExpression)) Then Return

    Dim direction As String = ""
    If Not (ViewState("SortDirection") Is Nothing) Then
        direction = ViewState("SortDirection").ToString()
    End If
    
    If direction = "ASC" Then
        direction = "DESC"
    Else
        direction = "ASC"
    End If

    ViewState("SortDirection") = direction

    Dim sortColumns As String() = e.SortExpression.Split(","c)
    Dim sortExpression As String = sortColumns(0) & " " & direction
    Dim i As Integer
    For i = 1 To sortColumns.Length - 1
        sortExpression += ", " & sortColumns(i) & " " & direction
    Next i
    e.SortExpression = sortExpression
    
  End Sub

protected void EmployeesListView_OnSorting(object sender, 
        ListViewSortEventArgs e)
{
    if (String.IsNullOrEmpty(e.SortExpression)) { return; }
    string direction = "";
    if (ViewState["SortDirection"] != null)
        direction = ViewState["SortDirection"].ToString();

    if (direction == "ASC")
        direction = "DESC";
    else
        direction = "ASC";

    ViewState["SortDirection"] = direction;

    string[] sortColumns = e.SortExpression.Split(',');
    string sortExpression = sortColumns[0] + " " + direction;
    for (int i = 1; i < sortColumns.Length; i++)
        sortExpression += ", " + sortColumns[i] + " " + direction;
    e.SortExpression = sortExpression;
}

맨 위로 이동

데이터 수정

사용자가 단일 데이터 항목을 편집, 삽입 또는 삭제할 수 있도록 하는 ListView 컨트롤에 대한 템플릿을 만들 수 있습니다.

사용자가 데이터 항목을 편집할 수 있게 하려면 EditItemTemplate 템플릿을 ListView 컨트롤에 추가합니다. 항목이 편집 모드로 전환되면 ListView 컨트롤에서 편집 템플릿을 사용하여 해당 항목을 표시합니다. 템플릿에는 사용자가 값을 편집할 수 있는 데이터 바인딩된 컨트롤이 포함됩니다. 예를 들어 템플릿에 사용자가 기존 값을 편집할 수 있는 텍스트 상자가 포함될 수 있습니다.

사용자가 새 항목을 삽입할 수 있게 하려면 InsertItemTemplate 템플릿을 ListView 컨트롤에 추가합니다. 편집 템플릿의 경우와 마찬가지로 삽입 템플릿에도 데이터를 입력할 수 있도록 하는 데이터 바인딩된 컨트롤이 있어야 합니다. InsertItemTemplate 템플릿은 표시된 항목의 처음이나 끝에서 렌더링됩니다. ListView 컨트롤의 InsertItemPosition 속성을 사용하여 InsertItemTemplate 템플릿의 렌더링 위치를 지정합니다.

일반적으로 사용자가 수행할 작업을 지정할 수 있도록 하려면 템플릿에 단추를 추가합니다. 예를 들어 사용자가 해당 항목을 삭제할 수 있도록 하려면 항목 템플릿에 삭제 단추를 추가합니다.

사용자가 편집 모드로 전환할 수 있도록 하려면 항목 템플릿에 편집 단추를 추가합니다. EditItemTemplate에서는 사용자가 변경 사항을 저장할 수 있도록 하는 업데이트 단추를 포함할 수 있습니다. 또한 사용자가 변경 사항을 저장하지 않고 다시 표시 모드로 전환할 수 있도록 하는 취소 버튼을 포함할 수도 있습니다.

단추가 수행하는 작업은 단추의 CommandName 속성을 설정하여 정의합니다. 다음 표에는 ListView 컨트롤에 기본 제공 동작이 포함되어 있는 CommandName 속성 값이 나열되어 있습니다.

  • Select
    선택한 항목에 대한 SelectedItemTemplate 템플릿의 내용을 표시합니다.

  • Insert
    InsertItemTemplate 템플릿에서 데이터 바인딩된 컨트롤의 내용이 데이터 소스에 저장되도록 지정합니다.

  • Edit
    ListView 컨트롤이 EditItemTemplate 템플릿을 사용하여 편집 모드로 전환하고 항목을 표시하도록 지정합니다.

  • Update
    EditItemTemplate 템플릿에서 데이터 바인딩된 컨트롤의 내용이 데이터 소스에 저장되도록 지정합니다.

  • Delete
    데이터 소스에서 항목을 삭제합니다.

  • Cancel
    현재 작업을 취소합니다. EditItemTemplate 템플릿이 표시될 때 항목이 현재 선택된 항목인 경우 작업을 취소하면 SelectedItemTemplate 템플릿이 표시되고, 그렇지 않으면 ItemTemplate 템플릿이 표시됩니다. InsertItemTemplate 템플릿이 표시되는 경우 작업을 취소하면 빈 InsertItemTemplate 템플릿이 표시됩니다.

  • (사용자 지정 값)
    기본적으로 아무런 작업도 수행하지 않습니다. CommandName 속성에 대한 사용자 지정 값을 제공한 다음 ItemCommand 이벤트에서 값을 테스트하고 작업을 수행할 수 있습니다.

편집, 삭제 및 삽입을 수행하도록 구성된 ListView 컨트롤의 예제를 보려면 연습: ListView 웹 서버 컨트롤을 사용하여 데이터 수정을 참조하십시오.

맨 위로 이동

ListView 항목에 스타일 적용

ListView 컨트롤은 BackColor 및 Font 등의 스타일 속성을 지원하지 않습니다. ListView 컨트롤에 스타일을 적용하려면 ListView 템플릿 내의 컨트롤에 CSS 클래스 또는 인라인 스타일 요소를 사용해야 합니다.

일부 개체에서는 출력의 요소에 스타일을 지정할 수 있도록 하는 속성을 지원합니다. 예를 들어 NumericPagerField 개체에는 다음과 같은 속성이 포함되어 있습니다.

  • 번호를 기준으로 데이터 페이지로 이동하는 단추에 대해 CSS 클래스 이름을 지정할 수 있도록 하는 NumericButtonCssClass 속성입니다.

  • 현재 페이지 번호에 대해 CSS 클래스 이름을 지정할 수 있도록 하는 CurrentPageLabelCssClass 속성입니다.

  • 숫자 단추의 다음 또는 이전 그룹으로 이동하는 단추에 대해 CSS 클래스 이름을 지정할 수 있도록 하는 NextPreviousButtonCssClass 속성입니다.

맨 위로 이동

클래스 참조

다음 표에서는 ListView 컨트롤과 관련된 핵심 클래스를 보여 줍니다.

클래스

설명

ListView

사용자 정의 템플릿을 사용하여 데이터 소스의 값을 표시하는 서버 컨트롤입니다. 사용자가 레코드를 선택, 정렬, 편집 및 삽입할 수 있도록 컨트롤을 구성할 수 있습니다.

ListViewItem

ListView 컨트롤의 항목을 나타내는 개체입니다.

ListViewDataItem

ListView 컨트롤의 데이터 항목을 나타내는 개체입니다.

ListViewItemType

ListView 컨트롤에 있는 항목의 기능을 식별하는 열거형입니다.

DataPager

ListView 컨트롤 등의 IPageableItemContainer 인터페이스를 구현하는 컨트롤에 대해 페이징 기능을 제공하는 서버 컨트롤입니다.

NumericPagerField

사용자가 페이지 번호를 기준으로 데이터 페이지를 선택할 수 있도록 하는 DataPager 필드입니다.

NextPreviousPagerField

사용자가 데이터 페이지를 한 번에 하나씩 이동하거나 첫 번째 또는 마지막 데이터 페이지로 이동할 수 있도록 하는 DataPager 필드입니다.

TemplatePagerField

사용자가 사용자 지정 페이징 UI를 만들 수 있도록 하는 DataPager 필드입니다.

맨 위로 이동

코드 예제

다음 단원에는 ListView 컨트롤을 사용하는 방법을 보여 주는 코드 예제가 포함되어 있습니다.

방법 및 연습 항목

연습: ListView 웹 서버 컨트롤을 사용하여 데이터 표시, 페이징 및 정렬

연습: ListView 웹 서버 컨트롤을 사용하여 데이터 수정

맨 위로 이동

참고 항목

개념

ASP.NET 데이터 바인딩 웹 서버 컨트롤 개요

데이터베이스에 바인딩

데이터 소스 컨트롤 개요

기타 리소스

ASP.NET 전역화 및 지역화

ASP.NET 내게 필요한 옵션