방법: DataList 웹 서버 컨트롤에서 항목 편집 허용

아티클
10/22/2014

업데이트: 2007년 11월

DataList 웹 서버 컨트롤의 개별 항목을 사용자가 편집할 수 있도록 할 수 있습니다. 개별 항목이 편집 모드로 설정된 경우 변경할 수 있는 값은 일반적으로 텍스트 상자나 사용자가 내용을 변경할 수 있는 다른 컨트롤에 표시됩니다.

DataList 컨트롤의 항목을 사용자가 편집할 수 있도록 하려면

DataList 컨트롤의 DataKeyField 속성을 기본 키가 포함된 데이터의 필드 이름으로 설정합니다.
ItemTemplate 및 이를 사용 중인 경우 AlternatingItemTemplate을 만든 다음 여기에 Button 웹 서버 컨트롤을 추가합니다. 이 단추의 CommandName 속성을 edit으로 설정합니다.

참고:

Button 웹 서버 컨트롤을 호출하는 모든 단계에서 LinkButton 또는 ImageButton 컨트롤을 사용할 수 있습니다.

참고:
Button 웹 서버 컨트롤을 호출하는 모든 단계에서 LinkButton 또는 ImageButton 컨트롤을 사용할 수 있습니다.

다음을 포함하여 DataList 컨트롤에 대해 EditItemTemplate을 만듭니다.

사용자가 변경할 수 있는 모든 값에 대한 컨트롤. 예를 들어 모든 문자 및 숫자 데이터에 대한 TextBox 컨트롤을 포함합니다. 다음 예제와 같이 선언적 Eval 메서드를 사용하여 각 컨트롤이 바인딩된 필드를 지정합니다.

보안 정보:
이 예제에는 사용자 입력을 허용하는 텍스트 상자가 있으므로 보안상 위험할 수 있습니다. 기본적으로 ASP.NET 페이지에서는 사용자 입력 내용에 스크립트나 HTML 요소가 포함되어 있지 않은지 유효성을 검사합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

<asp:TextBox ID="TextBox1" 

  Text='<%# Eval("ProductName") %>' />

Text 속성이 "Update"로 설정되고 CommandName 속성이 update로 설정된(대/소문자 구분) Button 컨트롤.
Text 속성이 "Cancel"로 설정되고 CommandName 속성이 cancel로 설정된 Button 컨트롤.

Update 단추를 클릭하면 편집이 종료되고 변경 내용이 저장됩니다. Cancel 단추를 클릭하면 변경 내용을 저장하지 않고 편집을 끝냅니다.

다음과 같은 작업을 수행하는 코드를 작성합니다.
- DataList 컨트롤의 EditItemIndex 속성을 편집 모드로 두기 위해 해당 항목의 인덱스 값으로 설정하는 DataList 컨트롤의 EditCommand 이벤트를 처리합니다. Item 개체의 ItemIndex 속성을 통해 사용자가 클릭한 항목의 인덱스를 사용할 수 있습니다. 그런 다음 컨트롤의 DataBind 메서드를 호출합니다.
- DataList 컨트롤의 EditItemIndex 속성을 -1로 설정한 다음 컨트롤의 DataBind 메서드를 호출하는 DataList 컨트롤의 CancelCommand 이벤트를 처리합니다.
- DataList 컨트롤의 UpdateCommand 이벤트를 처리합니다. 코드에서 현재 항목의 컨트롤의 값을 추출하고 업데이트 작업을 위해 이를 데이터 소스 컨트롤로 전달합니다. 작업 중인 데이터 소스 컨트롤의 형식에 따라 다른 추출 코드가 사용됩니다.

예제

다음 코드 예제에서는 Northwind 데이터베이스의 Categories 테이블에서 정보를 표시하기 위해 DataList 컨트롤 및 SqlDataSource 컨트롤을 사용하는 ASP.NET 페이지를 보여 줍니다. 사용자는 항목을 편집할 수 있습니다.

보안 정보:
이 예제에는 사용자 입력을 허용하는 텍스트 상자가 있으므로 보안상 위험할 수 있습니다. 기본적으로 ASP.NET 페이지에서는 사용자 입력 내용에 스크립트나 HTML 요소가 포함되어 있지 않은지 유효성을 검사합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

<%@ Page Language="VB" %>

<script >
Protected Sub DataList1_EditCommand(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs)
    DataList1.EditItemIndex = e.Item.ItemIndex
    DataList1.DataBind()
End Sub

Protected Sub DataList1_CancelCommand(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs)
    DataList1.EditItemIndex = -1
    DataList1.DataBind()
End Sub

Protected Sub DataList1_UpdateCommand(ByVal source As Object, _
        ByVal e As System.Web.UI.WebControls.DataListCommandEventArgs)
    Dim categoryID As String = _
        DataList1.DataKeys(e.Item.ItemIndex).ToString()
    Dim categoryName As TextBox = _
        CType(e.Item.FindControl("textCategoryName"), TextBox)
    Dim description As TextBox = _
        CType(e.Item.FindControl("textDescription"), TextBox)

    SqlDataSource1.UpdateParameters("original_CategoryID"). _
        DefaultValue = categoryID
    SqlDataSource1.UpdateParameters("categoryName"). _
        DefaultValue = categoryName.Text
    SqlDataSource1.UpdateParameters("Description"). _
        DefaultValue = description.Text
    SqlDataSource1.Update()
    DataList1.EditItemIndex = -1
    DataList1.DataBind()
End Sub
</script>

<html>
<head ></head>
<body>
  <form id="form1" >
    <div>
        <br />
        <asp:DataList  
            DataKeyField="CategoryID" 
            DataSourceID="SqlDataSource1" ID="DataList1"
            OnEditCommand="DataList1_EditCommand" 
            OnCancelCommand="DataList1_CancelCommand" 
            OnUpdateCommand="DataList1_UpdateCommand">
            <EditItemTemplate>
                ID: <asp:Label ID="Label1"  
                         Text='<%# Eval("CategoryID") %>'>
                    </asp:Label>
                <br />
                Name: <asp:TextBox ID="textCategoryName"  
                         Text='<%# Eval("CategoryName") %>'>
                      </asp:TextBox>
                <br />
                Description: <asp:TextBox ID="textDescription" 
                                  
                        Text='<%# Eval("Description") %>'>
                     </asp:TextBox>
                <br />
                <asp:LinkButton ID="LinkButton1"  
                    CommandName="update" >
                    Save
                </asp:LinkButton>
                 
                <asp:LinkButton ID="LinkButton2" >
                    CommandName="cancel" 
                    Cancel
                </asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel"  
                    Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" 
                     Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel"  
                    Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
                <asp:LinkButton  ID="LinkButton1" 
                    CommandName="edit" >
                    Edit
                </asp:LinkButton><br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1"  
              ConnectionString=
                  "<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], 
                 [Description] FROM [Categories]"
            UpdateCommand="UPDATE [Categories] SET [CategoryName] = 
                 @CategoryName, [Description] = @Description 
                 WHERE [CategoryID] = @original_CategoryID">
            <UpdateParameters>
              <asp:Parameter Name="CategoryName" Type="String" />
              <asp:Parameter Name="Description" Type="String" />
              <asp:Parameter Name="original_CategoryID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

<%@ Page Language="C#" %>
<script >
protected void DataList1_EditCommand(object source, 
    DataListCommandEventArgs e)
{
    DataList1.EditItemIndex = e.Item.ItemIndex;
    DataList1.DataBind();
}

protected void DataList1_CancelCommand(object source, 
    DataListCommandEventArgs e)
{
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

protected void DataList1_UpdateCommand(object source, 
    DataListCommandEventArgs e)
{
    String categoryID = 
         DataList1.DataKeys[e.Item.ItemIndex].ToString();
    String categoryName = 
         ((TextBox)e.Item.FindControl("textCategoryName")).Text;
    String description = 
         ((TextBox) e.Item.FindControl("textDescription")).Text;

    SqlDataSource1.UpdateParameters["original_CategoryID"].DefaultValue 
        = categoryID;
    SqlDataSource1.UpdateParameters["categoryName"].DefaultValue 
        = categoryName;
    SqlDataSource1.UpdateParameters["Description"].DefaultValue 
        = description;
    SqlDataSource1.Update();

    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}
</script>
<html>
<head ></head>
<body>
  <form id="form1" >
    <div>
        <br />
        <asp:DataList  
            DataKeyField="CategoryID" 
            DataSourceID="SqlDataSource1" ID="DataList1"
            OnEditCommand="DataList1_EditCommand" 
            OnCancelCommand="DataList1_CancelCommand" 
            OnUpdateCommand="DataList1_UpdateCommand">
            <EditItemTemplate>
                ID: <asp:Label ID="Label1"  
                         Text='<%# Eval("CategoryID") %>'>
                    </asp:Label>
                <br />
                Name: <asp:TextBox ID="textCategoryName"  
                         Text='<%# Eval("CategoryName") %>'>
                      </asp:TextBox>
                <br />
                Description: <asp:TextBox ID="textDescription" 
                                  
                        Text='<%# Eval("Description") %>'>
                     </asp:TextBox>
                <br />
                <asp:LinkButton ID="LinkButton1"  
                    CommandName="update" >
                    Save
                </asp:LinkButton>
                 
                <asp:LinkButton ID="LinkButton2" >
                    CommandName="cancel" 
                    Cancel
                </asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                CategoryID:
                <asp:Label ID="CategoryIDLabel"  
                    Text='<%# Eval("CategoryID") %>'>
                </asp:Label>
                <br />
                CategoryName:
                <asp:Label ID="CategoryNameLabel" 
                     Text='<%# Eval("CategoryName") %>'>
                </asp:Label>
                <br />
                Description:
                <asp:Label ID="DescriptionLabel"  
                    Text='<%# Eval("Description") %>'>
                </asp:Label>
                <br />
                <asp:LinkButton  ID="LinkButton1" 
                    CommandName="edit" >
                    Edit
                </asp:LinkButton><br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1"  
              ConnectionString=
                 "<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], 
                 [Description] FROM [Categories]"
            UpdateCommand="UPDATE [Categories] SET [CategoryName] = 
                 @CategoryName, [Description] = @Description 
                 WHERE [CategoryID] = @original_CategoryID">
            <UpdateParameters>
               <asp:Parameter Name="CategoryName" Type="String" />
              <asp:Parameter Name="Description" Type="String" />
              <asp:Parameter Name="original_CategoryID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

데이터를 업데이트하려면 업데이트 중인 레코드의 기본 키가 필요합니다. 키 배열이 포함된 DataKeyField 속성에서 해당 값을 가져올 수 있습니다.

항목에 있는 특정 컨트롤의 값을 가져오려면 Item 이벤트 인수 개체의 FindControl 메서드를 사용합니다.

SqlDataSource1.UpdateParameters 사전에 설정한 값은 UpdateParameters 요소에 설정한 이름과 일치해야 합니다.

코드 컴파일

코드에는 NorthwindConnectionString이라는 연결 문자열이 있어야 합니다. 연결하는 데이터베이스에는 CategoryID, CategoryName 및 Description 필드를 가진 Categories라는 테이블이 있는 것으로 가정합니다.

페이지를 데이터베이스에 연결하는 데 사용된 계정에는 Category 테이블을 업데이트할 수 있는 권한이 있어야 합니다.

강력한 프로그래밍

예제 코드에서는 프로덕션 환경에서 일반적으로 수행되는 다음 작업이 수행되지 않습니다.

FindControl 메서드가 유효한 컨트롤을 반환하도록 확인하기 위한 오류 검사가 코드에 포함되지 않습니다. 더 강력한 코드를 작성하려면 FindControl 메서드에서 null 참조 값(Visual Basic의 Nothing)이 반환되지 않도록 합니다.
코드에서 업데이트가 성공했는지 확인하지 않습니다.

보안

Web Forms 페이지의 사용자 입력에는 잠재적으로 악의적인 클라이언트 스크립트가 포함될 수도 있습니다. 기본적으로 Web Forms 페이지에서는 사용자 입력 내용에 스크립트나 HTML 요소가 포함되지 않도록 유효성을 검사합니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.