使用 DetailsView Web 伺服器控制項修改資料

發行項
10/22/2014

更新：2007 年 11 月

DetailsView 控制項有內建功能，可讓使用者在不需要撰寫程式的情況下，編輯或刪除資料錄。您可以使用事件和範本自訂 DetailsView 控制項的編輯功能。

啟用內建編輯功能

您可以將一個或更多的 AutoGenerateEditButton、AutoGenerateInsertButton 和 AutoGenerateDeleteButton 屬性設定為 true，啟用 DetailsView 控制項的內建編輯功能。DetailsView 控制項會自動加入功能，讓使用者能夠編輯或刪除目前的繫結資料錄以及插入新資料錄，提供讓 DetailsView 控制項支援編輯的資料來源。

DetailsView 控制項如何修改繫結資料

DetailsView 控制項提供使用者介面 (UI) 可讓使用者修改繫結資料錄的內容。通常，可編輯的檢視會顯示額外的命令列，其中包含 [編輯]、[插入] 和 [刪除] 命令按鈕。根據預設，命令列會加入至 DetailsView 控制項的下方。

當使用者按一下命令按鈕時，DetailsView 控制項會重新顯示使用控制項的資料行，以便讓使用者修改資料列的內容。可以讓使用者儲存變更或取消編輯資料列的按鈕，會取代編輯按鈕。DetailsView 控制項使用文字方塊顯示 BoundField 中的資料，還有當 AutoGenerateRows 屬性設定為 true 時會自動顯示的資料。使用核取方塊以顯示布林值資料。您可以使用 TemplateField 自訂編輯模式中顯示的輸入控制項。如需詳細資訊，請參閱建立 DetailsView Web 伺服器控制項中的自訂資料列。

當 DetailsView 控制項執行插入作業時，會使用 Values 字典集合傳遞資料來源中要插入的值。

針對更新或刪除作業，DetailsView 控制項會將三種字典集合的值傳遞給資料來源：Keys 字典、NewValues 字典和 OldValues 字典。您可以使用傳遞給 DetailsView 控制項所引發之插入、更新或刪除事件的事件引數來存取每個字典。

Keys 字典包含可唯一識別要更新或刪除之資料錄的欄位名稱和值，並且必定包含編輯資訊錄之前的原始索引鍵欄位值。若要指定哪些欄位放置在 Keys 字典中，請將 DataKeyNames 屬性設定為表示資料主索引鍵欄位名稱的逗號分隔清單。Keys 集合會自動填入與 DataKeyNames 屬性之指定欄位相關聯的值。

注意事項：
在 DataKeyNames 屬性中指定的欄位原始主索引鍵值會儲存在檢視狀態中。如果您的主索引鍵值包含敏感性資訊，則應該將頁面的 ViewStateEncryptionMode 屬性設為 Always，以便加密檢視狀態內容。

Values 和 NewValues 字典各自包含來自插入或編輯資料錄中，在輸入控制項所提供的目前值。OldValues 字典包含索引鍵欄位以外的原始值，索引鍵欄位儲存在 Keys 字典中。新的索引鍵欄位值包含在 NewValues 字典中。

資料來源控制項會使用 Keys、Values、NewValues 和 OldValues 字典提供的值，以做為插入、更新或刪除命令的參數。如需如何根據建立用來繫結值的字典，建立資料來源控制項參數的詳細資訊，請參閱資料來源控制項如何建立資料繫結欄位的參數。

在更新後，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 Web 伺服器控制項概觀

共用方式為

使用 DetailsView Web 伺服器控制項修改資料

啟用內建編輯功能

DetailsView 控制項如何修改繫結資料

自訂 DetailsView 控制項中的編輯使用者介面

範例

請參閱

參考

其他資源