FormView のテンプレートの使用 (C#)
DetailsView とは異なり、FormView はフィールドで構成されません。 代わりに、FormView はテンプレートを使用してレンダリングされます。 このチュートリアルでは、FormView コントロールを使用して、データのあまり厳密でない表示を表示する方法について説明します。
はじめに
最後の 2 つのチュートリアルでは、TemplateFields を使用して GridView コントロールと DetailsView コントロールの出力をカスタマイズする方法について説明しました。 TemplateFields を使用すると、特定のフィールドの内容を高度にカスタマイズできますが、最終的には GridView と DetailsView の両方に、グリッドのようなボックスな外観があります。 多くのシナリオでは、このようなグリッドのようなレイアウトが理想的ですが、時にはより流動的で、剛性の低いディスプレイが必要になります。 1 つのレコードを表示する場合は、FormView コントロールを使用してこのような流動的なレイアウトを使用できます。
DetailsView とは異なり、FormView はフィールドで構成されません。 BoundField または TemplateField を FormView に追加することはできません。 代わりに、FormView はテンプレートを使用してレンダリングされます。 FormView は、単一の TemplateField を含む DetailsView コントロールと考えてください。 FormView では、次のテンプレートがサポートされています。
ItemTemplate
FormView に表示される特定のレコードをレンダリングするために使用されますHeaderTemplate
省略可能なヘッダー行を指定するために使用されますFooterTemplate
省略可能なフッター行を指定するために使用されますEmptyDataTemplate
FormViewDataSource
の にレコードがない場合、EmptyDataTemplate
は コントロールのマークアップをレンダリングするために のItemTemplate
代わりに使用されます。PagerTemplate
を使用して、ページングが有効になっている FormView のページング インターフェイスをカスタマイズできますEditItemTemplate
/InsertItemTemplate
このような機能をサポートする FormViews の編集インターフェイスまたは挿入インターフェイスをカスタマイズするために使用されます
このチュートリアルでは、FormView コントロールを使用して、製品の剛性の低いディスプレイを表示する方法について説明します。 名前、カテゴリ、仕入先などのフィールドを含めるのではなく、FormView ItemTemplate
ではヘッダー要素と <table>
の組み合わせを使用してこれらの値が表示されます (図 1 を参照)。
図 1: DetailsView に表示される Grid-Like レイアウトから FormView が分割される (フルサイズの画像を表示する をクリックします)
手順 1: データを FormView にバインドする
ページをFormView.aspx
開き、FormView をツールボックスからDesignerにドラッグします。 最初に FormView を追加すると、灰色のボックスとして表示され、 が必要であることを ItemTemplate
示します。
図 2: FormView は、 が指定されるまでItemTemplate
Designerでレンダリングできません (フルサイズの画像を表示する 場合はクリックします)
はItemTemplate
、手動で (宣言構文を使用して) 作成することも、Designerを介して FormView をデータ ソース コントロールにバインドすることによって自動的に作成することもできます。 この自動作成 ItemTemplate
には、各フィールドの名前を一覧表示する HTML と、フィールドの値にバインドされたプロパティを持つ Text
Label コントロールが含まれています。 この方法では、 と EditItemTemplate
も自動的に作成InsertItemTemplate
されます。どちらも、データ ソース コントロールによって返される各データ フィールドの入力コントロールが設定されます。
テンプレートを自動作成する場合は、FormView のスマート タグから、クラスGetProducts()
のメソッドを呼び出す新しい ObjectDataSource コントロールをProductsBLL
追加します。 これにより、、、 EditItemTemplate
を含む ItemTemplate
InsertItemTemplate
FormView が作成されます。 [ソース] ビューから、 と EditItemTemplate
をInsertItemTemplate
削除します。これは、編集または挿入をまだサポートする FormView の作成には関心がないためです。 次に、 内ItemTemplate
のマークアップをクリアして、作業元のクリーンスレートを作成します。
を手動でビルドItemTemplate
する場合は、ツールボックスからDesignerにドラッグして ObjectDataSource を追加および構成できます。 ただし、Designerから 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 番目の列の値を一覧表示します。
このマークアップは、Designerの 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>
たとえば、databinding 構文 ( <%# Eval("ProductName") %>
など) をテンプレートの出力に直接挿入できることに注意してください。 つまり、Label コントロールの Text
プロパティに割り当てる必要はありません。 たとえば、 をProductName
使用して <h3><%# Eval("ProductName") %></h3>
要素に値を<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: Rigid 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 は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスするか、ブログを使用して にアクセスmitchell@4GuysFromRolla.comできます。これは でhttp://ScottOnWriting.NET見つけることができます。
特別な感謝
このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は E.R. Gilmore でした。 今後の MSDN の記事を確認することに関心がありますか? その場合は、 にmitchell@4GuysFromRolla.com行をドロップしてください。
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示