DetailsView 웹 서버 컨트롤을 사용하여 데이터 수정

아티클
10/22/2014

업데이트: 2007년 11월

DetailsView 컨트롤에는 프로그래밍하지 않고 레코드를 편집 또는 삭제할 수 있는 기본 제공 기능이 있습니다. 이벤트 및 템플릿을 사용하여 DetailsView 컨트롤의 편집 기능을 사용자 지정할 수 있습니다.

기본 제공 편집 기능 설정

DetailsView 컨트롤의 기본 제공 편집 기능을 설정하려면 AutoGenerateEditButton, AutoGenerateInsertButton 및 AutoGenerateDeleteButton 속성 중 하나 이상을 true로 설정하면 됩니다. DetailsView 컨트롤은 현재 바인딩된 레코드를 편집 또는 삭제하고 새 레코드를 삽입할 수 있는 기능을 자동으로 추가하지만, 이 경우 DetailsView 컨트롤의 데이터 소스에서 편집을 지원해야 합니다.

DetailsView 컨트롤의 바인딩된 데이터 수정 방법

DetailsView 컨트롤은 바인딩된 레코드의 내용을 수정할 수 있는 UI(사용자 인터페이스)를 제공합니다. 일반적으로 편집 가능한 뷰에는 편집, 삽입 및 삭제 텍스트가 표시된 명령 단추가 포함되어 있는 추가 행이 표시됩니다. 기본적으로 행은 DetailsView 컨트롤의 맨 아래에 추가됩니다.

사용자가 명령 단추를 클릭하면 DetailsView 컨트롤은 행의 내용을 수정할 수 있는 컨트롤과 함께 행을 다시 표시합니다. 편집 단추는 변경 내용을 저장하거나 행의 편집을 취소할 수 있는 단추로 바뀝니다. DetailsView 컨트롤은 텍스트 상자를 사용하여 데이터를 BoundField에 표시하며, AutoGenerateRows 속성을 true로 설정하면 데이터가 자동으로 표시됩니다. 부울 데이터는 확인란을 사용하여 표시됩니다. 편집 모드에 표시된 입력 컨트롤은 TemplateField를 사용하여 사용자 지정할 수 있습니다. 자세한 내용은 DetailsView 웹 서버 컨트롤에서 사용자 지정 행 만들기를 참조하십시오.

DetailsView 컨트롤은 삽입 작업을 수행할 때 Values 사전 컬렉션을 사용하여 데이터 소스에 삽입할 값을 전달합니다.

또한 업데이트 또는 삭제 작업을 수행할 경우 DetailsView 컨트롤은 세 개의 사전 컬렉션, 즉 Keys 사전, NewValues 사전 및 OldValues 사전에 있는 데이터 소스에 값을 전달합니다. 각 사전에는 DetailsView 컨트롤에 의해 발생되는 삽입, 업데이트 또는 삭제 이벤트로 전달되는 이벤트 인수를 사용하여 액세스할 수 있습니다.

Keys 사전에는 업데이트 또는 삭제할 레코드를 고유하게 식별하는 필드의 이름 및 값뿐 아니라 레코드를 편집하기 전의 원래 키 필드 값이 항상 포함되어 있습니다. Keys 사전에 배치되는 필드를 지정하려면 DataKeyNames 속성을 데이터의 기본 키를 나타내는 쉼표로 구분된 필드 이름 목록으로 설정합니다. Keys 컬렉션에는 DataKeyNames 속성에 지정된 필드와 관련된 값이 자동으로 채워집니다.

참고:
DataKeyNames 속성에 지정된 필드의 원래 기본 키 값은 뷰 상태에 저장되어 있습니다. 기본 키 값에 중요한 정보가 들어 있는 경우에는 페이지의 ViewStateEncryptionMode 속성을 Always로 설정하여 뷰 상태 내용을 암호화해야 합니다.

Values 및 NewValues 사전에는 삽입 또는 편집되는 레코드에 있는 입력 컨트롤의 현재 값이 포함되어 있습니다. OldValues 사전에는 키 필드를 제외한 모든 필드의 원래 값이 포함되어 있으며 키 필드의 원래 값은 Keys 사전에 들어 있습니다. 키 필드의 새 값은 NewValues 사전에 포함됩니다.

데이터 소스 컨트롤은 Keys, Values, NewValues 및 OldValues 사전의 값을 Insert, Update 및 Delete 명령을 위한 매개 변수로 사용합니다. 바인딩된 값에 대해 생성되는 사전을 기준으로 데이터 소스 컨트롤 매개 변수가 만들어지는 방식에 대한 자세한 내용은 데이터 소스 컨트롤에서 데이터 바인딩된 필드에 대해 매개 변수가 생성되는 방식을 참조하십시오.

업데이트가 완료되면 DetailsView 컨트롤은 ItemUpdated 이벤트를 발생시킵니다. 이 이벤트를 사용하면 무결성 검사 등의 업데이트 후 논리를 수행할 수 있습니다. 마찬가지로 DetailsView 컨트롤은 삽입 후에는 ItemInserted 이벤트를 발생시키고 삭제 후에는 ItemDeleted 이벤트를 발생시킵니다.

업데이트가 완료되어 모든 이벤트가 발생한 후에는 DetailsView 컨트롤이 데이터 소스 컨트롤에 다시 바인딩되어 업데이트된 데이터를 표시합니다.

DetailsView 컨트롤의 편집 사용자 인터페이스 사용자 지정

DetailsView 컨트롤에서는 기본적으로 데이터 소스의 각 바인딩된 필드에 대해 행을 자동으로 생성합니다. AutoGenerateRows 속성을 false로 설정하고 DetailsView 컨트롤에 표시할 각 필드에 대해 BoundField 컨트롤을 지정하면 DetailsView 컨트롤에 바인딩할 필드를 사용자 지정할 수 있습니다.

명령 단추의 표시 방식을 사용자 지정하려면 DetailsView 컨트롤의 AutoGenerateEditButton 속성을 false로 설정하면 됩니다. 그러면 행에 대해 개별 CommandField 개체를 추가할 수 있습니다. 예를 들어 현재 표시된 행을 편집 모드에 두려면 ShowEditButton 속성이 true로 설정된 CommandField 필드를 추가하면 됩니다.

또한 BoundField 컨트롤의 ReadOnly 속성을 사용하면 바인딩된 필드의 편집 가능 여부를 지정할 수 있습니다. ReadOnly 속성이 false로 설정되어 있으면 편집 명령 단추를 클릭하여 필드를 편집할 수 있습니다. ReadOnly 속성이 true이면 바인딩된 필드가 표시되기는 하지만 편집할 수는 없습니다.

마찬가지로 BoundField 컨트롤의 InsertVisible 속성을 사용하여 바인딩된 필드에 값을 삽입할 수 있는지 여부를 지정할 수 있습니다. InsertVisible 속성이 false이면 사용자가 새로 만들기 명령 단추를 클릭할 때 바인딩된 필드가 표시되지 않습니다. 이 설정은 날짜 및 타임스탬프 또는 자동 증분 기본 키 같은 데이터 소스에 의해 바인딩된 필드가 자동으로 생성되는 경우에 특히 유용합니다.

예제

다음 코드 예제에서는 GridView 컨트롤 및 DetailsView 컨트롤을 사용하여 데이터를 표시합니다. DetailsView 컨트롤은 데이터를 수정할 수 있도록 구성됩니다.

<%@ Page language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >

  Sub EmployeesDropDownList_OnSelectedIndexChanged(sender As Object, e As EventArgs)
    EmployeeDetailsView.DataBind()
  End Sub

  Sub EmployeeDetailsView_ItemUpdated(sender As Object, e As DetailsViewUpdatedEventArgs)
    EmployeesDropDownList.DataBind()
    EmployeesDropDownList.SelectedValue = e.Keys("EmployeeID").ToString()
    EmployeeDetailsView.DataBind()
  End Sub

  Sub EmployeeDetailsView_ItemDeleted(sender As Object, e As DetailsViewDeletedEventArgs)
    EmployeesDropDownList.DataBind()
  End Sub

  Sub EmployeeDetailsSqlDataSource_OnInserted(sender As Object, e As SqlDataSourceStatusEventArgs)
    Dim command As System.Data.Common.DbCommand = e.Command  
    EmployeesDropDownList.DataBind()
    EmployeesDropDownList.SelectedValue = _
      command.Parameters("@EmpID").Value.ToString()
    EmployeeDetailsView.DataBind()
  End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>Northwind Employees</title>
</head>
<body>
    <form id="form1" >

      <h3>Northwind Employees</h3>

        <table cellspacing="10">

          <tr>
            <td valign="top">
              <asp:DropDownList ID="EmployeesDropDownList" 
                DataSourceID="EmployeesSqlDataSource" 
                DataValueField="EmployeeID" 
                DataTextField="FullName"
                AutoPostBack="True"
                OnSelectedIndexChanged="EmployeesDropDownList_OnSelectedIndexChanged"
                RunAt="Server" />            
            </td>

            <td valign="top">                
              <asp:DetailsView ID="EmployeeDetailsView"
                DataSourceID="EmployeeDetailsSqlDataSource"
                AutoGenerateRows="false"
                AutoGenerateInsertbutton="true"
                AutoGenerateEditbutton="true"
                AutoGenerateDeletebutton="true"
                DataKeyNames="EmployeeID"     
                Gridlines="Both"
                OnItemUpdated="EmployeeDetailsView_ItemUpdated"
                OnItemDeleted="EmployeeDetailsView_ItemDeleted"      
                RunAt="server">

                <HeaderStyle backcolor="Navy"
                  forecolor="White"/>

                <RowStyle backcolor="White"/>

                <AlternatingRowStyle backcolor="LightGray"/>

                <EditRowStyle backcolor="LightCyan"/>

                <Fields>                  
                  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>                    
                  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
                  <asp:BoundField DataField="Address"    HeaderText="Address"/>                    
                  <asp:BoundField DataField="City"       HeaderText="City"/>                        
                  <asp:BoundField DataField="Region"     HeaderText="Region"/>
                  <asp:BoundField DataField="PostalCode" HeaderText="Postal Code"/>                    
                </Fields>                    
              </asp:DetailsView>
            </td>                
          </tr>            
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource"  
          SelectCommand="SELECT EmployeeID, LastName + ', ' + FirstName AS FullName FROM Employees" 
          Connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server">
        </asp:SqlDataSource>


        <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" 
          SelectCommand="SELECT EmployeeID, LastName, FirstName, Address, City, Region, PostalCode
                         FROM Employees WHERE EmployeeID = @EmpID"

          InsertCommand="INSERT INTO Employees(LastName, FirstName, Address, City, Region, PostalCode)
                         VALUES (@LastName, @FirstName, @Address, @City, @Region, @PostalCode); 
                         SELECT @EmpID = SCOPE_IDENTITY()"

          UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName, Address=@Address,
                           City=@City, Region=@Region, PostalCode=@PostalCode
                         WHERE EmployeeID=@EmployeeID"

          DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

          ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
          OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
          RunAt="server">

          <SelectParameters>
            <asp:ControlParameter ControlID="EmployeesDropDownList" PropertyName="SelectedValue"
                                  Name="EmpID" Type="Int32" DefaultValue="0" />
          </SelectParameters>

          <InsertParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
          </InsertParameters>

          <UpdateParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </UpdateParameters>

          <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </DeleteParameters>

        </asp:SqlDataSource>
      </form>
  </body>
</html>

<%@ Page language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >

  void EmployeesDropDownList_OnSelectedIndexChanged(Object sender, EventArgs e)
  {
    EmployeeDetailsView.DataBind();
  }

  void EmployeeDetailsView_ItemUpdated(Object sender, DetailsViewUpdatedEventArgs e)
  {
    EmployeesDropDownList.DataBind();
    EmployeesDropDownList.SelectedValue = e.Keys["EmployeeID"].ToString();
    EmployeeDetailsView.DataBind();
  }

  void EmployeeDetailsView_ItemDeleted(Object sender, DetailsViewDeletedEventArgs e)
  {
    EmployeesDropDownList.DataBind();
  }

  void EmployeeDetailsSqlDataSource_OnInserted(Object sender, SqlDataSourceStatusEventArgs e)
  {
    System.Data.Common.DbCommand command = e.Command;   
    EmployeesDropDownList.DataBind();
    EmployeesDropDownList.SelectedValue = 
      command.Parameters["@EmpID"].Value.ToString();
    EmployeeDetailsView.DataBind();
  }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>Northwind Employees</title>
</head>
<body>
    <form id="form1" >

      <h3>Northwind Employees</h3>

        <table cellspacing="10">

          <tr>
            <td valign="top">
              <asp:DropDownList ID="EmployeesDropDownList" 
                DataSourceID="EmployeesSqlDataSource" 
                DataValueField="EmployeeID" 
                DataTextField="FullName"
                AutoPostBack="True"
                OnSelectedIndexChanged="EmployeesDropDownList_OnSelectedIndexChanged"
                RunAt="Server" />            
            </td>

            <td valign="top">                
              <asp:DetailsView ID="EmployeeDetailsView"
                DataSourceID="EmployeeDetailsSqlDataSource"
                AutoGenerateRows="false"
                AutoGenerateInsertbutton="true"
                AutoGenerateEditbutton="true"
                AutoGenerateDeletebutton="true"
                DataKeyNames="EmployeeID"     
                Gridlines="Both"
                OnItemUpdated="EmployeeDetailsView_ItemUpdated"
                OnItemDeleted="EmployeeDetailsView_ItemDeleted"      
                RunAt="server">

                <HeaderStyle backcolor="Navy"
                  forecolor="White"/>

                <RowStyle backcolor="White"/>

                <AlternatingRowStyle backcolor="LightGray"/>

                <EditRowStyle backcolor="LightCyan"/>

                <Fields>                  
                  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" InsertVisible="False" ReadOnly="true"/>                    
                  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
                  <asp:BoundField DataField="Address"    HeaderText="Address"/>                    
                  <asp:BoundField DataField="City"       HeaderText="City"/>                        
                  <asp:BoundField DataField="Region"     HeaderText="Region"/>
                  <asp:BoundField DataField="PostalCode" HeaderText="Postal Code"/>                    
                </Fields>                    
              </asp:DetailsView>
            </td>                
          </tr>            
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource"  
          SelectCommand="SELECT EmployeeID, LastName + ', ' + FirstName AS FullName FROM Employees" 
          Connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server">
        </asp:SqlDataSource>


        <asp:SqlDataSource ID="EmployeeDetailsSqlDataSource" 
          SelectCommand="SELECT EmployeeID, LastName, FirstName, Address, City, Region, PostalCode
                         FROM Employees WHERE EmployeeID = @EmpID"

          InsertCommand="INSERT INTO Employees(LastName, FirstName, Address, City, Region, PostalCode)
                         VALUES (@LastName, @FirstName, @Address, @City, @Region, @PostalCode); 
                         SELECT @EmpID = SCOPE_IDENTITY()"

          UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName, Address=@Address,
                           City=@City, Region=@Region, PostalCode=@PostalCode
                         WHERE EmployeeID=@EmployeeID"

          DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

          ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
          OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
          RunAt="server">

          <SelectParameters>
            <asp:ControlParameter ControlID="EmployeesDropDownList" PropertyName="SelectedValue"
                                  Name="EmpID" Type="Int32" DefaultValue="0" />
          </SelectParameters>

          <InsertParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
          </InsertParameters>

          <UpdateParameters>
            <asp:Parameter Name="LastName"   Type="String" />
            <asp:Parameter Name="FirstName"  Type="String" />
            <asp:Parameter Name="Address"    Type="String" />
            <asp:Parameter Name="City"       Type="String" />
            <asp:Parameter Name="Region"     Type="String" />
            <asp:Parameter Name="PostalCode" Type="String" />
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </UpdateParameters>

          <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32" DefaultValue="0" />
          </DeleteParameters>

        </asp:SqlDataSource>
      </form>
  </body>
</html>

참고 항목

참조

DetailsView 웹 서버 컨트롤 개요

다음을 통해 공유

DetailsView 웹 서버 컨트롤을 사용하여 데이터 수정

기본 제공 편집 기능 설정

DetailsView 컨트롤의 바인딩된 데이터 수정 방법

DetailsView 컨트롤의 편집 사용자 인터페이스 사용자 지정

예제

참고 항목

참조

추가 리소스