DetailsView クラスとは何？わかりやすく解説 Weblio辞書

.NET Framework クラスライブラリリファレンス

索引トップ用語の索引ランキング

DetailsView クラス

メモ : このクラスは、.NET Framework version 2.0 で新しく追加されたものです。

各データ行がレコードのフィールドを表すテーブル内のデータソースから単一レコードの値を表示します。DetailsView コントロールにより、レコードの編集、削除、および挿入ができます。

名前空間: System.Web.UI.WebControls
アセンブリ: System.Web (system.web.dll 内)
構文

Visual Basic (宣言)

<ControlValuePropertyAttribute("SelectedValue")>
 _
Public Class DetailsView
    Inherits CompositeDataBoundControl
    Implements IDataItemContainer, INamingContainer, ICallbackContainer,
 ICallbackEventHandler, _
    IPostBackEventHandler, IPostBackContainer

Visual Basic (使用法)

Dim instance As DetailsView

[ControlValuePropertyAttribute("SelectedValue")] 
public class DetailsView : CompositeDataBoundControl,
 IDataItemContainer, INamingContainer, ICallbackContainer, 
    ICallbackEventHandler, IPostBackEventHandler, IPostBackContainer

C++

[ControlValuePropertyAttribute(L"SelectedValue")] 
public ref class DetailsView : public
 CompositeDataBoundControl, IDataItemContainer, INamingContainer, ICallbackContainer,
 
    ICallbackEventHandler, IPostBackEventHandler, IPostBackContainer

/** @attribute ControlValuePropertyAttribute("SelectedValue") */ 
public class DetailsView extends CompositeDataBoundControl
 implements IDataItemContainer, INamingContainer, 
    ICallbackContainer, ICallbackEventHandler, IPostBackEventHandler, IPostBackContainer

JScript

ControlValuePropertyAttribute("SelectedValue") 
public class DetailsView extends
 CompositeDataBoundControl implements IDataItemContainer, INamingContainer, 
    ICallbackContainer, ICallbackEventHandler, IPostBackEventHandler, IPostBackContainer

解説

DetailsView コントロールは、レコードの各フィールドがテーブル行に表示されるテーブル内のデータソースから単一レコードを表示するために使用します。マスター詳細の場合は、このコントロールと GridView コントロールを組み合わせて使用できます。DetailsView コントロールは、次の機能をサポートしています。

SqlDataSource などのデータソースコントロールへのバインド。
組み込みの挿入機能。
組み込みの更新機能と削除機能。
組み込みのページング機能。
プロパティを動的に設定したり、イベントを処理したりするための、DetailsView オブジェクトモデルへのプログラムによるアクセス。
テーマおよびスタイルを使用した外観のカスタマイズ。

行のフィールド

DetailsView コントロールの各データ行は、フィールドコントロールを宣言して作成されます。行フィールドの種類によって、コントロール内の行の機能は異なります。フィールドは DataControlField からの派生を制御します。使用できる行フィールドのさまざまな種類の一覧を次の表に示します。

列フィールドの種類	説明
BoundField	データソース内のフィールドの値をテキストとして表示します。
ButtonField	DetailsView コントロールにコマンドボタンを表示します。これにより、Add ボタンや Remove ボタンなどのカスタムボタンコントロールを行に表示できます。
CheckBoxField	DetailsView コントロールにチェックボックスを表示します。通常、この種類の行フィールドは、フィールドにブール値を表示する場合に使用されます。
CommandField	編集、挿入、または削除の操作を実行するための組み込みのコマンドボタンを DetailsView コントロールに表示します。
HyperLinkField	データソース内のフィールドの値をハイパーリンクとして表示します。この種類の行フィールドを使用すると、2 番目のフィールドをハイパーリンクの URL にバインドできます。
ImageField	イメージを DetailsView コントロールに表示します。
TemplateField	指定されたテンプレートに従って、ユーザー定義の行の内容を DetailsView コントロールに表示します。この種類の行フィールドを使用すると、カスタム行フィールドを作成できます。

既定では AutoGenerateRows プロパティは true に設定されています。つまり、データソース内のバインドできる型の各フィールドに対して、バインドされる行フィールドオブジェクトが自動的に作成されます。バインドできる有効な型は String、DateTime、Decimal, Guid、およびプリミティブ型のセットです。続いて各フィールドが、データソースに表示される順序で行にテキストとして表示されます。

行を自動的に生成することで、レコード内の各フィールドをすばやく簡単に表示できます。ただし、DetailsView コントロールの拡張機能を利用するためには、行フィールドを明示的に宣言して DetailsView コントロールに含める必要があります。行フィールドを宣言するには、最初に AutoGenerateRows プロパティを false に設定します。次に、DetailsView コントロールの開始タグと終了タグの間に <Fields> の開始タグと終了タグを追加します。最後に、<Fields> の開始タグと終了タグの間に組み込む行フィールドをリストします。指定した行フィールドが、リストした順序で Fields コレクションに追加されます。Fields コレクションを使用すると、DetailsView コントロール内の行フィールドをプログラムによって管理できます。

メモ
自動的に生成された行フィールドは、Fields コレクションに追加されません。

メモ
明示的に宣言された行フィールドは、自動的に生成された行フィールドと共に表示できます。この両方の行フィールドが使用される場合は、明示的に宣言された行フィールドが表示された後で、自動的に生成された行フィールドが表示されます。

データへのバインド

DetailsView コントロールは、データソースコントロール (SqlDataSource や AccessDataSource など)、または System.Collections.IEnumerable インターフェイスを実装するデータソース (System.Data.DataView、System.Collections.ArrayList、System.Collections.Hashtable など) にバインドできます。DetailsView コントロールを適切なデータソースの種類にバインドするには、次のいずれかの方法を使用します。

データソースコントロールにバインドするには、DetailsView コントロールの DataSourceID プロパティをデータソースコントロールの ID 値に設定します。DetailsView コントロールは、指定されたデータソースコントロールに自動的にバインドされます。データにバインドするには、この方法をお勧めします。
System.Collections.IEnumerable インターフェイスを実装するデータソースにバインドするには、プログラムによって DetailsView コントロールの DataSource プロパティをデータソースに設定してから、DataBind メソッドを呼び出します。

データバインディングの詳細については、「データベースへのバインド」を参照してください。

Security

このコントロールは、ユーザー入力を表示するために使用できます。ユーザー入力には悪意のあるクライアントスクリプトが含まれている可能性があります。アプリケーションに表示する前に、クライアントから送信された実行スクリプト、SQL ステートメントなどのコードの情報はすべて検査してください。ASP.NET には入力要求の検証機能があり、ユーザー入力の中のスクリプトと HTML をブロックできます。詳細については、「スクリプトによる攻略の概要」を参照してください。検証サーバーコントロールは、ユーザー入力を査定する目的でも用意されています。詳細については、「検証サーバーコントロール構文」を参照してください。

データ操作

DetailsView コントロールには、ユーザーがそのコントロール内の項目を使用して更新、削除、挿入、ページングを実行できる組み込み機能が用意されています。DetailsView コントロールがデータソースコントロールにバインドされている場合、DetailsView コントロールは、データソースコントロールの機能を利用して、自動的な更新、削除、挿入、およびページングの各機能を提供します。

メモ
他の種類のデータソースでも、DetailsView コントロールは更新、削除、挿入、およびページングの各操作をサポートできますが、適切なイベントハンドラを使用して、これらの操作の実装を行う必要があります。詳細については、「ItemDeleting」、「ItemInserting」、および「ItemUpdating」を参照してください。

メモ

他の種類のデータソースでも、DetailsView コントロールは更新、削除、挿入、およびページングの各操作をサポートできますが、適切なイベントハンドラを使用して、これらの操作の実装を行う必要があります。詳細については、「ItemDeleting」、「ItemInserting」、および「ItemUpdating」を参照してください。

DetailsView コントロールは、AutoGenerateEditButton、AutoGenerateDeleteButton、または AutoGenerateInsertButton の各プロパティをそれぞれ true に設定して、CommandField 行フィールドに Edit、Delete、または New の各ボタンを追加できます。(選択されているレコードをすぐに削除する) Delete ボタンとは異なり、Edit ボタンまたは New ボタンをクリックすると、DetailsView コントロールが編集モード (Edit ボタンの場合) または挿入モード (New ボタンの場合) になります。編集モードでは、Edit ボタンが Update ボタンと Cancel ボタンに置き換えられます。フィールドのデータ型に適した入力コントロール (TextBox コントロールや CheckBox コントロールなど) が、ユーザーが変更するフィールドの値を設定した状態で表示されます。Update ボタンをクリックすると、データソースのレコードが更新され、Cancel ボタンをクリックすると、すべての変更が放棄されます。同様に、挿入モードでは、New ボタンが Insert ボタンと Cancel ボタンに置き換えられ、新規レコードの値を入力するための空の入力コントロールがユーザーに表示されます。

メモ
更新、削除、および挿入のコマンドボタンは、ButtonField、CommandField、または TemplateField の行フィールドで手動で定義することもできます。DetailsView コントロールは、CommandName プロパティが "Edit"、"Update"、"Delete"、"New"、"Insert"、または "Cancel" に設定されているボタンを認識しますが、機能は手動で指定する必要があります。詳細については、「ItemDeleting」、「ItemInserting」、および「ItemUpdating」を参照してください。

メモ

更新、削除、および挿入のコマンドボタンは、ButtonField、CommandField、または TemplateField の行フィールドで手動で定義することもできます。DetailsView コントロールは、CommandName プロパティが "Edit"、"Update"、"Delete"、"New"、"Insert"、または "Cancel" に設定されているボタンを認識しますが、機能は手動で指定する必要があります。詳細については、「ItemDeleting」、「ItemInserting」、および「ItemUpdating」を参照してください。

DetailsView コントロールには、ユーザーがデータソース内の他のレコードに移動できるページング機能が用意されています。この機能が有効に設定されている場合は、ページナビゲーションコントロールがページ行に表示されます。ページングを有効にするには、AllowPaging プロパティを true に設定します。ページ行は、PagerStyle プロパティと PagerSettings プロパティを使用してカスタマイズできます。

ユーザーインターフェイスのカスタマイズ

コントロールのさまざまな部分にスタイルプロパティを設定することによって、DetailsView コントロールの外観をカスタマイズできます。さまざまなスタイルプロパティの一覧を次の表に示します。

スタイルプロパティ	説明
AlternatingRowStyle	DetailsView コントロールに交互に表示されるデータ行のスタイル設定。このプロパティが設定されている場合、データ行は RowStyle 設定と AlternatingRowStyle 設定で交互に表示されます。
CommandRowStyle	DetailsView コントロールの組み込みのコマンドボタンを格納している行のスタイル設定。
EditRowStyle	DetailsView コントロールが編集モードの場合のデータ行のスタイル設定。
EmptyDataRowStyle	データソースにレコードが格納されていない場合に DetailsView コントロールに表示される、空のデータ行のスタイル設定。
FooterStyle	DetailsView コントロールのフッター行のスタイル設定。
HeaderStyle	DetailsView コントロールのヘッダー行のスタイル設定。
InsertRowStyle	DetailsView コントロールが挿入モードの場合のデータ行のスタイル設定。
PagerStyle	DetailsView コントロールのページ行のスタイル設定。
RowStyle	DetailsView コントロールのデータ行のスタイル設定。AlternatingRowStyle プロパティも設定されている場合、データ行は RowStyle 設定と AlternatingRowStyle 設定で交互に表示されます。
FieldHeaderStyle	DetailsView コントロールのヘッダー列のスタイル設定。

イベント

DetailsView コントロールには、プログラムに利用できる複数のイベントが用意されています。これにより、イベントが発生するたびにカスタムルーチンが実行されるようにできます。DetailsView コントロールでサポートされるイベントの一覧を次の表に示します。DetailsView コントロールは、これらのイベントを基本クラスの DataBinding、DataBound、Disposed, Init、Load、PreRender、および Render からも継承します。

イベント	説明
ItemCommand	DetailsView コントロールのボタンがクリックされたときに発生します。
ItemCreated	DetailsView にすべての DetailsViewRow オブジェクトが作成された後に発生します。このイベントは、レコードの値を表示前に変更する場合などに使用されます。
ItemDeleted	Delete ボタンがクリックされた場合に、DetailsView コントロールがデータソースからレコードを削除した後で発生します。このイベントは、削除操作の結果を確認する場合によく使用されます。
ItemDeleting	Delete ボタンがクリックされた場合に、DetailsView コントロールがデータソースからレコードを削除する前に発生します。このイベントは、削除操作をキャンセルする場合などに使用されます。
ItemInserted	Insert ボタンがクリックされた場合に、DetailsView コントロールがレコードを挿入した後で発生します。このイベントは、挿入操作の結果を確認する場合などに使用されます。
ItemInserting	Insert ボタンがクリックされた場合に、DetailsView コントロールがレコードを挿入する前に発生します。このイベントは、挿入操作をキャンセルする場合などに使用されます。
ItemUpdated	Update ボタンがクリックされた場合に、DetailsView コントロールが行を更新した後で発生します。このイベントは、更新操作の結果を確認する場合によく使用されます。
ItemUpdating	Update ボタンがクリックされた場合に、DetailsView コントロールがレコードを更新する前に発生します。このイベントは、更新操作をキャンセルする場合などに使用されます。
ModeChanged	DetailsView コントロールが (編集モード、挿入モード、または読み取り専用モードに) モードを変更した後に発生します。このイベントは、DetailsView コントロールがモードを変更したときにタスクを実行する場合などに使用されます。
ModeChanging	DetailsView コントロールが (編集モード、挿入モード、または読み取り専用モードに) モードを変更する前に発生します。このイベントは、モードの変更をキャンセルする場合などに使用されます。
PageIndexChanged	ページャボタンの 1 つがクリックされた場合に、DetailsView コントロールがページング操作を処理した後に発生します。このイベントは通常、ユーザーがコントロール内の別のレコードに移動した後にタスクを実行する必要がある場合に使用されます。
PageIndexChanging	ページャボタンの 1 つがクリックされた場合に、DetailsView コントロールがページング操作を処理する前に発生します。このイベントは、ページング操作をキャンセルする場合などに使用されます。

ユーザー補助

このコントロールに既定でレンダリングされるマークアップは、Web Content Accessibility Guidelines (WCAG) 1.0 の優先度 1 ガイドラインなどのユーザー補助に関する標準に適合しない可能性があります。このコントロールのユーザー補助サポートの詳細については、「ASP.NET コントロールとユーザー補助」を参照してください。

Topic	Location
チュートリアル : DetailsView Web サーバーコントロールによる Web ページのデータの編集と挿入	Visual Studio での ASP .NET Web アプリケーションの作成
チュートリアル : Visual Studio でのマスター/詳細 Web ページの作成	Visual Studio での ASP .NET Web アプリケーションの作成
方法 : ASP.NET Web サーバーコントロールのテンプレートを動的に作成する	ASP .NET Web アプリケーションの作成
方法 : Visual Studio でテンプレートコントロールにデータをバインドする	Visual Studio での ASP .NET Web アプリケーションの作成
方法 : テンプレートコントロールにデータを連結する	ASP .NET Web アプリケーションの作成

使用例

単純なマスター詳細の場合に DetailsView コントロールと GridView コントロールを組み合わせて使用する方法のコード例を次に示します。この例では、GridView コントロールの選択された項目の詳細を表示します。

Visual Basic

<%@ Page Language="VB" %>

<html>
<body>
  <form runat="server">
    <div>
      <table>
        <tr>
          <td>
            <asp:GridView ID="GridView1" runat="server"
 
              AutoGenerateColumns="False" DataSourceID="Customers"
              DataKeyNames="CustomerID">
              <Columns>
                <asp:CommandField ShowSelectButton="True"
 />
                <asp:BoundField DataField="ContactName"
 HeaderText="ContactName" />
                <asp:BoundField DataField="CompanyName"
 HeaderText="CompanyName" />
              </Columns>
            </asp:GridView>
          </td>
          <td valign="top">
            <asp:DetailsView ID="DetailsView1"
 runat="server" 
              AutoGenerateRows="True" DataKeyNames="CustomerID"
              DataSourceID="Details" Height="50px"
 Width="301px">
            </asp:DetailsView>
          </td>
        </tr>
      </table>
      &nbsp;&nbsp;
      <asp:SqlDataSource ID="Details" runat="server"
 
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString
 %>"
        SelectCommand="SELECT * FROM [Customers] WHERE ([CustomerID]
 = @CustomerID)">
        <SelectParameters>
          <asp:ControlParameter ControlID="GridView1"
 Name="CustomerID" 
            PropertyName="SelectedValue"
            Type="String" />
        </SelectParameters>
      </asp:SqlDataSource>
      <asp:SqlDataSource ID="Customers" runat="server"
 
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString
 %>"
        SelectCommand="SELECT [CompanyName], [ContactName], [CustomerID]
 FROM [Customers]">
      </asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

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

<html>
<body>
  <form runat="server">
    <div>
      <table>
        <tr>
          <td>
            <asp:GridView ID="GridView1" runat="server" 
              AutoGenerateColumns="False" DataSourceID="Customers"
              DataKeyNames="CustomerID">
              <Columns>
                <asp:CommandField ShowSelectButton="True" />
                <asp:BoundField DataField="ContactName" HeaderText="ContactName"
 />
                <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
 />
              </Columns>
            </asp:GridView>
          </td>
          <td valign="top">
            <asp:DetailsView ID="DetailsView1" runat="server"
 
              AutoGenerateRows="True" DataKeyNames="CustomerID"
              DataSourceID="Details" Height="50px" Width="301px">
            </asp:DetailsView>
          </td>
        </tr>
      </table>
      &nbsp;&nbsp;
      <asp:SqlDataSource ID="Details" runat="server" 
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString
 %>"
        SelectCommand="SELECT * FROM [Customers] WHERE ([CustomerID] = @CustomerID)">
        <SelectParameters>
          <asp:ControlParameter ControlID="GridView1" Name="CustomerID"
 
            PropertyName="SelectedValue"
            Type="String" />
        </SelectParameters>
      </asp:SqlDataSource>
      <asp:SqlDataSource ID="Customers" runat="server" 
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString
 %>"
        SelectCommand="SELECT [CompanyName], [ContactName], [CustomerID] FROM
 [Customers]">
      </asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

DetailsView コントロールを使用してレコードを追加、削除、および編集する方法のコード例を次に示します。

Visual Basic

<%@ Page Language="VB" %>

<script runat="server">
  Sub CustomerDetail_ItemInserted(ByVal sender
 As Object, _
    ByVal e As DetailsViewInsertedEventArgs)
    ' Refresh the GridView control after a new record is inserted in
 
    ' the DetailsView control.
    CustomersView.DataBind()
  End Sub
  
  Sub CustomerDetail_ItemInserting(ByVal sender
 As Object, _
    ByVal e As DetailsViewInsertEventArgs)
    ' Iterate though the values entered by the user and HTML encode
 
    ' the values. This helps prevent malicious values from being 
    ' stored in the data source.
    For i As Integer = 0
 To e.Values.Count - 1
      If e.Values(i) IsNot Nothing Then
        e.Values(i) = Server.HtmlEncode(e.Values(i).ToString())
      End If
    Next
  End Sub
  
  Sub CustomerDetail_ItemUpdated(ByVal sender
 As Object, _
    ByVal e As DetailsViewUpdatedEventArgs)
    ' Refresh the GridView control after a new record is updated 
    ' in the DetailsView control.
    CustomersView.DataBind()
  End Sub
  
  Sub CustomerDetail_ItemUpdating(ByVal sender
 As Object, _
    ByVal e As DetailsViewUpdateEventArgs)
    ' Iterate though the values entered by the user and HTML encode
 
    ' the values. This helps prevent malicious values from being 
    ' stored in the data source.
    For i As Integer = 0
 To e.NewValues.Count - 1
      If e.NewValues(i) IsNot Nothing Then
        e.NewValues(i) = Server.HtmlEncode(e.NewValues(i).ToString())
      End If
    Next
  End Sub
  
  Sub CustomerDetail_ItemDeleted(ByVal sender
 As Object, _
    ByVal e As DetailsViewDeletedEventArgs)
    ' Refresh the GridView control after a new record is updated 
    ' in the DetailsView control.
    CustomersView.DataBind()
  End Sub
</script>

<html>
<body>
  <form id="Form1" runat="server">
    <h3>DetailsView Example</h3>
    <table cellspacing="10">
      <tr>
        <td>
          <!-- Use a GridView control in combination with
      -->
          <!-- a DetailsView control to display master-detail
  -->
          <!-- information. When the user selects a store from
 -->
          <!-- GridView control, the customers's detailed      -->
          <!-- information is displayed in
 the DetailsView     -->
          <!-- control.                                        -->
          <asp:GridView ID="CustomersView" DataSourceID="Customers"
 
            AutoGenerateColumns="False"
            DataKeyNames="CustomerID" runat="server">
            <HeaderStyle BackColor="Blue" ForeColor="White"
 />
            <Columns>
              <asp:CommandField ShowSelectButton="True"
 />
              <asp:BoundField DataField="ContactName"
 
                HeaderText="ContactName" />
              <asp:BoundField DataField="CompanyName"
 
                HeaderText="CompanyName" />
            </Columns>
          </asp:GridView>
        </td>
        <td valign="top">
          <asp:DetailsView ID="CustomerDetail"
 DataSourceID="Details" 
            AutoGenerateRows="false"
            AutoGenerateInsertButton="true" 
            AutoGenerateEditButton="true" 
            AutoGenerateDeleteButton="true"
            EmptyDataText="No records." 
            DataKeyNames="CustomerID" GridLines="Both"
 
            OnItemInserted="CustomerDetail_ItemInserted"
            OnItemInserting="CustomerDetail_ItemInserting"
 
            OnItemUpdated="CustomerDetail_ItemUpdated"
            OnItemUpdating="CustomerDetail_ItemUpdating"
 
            OnItemDeleted="CustomerDetail_ItemDeleted"
            runat="server">
            <HeaderStyle BackColor="Navy" ForeColor="White"
 />
            <RowStyle BackColor="White" />
            <AlternatingRowStyle BackColor="LightGray"
 />
            <EditRowStyle BackColor="LightCyan"
 />
            <Fields>
              <asp:BoundField DataField="CustomerID"
 HeaderText="CustomerID" 
                ReadOnly="True"
 />
              <asp:BoundField DataField="ContactName"
 HeaderText="ContactName" />
              <asp:BoundField DataField="ContactTitle"
 HeaderText="ContactTitle" />
              <asp:BoundField DataField="CompanyName"
 HeaderText="CompanyName" />
              <asp:BoundField DataField="Address"
 HeaderText="Address" />
              <asp:BoundField DataField="City"
 HeaderText="City" />
              <asp:BoundField DataField="Region"
 HeaderText="Region" />
              <asp:BoundField DataField="PostalCode"
 HeaderText="PostalCode" />
              <asp:BoundField DataField="Country"
 HeaderText="Country" />
              <asp:BoundField DataField="Phone"
 HeaderText="Phone" />
              <asp:BoundField DataField="Fax" HeaderText="Fax"
 />
            </Fields>
          </asp:DetailsView>
        </td>
      </tr>
    </table>
    <!-- This example uses Microsoft SQL Server and connects
 -->
    <!-- to the Northwind sample database.                
   -->
    <!-- It is strongly recommended that each
 data-bound     -->
    <!-- control uses a separate data source control.        -->
    <asp:SqlDataSource ID="Customers" runat="server"
 
      ConnectionString=
        "<%$ ConnectionStrings:NorthwindConnectionString %>"
      SelectCommand="SELECT [CompanyName], [ContactName], [CustomerID] 
        FROM [Customers]">
    </asp:SqlDataSource>
    <!-- Add a filter to the data source control for
 the     -->
    <!-- DetailsView control to display the details of
 the   -->
    <!-- store selected in the GridView control.          
   -->
    <asp:SqlDataSource ID="Details" 
      ConnectionString=
        "<%$ ConnectionStrings:NorthwindConnectionString %>"
      runat="server" 
      SelectCommand="SELECT * FROM [Customers] 
        WHERE ([CustomerID] = @CustomerID)"
      DeleteCommand="DELETE FROM [Customers] 
        WHERE [CustomerID] = @CustomerID"
      InsertCommand="INSERT INTO [Customers] ([CustomerID], 
        [CompanyName], [ContactName], [ContactTitle], [Address], 
        [City], [Region], [PostalCode], [Country], [Phone], [Fax]) 
        VALUES (@CustomerID, @CompanyName, @ContactName, 
        @ContactTitle, @Address, @City, @Region, @PostalCode, 
        @Country, @Phone, @Fax)"
      UpdateCommand="UPDATE [Customers] SET 
        [CompanyName] = @CompanyName, 
        [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, 
        [Address] = @Address, [City] = @City, [Region] = @Region, 
        [PostalCode] = @PostalCode, [Country] = @Country, 
        [Phone] = @Phone, [Fax] = @Fax 
        WHERE [CustomerID] = @CustomerID">
      <SelectParameters>
        <asp:ControlParameter ControlID="CustomersView"
 
          Name="CustomerID" PropertyName="SelectedValue"
          Type="String" />
      </SelectParameters>
      <DeleteParameters>
        <asp:Parameter Name="CustomerID" Type="String"
 />
      </DeleteParameters>
      <UpdateParameters>
        <asp:Parameter Name="CompanyName" Type="String"
 />
        <asp:Parameter Name="ContactName" Type="String"
 />
        <asp:Parameter Name="ContactTitle" 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="Country" Type="String"
 />
        <asp:Parameter Name="Phone" Type="String"
 />
        <asp:Parameter Name="Fax" Type="String"
 />
        <asp:Parameter Name="CustomerID" Type="String"
 />
      </UpdateParameters>
      <InsertParameters>
        <asp:Parameter Name="CustomerID" Type="String"
 />
        <asp:Parameter Name="CompanyName" Type="String"
 />
        <asp:Parameter Name="ContactName" Type="String"
 />
        <asp:Parameter Name="ContactTitle" 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="Country" Type="String"
 />
        <asp:Parameter Name="Phone" Type="String"
 />
        <asp:Parameter Name="Fax" Type="String"
 />
      </InsertParameters>
    </asp:SqlDataSource>
  </form>
</body>
</html>

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

<script runat="server">
  void CustomerDetail_ItemInserted(object sender, 
    DetailsViewInsertedEventArgs e)
  {
    // Refresh the GridView control after a new record is inserted 
    // in the DetailsView control.
    CustomersView.DataBind();
  }

  void CustomerDetail_ItemInserting(object sender, 
    DetailsViewInsertEventArgs e)
  {
    // Iterate though the values entered by the user and HTML encode
 
    // the values. This helps prevent malicious values from being 
    // stored in the data source.
    for (int i = 0; i < e.Values.Count;
 i++)
    {
      if (e.Values[i] != null)
      {
        e.Values[i] = Server.HtmlEncode(e.Values[i].ToString());
      }
    }
  }

  void CustomerDetail_ItemUpdated(object sender, 
    DetailsViewUpdatedEventArgs e)
  {
    // Refresh the GridView control after a new record is updated 
    // in the DetailsView control.
    CustomersView.DataBind();
  }

  void CustomerDetail_ItemUpdating(object sender, 
    DetailsViewUpdateEventArgs e)
  {
    // Iterate though the values entered by the user and HTML encode
 
    // the values. This helps prevent malicious values from being 
    // stored in the data source.
    for (int i = 0; i < e.NewValues.Count;
 i++)
    {
      if (e.NewValues[i] != null)
      {
        e.NewValues[i] = Server.HtmlEncode(e.NewValues[i].ToString());
      }
    }
  }

  void CustomerDetail_ItemDeleted(object sender, 
    DetailsViewDeletedEventArgs e)
  {
    // Refresh the GridView control after a new record is updated 
    // in the DetailsView control.
    CustomersView.DataBind();
  }
</script>

<html>
<body>
  <form id="Form1" runat="server">
    <h3>
      DetailsView Example</h3>
    <table cellspacing="10">
      <tr>
        <td>
          <!-- Use a GridView control in combination with 
     -->
          <!-- a DetailsView control to display master-detail  -->
          <!-- information. When the user selects a store from -->
          <!-- GridView control, the customers//s detailed     -->
          <!-- information is displayed in the DetailsView
     -->
          <!-- control.                                        -->
          <asp:GridView ID="CustomersView" DataSourceID="Customers"
 
            AutoGenerateColumns="False"
            DataKeyNames="CustomerID" runat="server">
            <HeaderStyle BackColor="Blue" ForeColor="White"
 />
            <Columns>
              <asp:CommandField ShowSelectButton="True" />
              <asp:BoundField DataField="ContactName" 
                HeaderText="ContactName" />
              <asp:BoundField DataField="CompanyName" 
                HeaderText="CompanyName" />
            </Columns>
          </asp:GridView>
        </td>
        <td valign="top">
          <asp:DetailsView ID="CustomerDetail" 
            DataSourceID="Details" AutoGenerateRows="false"
            AutoGenerateInsertButton="true" 
            AutoGenerateEditButton="true" 
            AutoGenerateDeleteButton="true"
            EmptyDataText="No records." 
            DataKeyNames="CustomerID" GridLines="Both" 
            OnItemInserted="CustomerDetail_ItemInserted"
            OnItemInserting="CustomerDetail_ItemInserting" 
            OnItemUpdated="CustomerDetail_ItemUpdated"
            OnItemUpdating="CustomerDetail_ItemUpdating" 
            OnItemDeleted="CustomerDetail_ItemDeleted"
            runat="server">
            <HeaderStyle BackColor="Navy" ForeColor="White"
 />
            <RowStyle BackColor="White" />
            <AlternatingRowStyle BackColor="LightGray" />
            <EditRowStyle BackColor="LightCyan" />
            <Fields>
              <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"
 ReadOnly="True" />
              <asp:BoundField DataField="ContactName" HeaderText="ContactName"
 />
              <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle"
 />
              <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
 />
              <asp:BoundField DataField="Address" HeaderText="Address"
 />
              <asp:BoundField DataField="City" HeaderText="City"
 />
              <asp:BoundField DataField="Region" HeaderText="Region"
 />
              <asp:BoundField DataField="PostalCode" HeaderText="PostalCode"
 />
              <asp:BoundField DataField="Country" HeaderText="Country"
 />
              <asp:BoundField DataField="Phone" HeaderText="Phone"
 />
              <asp:BoundField DataField="Fax" HeaderText="Fax"
 />
            </Fields>
          </asp:DetailsView>
        </td>
      </tr>
    </table>
    <!-- This example uses Microsoft SQL Server and connects -->
    <!-- to the Northwind sample database.                   -->
    <!-- It is strongly recommended that each data-bound     -->
    <!-- control uses a separate data source control.        -->
    <asp:SqlDataSource ID="Customers" runat="server" 
      ConnectionString=
        "<%$ ConnectionStrings:NorthwindConnectionString %>"
      SelectCommand="SELECT [CompanyName], [ContactName], [CustomerID] 
        FROM [Customers]">
    </asp:SqlDataSource>
    <!-- Add a filter to the data source control for the  
   -->
    <!-- DetailsView control to display the details of the   -->
    <!-- store selected in the GridView control.          
   -->
    <asp:SqlDataSource ID="Details" 
      ConnectionString=
        "<%$ ConnectionStrings:NorthwindConnectionString %>"
      runat="server" 
      SelectCommand="SELECT * FROM [Customers] 
        WHERE ([CustomerID] = @CustomerID)"
      DeleteCommand="DELETE FROM [Customers] 
        WHERE [CustomerID] = @CustomerID"
      InsertCommand="INSERT INTO [Customers] ([CustomerID], 
        [CompanyName], [ContactName], [ContactTitle], [Address], 
        [City], [Region], [PostalCode], [Country], [Phone], [Fax]) 
        VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, 
        @Address, @City, @Region, @PostalCode, @Country, @Phone, @Fax)"
      UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, 
        [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, 
        [Address] = @Address, [City] = @City, [Region] = @Region, 
        [PostalCode] = @PostalCode, [Country] = @Country, 
        [Phone] = @Phone, [Fax] = @Fax 
        WHERE [CustomerID] = @CustomerID">
      <SelectParameters>
        <asp:ControlParameter ControlID="CustomersView" 
          Name="CustomerID" PropertyName="SelectedValue"
          Type="String" />
      </SelectParameters>
      <DeleteParameters>
        <asp:Parameter Name="CustomerID" Type="String" />
      </DeleteParameters>
      <UpdateParameters>
        <asp:Parameter Name="CompanyName" Type="String" />
        <asp:Parameter Name="ContactName" Type="String" />
        <asp:Parameter Name="ContactTitle" 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="Country" Type="String" />
        <asp:Parameter Name="Phone" Type="String" />
        <asp:Parameter Name="Fax" Type="String" />
        <asp:Parameter Name="CustomerID" Type="String" />
      </UpdateParameters>
      <InsertParameters>
        <asp:Parameter Name="CustomerID" Type="String" />
        <asp:Parameter Name="CompanyName" Type="String" />
        <asp:Parameter Name="ContactName" Type="String" />
        <asp:Parameter Name="ContactTitle" 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="Country" Type="String" />
        <asp:Parameter Name="Phone" Type="String" />
        <asp:Parameter Name="Fax" Type="String" />
      </InsertParameters>
    </asp:SqlDataSource>
  </form>
</body>
</html>

宣言によって行フィールドを DetailsView コントロールに追加する方法のコード例を次に示します。

Visual Basic

<%@ Page Language="VB" %>

<html>
<body>
  <form id="Form1" runat="server">
    <table cellspacing="10">
      <tr>
        <td>
          <!-- Use a GridView control in combination with
      -->
          <!-- a DetailsView control to display master-detail
  -->
          <!-- information. When the user selects a store from
 -->
          <!-- GridView control, the store's detailed          -->
          <!-- information is displayed in
 the DetailsView     -->
          <!-- control.                                        -->
          <asp:GridView ID="GridView1" runat="server"
 
            DataSourceID="Customers" AutoGenerateColumns="False"
 
            DataKeyNames="CustomerID">
            <Columns>
              <asp:CommandField ShowSelectButton="True"
 />
              <asp:BoundField DataField="ContactName"
 HeaderText="ContactName" />
              <asp:BoundField DataField="CompanyName"
 HeaderText="CompanyName" />
            </Columns>
          </asp:GridView>
        </td>
        <td valign="top">
          <asp:DetailsView ID="DetailsView" runat="server"
            DataSourceID="Details" AutoGenerateRows="false"
            DataKeyNames="CustomerID" >
            <HeaderStyle BackColor="Navy" ForeColor="White"
 />
            <Fields>
              <asp:BoundField DataField="CustomerID"
 HeaderText="CustomerID" 
                ReadOnly="True"
 />
              <asp:BoundField DataField="ContactName"
 HeaderText="ContactName" />
              <asp:BoundField DataField="ContactTitle"
 HeaderText="ContactTitle" />
              <asp:BoundField DataField="CompanyName"
 HeaderText="CompanyName" />
              <asp:BoundField DataField="City"
 HeaderText="City" />
              <asp:BoundField DataField="Region"
 HeaderText="Region" />
              <asp:BoundField DataField="PostalCode"
 HeaderText="PostalCode" />
              <asp:BoundField DataField="Country"
 HeaderText="Country" />
            </Fields>
          </asp:DetailsView>
        </td>
      </tr>
    </table>
    <!-- This example uses Microsoft SQL Server and connects
 -->
    <!-- to the Northwind sample database.                
        -->
    <!-- It is strongly recommended that each
 data-bound     -->
    <!-- control uses a separate data source control.        -->
    <asp:SqlDataSource ID="Customers" runat="server"
 
      ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString
 %>"
      SelectCommand="SELECT [CompanyName], [ContactName], [CustomerID]
 FROM [Customers]">
    </asp:SqlDataSource>
    <!-- Add a filter to the data source control for
 the     -->
    <!-- DetailsView control to display the details of
 the   -->
    <!-- store selected in the GridView control.          
   -->
    <asp:SqlDataSource ID="Details" runat="server" 
      ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString
 %>"
      SelectCommand="SELECT * FROM [Customers] WHERE ([CustomerID]
 = @CustomerID)">
      <SelectParameters>
        <asp:ControlParameter ControlID="GridView1"
 Name="CustomerID" 
          PropertyName="SelectedValue"
          Type="String" />
      </SelectParameters>
    </asp:SqlDataSource>
  </form>
</body>
</html>

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

<html>
<body>
  <form id="Form1" runat="server">
    <table cellspacing="10">
      <tr>
        <td>
          <!-- Use a GridView control in combination with 
     -->
          <!-- a DetailsView control to display master-detail  -->
          <!-- information. When the user selects a store from -->
          <!-- GridView control, the store's detailed          -->
          <!-- information is displayed in the DetailsView
     -->
          <!-- control.                                        -->
          <asp:GridView ID="GridView1" runat="server" 
            DataSourceID="Customers" AutoGenerateColumns="False"
 
            DataKeyNames="CustomerID">
            <Columns>
              <asp:CommandField ShowSelectButton="True" />
              <asp:BoundField DataField="ContactName" HeaderText="ContactName"
 />
              <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
 />
            </Columns>
          </asp:GridView>
        </td>
        <td valign="top">
          <asp:DetailsView ID="DetailsView" runat="server"
            DataSourceID="Details" AutoGenerateRows="false"
            DataKeyNames="CustomerID" >
            <HeaderStyle BackColor="Navy" ForeColor="White"
 />
            <Fields>
              <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"
 
                ReadOnly="True" />
              <asp:BoundField DataField="ContactName" HeaderText="ContactName"
 />
              <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle"
 />
              <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
 />
              <asp:BoundField DataField="City" HeaderText="City"
 />
              <asp:BoundField DataField="Region" HeaderText="Region"
 />
              <asp:BoundField DataField="PostalCode" HeaderText="PostalCode"
 />
              <asp:BoundField DataField="Country" HeaderText="Country"
 />
            </Fields>
          </asp:DetailsView>
        </td>
      </tr>
    </table>
    <!-- This example uses Microsoft SQL Server and connects -->
    <!-- to the Northwind sample database.                        -->
    <!-- It is strongly recommended that each data-bound     -->
    <!-- control uses a separate data source control.        -->
    <asp:SqlDataSource ID="Customers" runat="server" 
      ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
      SelectCommand="SELECT [CompanyName], [ContactName], [CustomerID] FROM
 [Customers]">
    </asp:SqlDataSource>
    <!-- Add a filter to the data source control for the  
   -->
    <!-- DetailsView control to display the details of the   -->
    <!-- store selected in the GridView control.          
   -->
    <asp:SqlDataSource ID="Details" runat="server" 
      ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
      SelectCommand="SELECT * FROM [Customers] WHERE ([CustomerID] = @CustomerID)">
      <SelectParameters>
        <asp:ControlParameter ControlID="GridView1" Name="CustomerID"
 
          PropertyName="SelectedValue"
          Type="String" />
      </SelectParameters>
    </asp:SqlDataSource>
  </form>
</body>
</html>

.NET Framework のセキュリティ

AspNetHostingPermission (ホスト環境で DetailsView コントロールを実行するために必要なアクセス許可)。AspNetHostingPermissionLevel.Minimal (関連する列挙値)

継承階層

System.Object
   System.Web.UI.Control
     System.Web.UI.WebControls.WebControl
       System.Web.UI.WebControls.BaseDataBoundControl
         System.Web.UI.WebControls.DataBoundControl
           System.Web.UI.WebControls.CompositeDataBoundControl
            System.Web.UI.WebControls.DetailsView

スレッドセーフ

この型の public static (Visual Basic では Shared) メンバはすべて、スレッドセーフです。インスタンスメンバの場合は、スレッドセーフであるとは限りません。

プラットフォーム

Windows 98, Windows 2000 SP4, Windows Server 2003, Windows XP Media Center Edition, Windows XP Professional x64 Edition, Windows XP SP2, Windows XP Starter Edition

開発プラットフォームの中には、.NET Framework によってサポートされていないバージョンがあります。サポートされているバージョンについては、「システム要件」を参照してください。

バージョン情報

.NET Framework
サポート対象 : 2.0

参照

関連項目
DetailsView メンバ
System.Web.UI.WebControls 名前空間
IsPrimitive
AccessDataSource クラス
AllowPaging
AutoGenerateRows
AutoGenerateDeleteButton
AutoGenerateEditButton
AutoGenerateInsertButton
Fields
Rows
BoundField クラス
ButtonField クラス
CommandField クラス
CheckBoxField クラス
GridView
HyperLinkField
SqlDataSource
TemplateField
その他の技術情報
データソースコントロールとパラメータの使用
データソースコントロールの概要
ASP.NET データアクセスの概要