次の方法で共有

FormView Web サーバー コントロールのテンプレートの作成

更新 : 2007 年 11 月

FormView コントロールをカスタマイズするには、コントロールによって表示されているデータをユーザーが表示したり、変更したりできるようにするテンプレートを追加します。各テンプレートの内容は、マークアップ、データ バインディング式を含むコントロール、および FormView コントロールのモードを変更するコマンド ボタンで構成されます。

ms227423.alert_note(ja-jp,VS.90).gifメモ :

データ バインド式の詳細については、「データ バインド式の概要」を参照してください。

表示テンプレート

FormView コントロールの主要な表示テンプレートは、ItemTemplate テンプレートです。ItemTemplate テンプレートは、バインド データを読み取り専用モードで表示します。ItemTemplate に含まれているコントロール (Label コントロールなど) は、データの表示のみを行うコントロールです。このテンプレートには、FormView コントロールのモードを変更し、現在のレコードを挿入、編集、または削除するコマンド ボタンを追加することもできます。テンプレートのコントロールをデータに関連付けるには、次の例に示すように、一方向のデータ バインディングに必要な Eval メソッドを含むデータ バインド式を使用します。

<asp:FormView ID="FormView1"
  DataSourceID="SqlDataSource1"
  DataKeyNames="ProductID"     
  RunAt="server">

  <ItemTemplate>
    <table>
      <tr><td align="right"><b>Product ID:</b></td>       <td><%# Eval("ProductID") %></td></tr>
      <tr><td align="right"><b>Product Name:</b></td>     <td><%# Eval("ProductName") %></td></tr>
      <tr><td align="right"><b>Category ID:</b></td>      <td><%# Eval("CategoryID") %></td></tr>
      <tr><td align="right"><b>Quantity Per Unit:</b></td><td><%# Eval("QuantityPerUnit") %></td></tr>
      <tr><td align="right"><b>Unit Price:</b></td>       <td><%# Eval("UnitPrice") %></td></tr>
    </table>                 
  </ItemTemplate>                   
</asp:FormView>

<asp:FormView ID="FormView1"
  DataSourceID="SqlDataSource1"
  DataKeyNames="ProductID"     
  RunAt="server">

  <ItemTemplate>
    <table>
      <tr><td align="right"><b>Product ID:</b></td>       <td><%# Eval("ProductID") %></td></tr>
      <tr><td align="right"><b>Product Name:</b></td>     <td><%# Eval("ProductName") %></td></tr>
      <tr><td align="right"><b>Category ID:</b></td>      <td><%# Eval("CategoryID") %></td></tr>
      <tr><td align="right"><b>Quantity Per Unit:</b></td><td><%# Eval("QuantityPerUnit") %></td></tr>
      <tr><td align="right"><b>Unit Price:</b></td>       <td><%# Eval("UnitPrice") %></td></tr>
    </table>                 
  </ItemTemplate>                 
</asp:FormView>

ItemTemplate テンプレートには、CommandName 値に基づいて FormView コントロールのモードを変更する LinkButton コントロールを含めることができます。New の CommandName 値は、レコードを挿入モードに設定し、InsertItemTemplate テンプレートを読み込みます。このテンプレートにより、ユーザーは新しいレコードの値を入力できるようになります。CommandName 値が Edit のボタンを ItemTemplate テンプレートに追加すると、FormView コントロールを編集モードに設定できるようになります。CommandName 値が Delete のボタンを ItemTemplate テンプレートに追加すると、ユーザーが現在のレコードをデータ ソースから削除できるようになります。

FormView コントロールで使用できる表示テンプレートには、この他に、バインディングする現在のレコードが存在しないときに表示される EmptyDataTemplate テンプレートと、ヘッダーとフッターの内容をそれぞれ定義する HeaderTemplate テンプレートと FooterTemplate テンプレートがあります。

編集テンプレートと挿入テンプレート

EditItemTemplate テンプレートを使用すると、ユーザーが既存のレコードを変更できるようになり、また InsertItemTemplate テンプレートを使用すると、データ ソースに挿入される新しいレコードの値を収集できるようになります。EditItemTemplate テンプレートと InsertItemTemplate テンプレートには、通常、TextBox、CheckBox、DropDownList などの、ユーザー入力を取得するコントロールを追加します。また、読み取り専用データを表示するコントロールや、ユーザーが現在のレコードを編集したり、新しいレコードを挿入したり、現在の操作をキャンセルしたりできるコマンド ボタンを追加することもできます。EditItemTemplate テンプレートと InsertItemTemplate テンプレートのコントロールをデータに関連付けるには、次の例に示すように、双方向のデータ バインディングに必要な Bind メソッドを含むデータ バインド式を使用します。

<asp:sqlDataSource ID="EmployeeDetailsSqlDataSource" 
  SelectCommand="SELECT EmployeeID, LastName, FirstName FROM Employees WHERE EmployeeID = @EmpID"

  InsertCommand="INSERT INTO Employees(LastName, FirstName) VALUES (@LastName, @FirstName); 
                 SELECT @EmpID = SCOPE_IDENTITY()"
  UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName 
                   WHERE EmployeeID=@EmployeeID"
  DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

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

  <SelectParameters>
    <asp:Parameter Name="EmpID" Type="Int32" DefaultValue="0" />
  </SelectParameters>

  <InsertParameters>
    <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
  </InsertParameters>

</asp:sqlDataSource>

<asp:sqlDataSource ID="EmployeeDetailsSqlDataSource" 
  SelectCommand="SELECT EmployeeID, LastName, FirstName FROM Employees WHERE EmployeeID = @EmpID"

  InsertCommand="INSERT INTO Employees(LastName, FirstName) VALUES (@LastName, @FirstName); 
                 SELECT @EmpID = SCOPE_IDENTITY()"
  UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName 
                   WHERE EmployeeID=@EmployeeID"
  DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"

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

  <SelectParameters>
    <asp:Parameter Name="EmpID" Type="Int32" DefaultValue="0" />
  </SelectParameters>

  <InsertParameters>
    <asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
  </InsertParameters>

</asp:sqlDataSource>
ms227423.alert_note(ja-jp,VS.90).gifメモ :

DropDownList などの ListControl コントロールを使用する際は、DropDownList コントロールの値を現在のバインド レコードに関連付け、一方で DropDownList コントロールのリスト値を別の値のリストに関連付けることが必要になる場合があります。そのような場合は、Bind 式を使用して、DropDownList コントロールの SelectedValue プロパティを現在のバインド レコードに関連付け、DropDownList コントロールのデータ ソース、DataTextField プロパティ、および DataValueField プロパティを値のリストに関連付けます。

EditItemTemplate テンプレートは、CommandName 値が Edit の コマンド ボタンをユーザーがクリックすると読み込まれます。CommandName が Update の LinkButton コマンド ボタンを追加すると、現在のバインド値を取得し、更新のためにデータ ソース コントロールに送ることができます。また、CommandName が Cancel の LinkButton コマンド ボタンを追加すると、現在のバインド値を破棄し、FormView コントロールを読み取り専用モードに戻して、ItemTemplate テンプレートを読み込むことができます。

InsertItemTemplate テンプレートは、CommandName が New のコマンド ボタンをユーザーがクリックすると読み込まれます。CommandName が Insert の LinkButton コマンド ボタンを追加すると、新しいレコードの値をデータ ソース コントロールに送ることができます。また、CommandName が Cancel の LinkButton コマンド ボタンを追加すると、新しい値を破棄し、FormView を読み取り専用モードに戻して、ItemTemplate テンプレートを読み込むことができます。

FormView コントロールを使用してデータを編集する例については、「FormView Web サーバー コントロールを使用したデータの変更」を参照してください。

データ ページング テンプレート

FormView コントロールでは、データのページは 1 つのバインド データです。FormView コントロールの AllowPaging プロパティに true を設定すると、FormView コントロールは、ページング用のユーザー インターフェイス (UI) コントロールを自動的に追加します。ページング用の UI は、PagerTemplate テンプレートを追加することによってカスタマイズできます。詳細については、「FormView Web サーバー コントロールでのページング」を参照してください。

FormView コントロール用の PagerTemplate テンプレートの例については、「FormView Web サーバー コントロールでのページング」を参照してください。

参照

概念

FormView Web サーバー コントロールの概要