FormView のテンプレートの使用 (C#)
DetailsView とは異なり、FormView はフィールドで構成されていません。 代わりに、FormView はテンプレートを使用してレンダリングされます。 このチュートリアルでは、FormView コントロールを使用して、より固定度の低いデータ表示を行う方法について説明します。
はじめに
前の 2 つのチュートリアルでは、TemplateField を使用して GridView および DetailsView コントロールの出力をカスタマイズする方法について説明しました。 TemplateField を使用すると、特定のフィールドの内容を高度にカスタマイズできますが、最終的には GridView と DetailsView の両方が、グリッドのようなボックス型の外観になります。 多くのシナリオでは、このようなグリッドに似たレイアウトが理想的ですが、より流動的で固定度の低い表示が必要になります。 1 つのレコードを表示する場合は、FormView コントロールを使用してこのような流動レイアウトが可能です。
DetailsView とは異なり、FormView はフィールドで構成されていません。 BoundField または TemplateField を FormView に追加することはできません。 代わりに、FormView はテンプレートを使用してレンダリングされます。 FormView は、1 つの TemplateField を含む DetailsView コントロールと考えてください。 FormView は、次のテンプレートをサポートしています。
ItemTemplate: FormView に表示される特定のレコードをレンダリングするために使用されるHeaderTemplate: 省略可能なヘッダー行を指定するために使用されるFooterTemplate: 省略可能なフッター行を指定するために使用されるEmptyDataTemplate: FormView のDataSourceにレコードがない場合は、コントロールのマークアップをレンダリングするためにItemTemplateの代わりにEmptyDataTemplateが使用されるPagerTemplate: ページングが有効になっている FormView のページング インターフェイスをカスタマイズするために使用できるEditItemTemplate/InsertItemTemplate: FormView の編集インターフェイスまたは挿入インターフェイスをカスタマイズするために使用される (そのような機能がサポートされる場合)
このチュートリアルでは、FormView コントロールを使用して、より固定度の低い製品表示を行う方法について説明します。 FormView の ItemTemplate は、名前、カテゴリ、仕入先などのフィールドを使用する代わりに、ヘッダー要素と <table> の組み合わせを使用してこれらの値を表示します (図 1 を参照)。
図 1: DetailsView に表示されるグリッドに似たレイアウトから脱却した FormView (クリックするとフルサイズの画像が表示されます)
ステップ 1: データを FormView にバインドする
FormView.aspx ページを開き、FormView をツールボックスからデザイナーにドラッグします。 FormView を初めて追加したときは、灰色のボックスとして表示され、ItemTemplate が必要であることが示されます。
図 2: FormView は、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 のスマート タグの [ページングを有効にする] チェック ボックスをオンにします。これにより、FormView の宣言構文に AllowPaging="True" 属性が追加されます。 また、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") %> は、テンプレートの出力に直接挿入できることに注意してください。 つまり、ラベル コントロールの Text プロパティに割り当てる必要はありません。 たとえば、<h3><%# Eval("ProductName") %></h3> を使用して <h3> 要素に ProductName 値を表示しています。製品 Chai は <h3>Chai</h3> としてレンダリングされます。
ProductPropertyLabel および ProductPropertyValue CSS クラスは、製品プロパティの名前と値のスタイルを指定するために <table> 内で使用されます。 これらの CSS クラスが Styles.css で定義され、プロパティ名は太字で右揃えになり、プロパティ値に右パディングが追加されます。
FormView で使用できる CheckBoxField がないため、Discontinued 値をチェックボックスとして表示するには、独自の CheckBox コントロールを追加する必要があります。 Enabled プロパティは False に設定され、読み取り専用になり、CheckBox の Checked プロパティは Discontinued データ フィールドの値にバインドされます。
ItemTemplate が完成すると、製品情報がより流動的に表示されます。 前のチュートリアルの DetailsView 出力 (図 3) と、このチュートリアルの FormView によって生成された出力 (図 4) を比較します。
図 3: 固定的な DetailsView 出力 (クリックするとフルサイズの画像が表示されます)
図 4: 流動的な FormView 出力 (クリックするとフルサイズの画像が表示されます)
まとめ
GridView および DetailsView コントロールは TemplateField を使用して出力をカスタマイズできますが、両方ともグリッドのようなボックス形式でデータを表示します。 1 つのレコードを固定度の低いレイアウトで表示する必要がある場合は、FormView が理想的な選択肢です。 DetailsView と同様に、FormView はその DataSource から 1 つのレコードをレンダリングしますが、DetailsView とは異なり、テンプレートだけで構成され、フィールドはサポートしません。
このチュートリアルで説明したように、FormView を使用すると、1 つのレコードを表示するときに、より柔軟なレイアウトが可能になります。 今後のチュートリアルでは、FormsView と同じレベルの柔軟性を提供するが (GridView のように) 複数のレコードを表示できる DataList および Repeater コントロールを調べます。
プログラミングに満足!
著者について
7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジに取り組んでいます。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。
特別な感謝
このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は E.R でした。Gilmore でした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、 にmitchell@4GuysFromRolla.com行をドロップしてください。