DetailsView とは異なり、FormView はフィールドで構成されていません。 代わりに、FormView はテンプレートを使用してレンダリングされます。 このチュートリアルでは、FormView コントロールを使用して、データの表示を少なくする方法について説明します。
イントロダクション
最後の 2 つのチュートリアルでは、TemplateFields を使用して GridView コントロールと DetailsView コントロールの出力をカスタマイズする方法について説明しました。 TemplateFields を使用すると、特定のフィールドの内容を高度にカスタマイズできますが、最終的には GridView と DetailsView の両方に、グリッドのようなボックスな外観があります。 多くのシナリオでは、このようなグリッドに似たレイアウトが理想的ですが、より流動的な場合は、より少ない剛性のディスプレイが必要になります。 1 つのレコードを表示する場合は、FormView コントロールを使用してこのような流動的なレイアウトが可能です。
DetailsView とは異なり、FormView はフィールドで構成されていません。 BoundField または TemplateField を FormView に追加することはできません。 代わりに、FormView はテンプレートを使用してレンダリングされます。 FormView は、1 つの TemplateField を含む DetailsView コントロールと考えてください。 FormView では、次のテンプレートがサポートされています。
-
ItemTemplateFormView に表示される特定のレコードをレンダリングするために使用されます -
HeaderTemplate省略可能なヘッダー行を指定するために使用されます -
FooterTemplate省略可能なフッター行を指定するために使用されます -
EmptyDataTemplateFormView のDataSourceにレコードがない場合、コントロールのマークアップをレンダリングするためにEmptyDataTemplateの代わりにItemTemplateが使用されます。 -
PagerTemplateは、ページングが有効になっている FormView のページング インターフェイスをカスタマイズするために使用できます。 -
EditItemTemplate/InsertItemTemplateこのような機能をサポートする FormViews の編集インターフェイスまたは挿入インターフェイスをカスタマイズするために使用されます。
このチュートリアルでは、FormView コントロールを使用して、製品の剛性の低い表示を表示する方法について説明します。 名前、カテゴリ、仕入先などのフィールドを持つ代わりに、FormView の ItemTemplate では、ヘッダー要素と <table> の組み合わせを使用してこれらの値が表示されます (図 1 を参照)。
図 1: DetailsView に表示される Grid-Like レイアウトから FormView が分割される (フルサイズの画像を表示する をクリックします)
手順 1: データを FormView にバインドする
FormView.aspx ページを開き、FormView をツールボックスからデザイナーにドラッグします。 最初に FormView を追加すると、灰色のボックスとして表示され、 ItemTemplate が必要であることを示します。
図 2: フォーム ビューは、 ItemTemplate が提供されるまでデザイナーでレンダリングできません (フルサイズの画像を表示する をクリックします)。
ItemTemplateは、手動で (宣言構文を使用して) 作成することも、FormView をデザイナーを介してデータ ソース コントロールにバインドすることによって自動的に作成することもできます。 この自動作成 ItemTemplate には、各フィールドの名前を一覧表示する HTML と、 Text プロパティがフィールドの値にバインドされている Label コントロールが含まれています。 この方法では、 InsertItemTemplate と EditItemTemplateも自動的に作成され、どちらもデータ ソース コントロールによって返される各データ フィールドの入力コントロールが設定されます。
テンプレートを自動作成する場合は、FormView のスマート タグから、 ProductsBLL クラスの GetProducts() メソッドを呼び出す新しい ObjectDataSource コントロールを追加します。 これにより、 ItemTemplate、 InsertItemTemplate、および EditItemTemplateを含む FormView が作成されます。 [ソース] ビューで、編集または挿入をサポートする FormView を作成する必要がないため、 InsertItemTemplate と EditItemTemplate を削除します。 次に、ItemTemplate 内のマークアップをクリアして、作業を開始できるように空の状態にします。
ItemTemplateを手動でビルドする場合は、ツールボックスからデザイナーに ObjectDataSource をドラッグして追加および構成できます。 ただし、デザイナーから FormView のデータ ソースを設定しないでください。 代わりに、ソース ビューに移動し、FormView の DataSourceID プロパティを ObjectDataSource の ID 値に手動で設定します。 次に、 ItemTemplateを手動で追加します。
どの方法を採用するかに関係なく、この時点で FormView の宣言型マークアップは次のようになります。
<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
<ItemTemplate>
</ItemTemplate>
</asp:FormView>
FormView のスマート タグの [ページングを有効にする] チェック ボックスをオンにします。これにより、 AllowPaging="True" 属性が FormView の宣言構文に追加されます。 また、 EnableViewState プロパティを False に設定します。
手順 2: ItemTemplateのマークアップを定義する
FormView が ObjectDataSource コントロールにバインドされ、ページングをサポートするように構成されたので、 ItemTemplateのコンテンツを指定する準備ができました。 このチュートリアルでは、製品の名前を <h3> 見出しに表示します。 その後、HTML <table> を使用して、4 列目のテーブルに残りの製品プロパティを表示し、1 列目と 3 列目にプロパティ名と 2 番目と 4 番目の列の値を一覧表示します。
このマークアップは、デザイナーで FormView のテンプレート編集インターフェイスを使用して入力することも、宣言構文を使用して手動で入力することもできます。 テンプレートを使用する場合、通常は宣言構文を直接操作する方が速くなりますが、最も快適な手法を自由に使用できます。
次のマークアップは、 ItemTemplateの構造が完了した後の FormView 宣言型マークアップを示しています。
<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
AllowPaging="True" EnableViewState="False">
<ItemTemplate>
<hr />
<h3><%# Eval("ProductName") %></h3>
<table border="0">
<tr>
<td class="ProductPropertyLabel">Category:</td>
<td class="ProductPropertyValue">
<%# Eval("CategoryName") %></td>
<td class="ProductPropertyLabel">Supplier:</td>
<td class="ProductPropertyValue">
<%# Eval("SupplierName")%></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Price:</td>
<td class="ProductPropertyValue"><%# Eval("UnitPrice",
"{0:C}") %></td>
<td class="ProductPropertyLabel">Units In Stock:</td>
<td class="ProductPropertyValue">
<%# Eval("UnitsInStock")%></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Units On Order:</td>
<td class="ProductPropertyValue">
<%# Eval("UnitsOnOrder") %></td>
<td class="ProductPropertyLabel">Reorder Level:</td>
<td class="ProductPropertyValue">
<%# Eval("ReorderLevel")%></td>
</tr>
<tr>
<td class="ProductPropertyLabel">Qty/Unit</td>
<td class="ProductPropertyValue">
<%# Eval("QuantityPerUnit") %></td>
<td class="ProductPropertyLabel">Discontinued:</td>
<td class="ProductPropertyValue">
<asp:CheckBox runat="server" Enabled="false"
Checked='<%# Eval("Discontinued") %>' />
</td>
</tr>
</table>
<hr />
</ItemTemplate>
</asp:FormView>
たとえば、データ バインド構文 ( <%# Eval("ProductName") %>) をテンプレートの出力に直接挿入できることに注意してください。 つまり、Label コントロールの Text プロパティに割り当てる必要はありません。 たとえば、ProductNameを使用して<h3>要素に表示される<h3><%# Eval("ProductName") %></h3>値があります。この値は、製品 Chai に対して<h3>Chai</h3>としてレンダリングされます。
ProductPropertyLabelおよびProductPropertyValue CSS クラスは、<table>の製品プロパティ名と値のスタイルを指定するために使用されます。 これらの CSS クラスは Styles.css で定義され、プロパティ名が太字で右揃えになり、プロパティ値に右パディングが追加されます。
FormView で使用できる CheckBoxFields がないため、 Discontinued 値をチェック ボックスとして表示するには、独自の CheckBox コントロールを追加する必要があります。
Enabled プロパティは False に設定され、読み取り専用になり、CheckBox の Checked プロパティは Discontinued データ フィールドの値にバインドされます。
ItemTemplateが完了すると、製品情報ははるかに流動的に表示されます。 最後のチュートリアル (図 3) の DetailsView 出力と、このチュートリアルの FormView によって生成された出力を比較します (図 4)。
図 3: 厳密な DetailsView 出力 (フルサイズの画像を表示する をクリックします)
図 4: Fluid FormView の出力 (フルサイズの画像を表示する をクリックします)
概要
GridView コントロールと DetailsView コントロールは TemplateFields を使用して出力をカスタマイズできますが、両方ともグリッドのようなボックス形式でデータを表示します。 1 つのレコードを表示する必要がある場合は、剛性の低いレイアウトを使用する必要がある場合、FormView が理想的な選択肢です。 DetailsView と同様に、FormView は DataSourceから 1 つのレコードをレンダリングしますが、DetailsView とは異なり、テンプレートだけで構成され、フィールドはサポートされません。
このチュートリアルで説明したように、FormView を使用すると、1 つのレコードを表示するときに、より柔軟なレイアウトが可能になります。 今後のチュートリアルでは、FormsView と同じレベルの柔軟性を提供する DataList コントロールと Repeater コントロールを調べますが、複数のレコード (GridView など) を表示できます。
プログラミングに満足!
著者について
7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジを使用しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・セルフ ASP.NET 24時間で2.0です。 彼には mitchell@4GuysFromRolla.comで連絡できます。
特別な感謝
このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は E.R. Gilmore でした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、mitchell@4GuysFromRolla.comにメッセージを送ってください。