FormView のテンプレートの使用 (C#)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

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 FormView DataSource の にレコードがない場合、 EmptyDataTemplate は コントロールのマークアップをレンダリングするために の ItemTemplate 代わりに使用されます。
  • PagerTemplate を使用して、ページングが有効になっている FormView のページング インターフェイスをカスタマイズできます
  • EditItemTemplate / InsertItemTemplate このような機能をサポートする FormViews の編集インターフェイスまたは挿入インターフェイスをカスタマイズするために使用されます

このチュートリアルでは、FormView コントロールを使用して、製品の剛性の低いディスプレイを表示する方法について説明します。 名前、カテゴリ、仕入先などのフィールドを含めるのではなく、FormView ItemTemplate ではヘッダー要素と <table> の組み合わせを使用してこれらの値が表示されます (図 1 を参照)。

DetailsView に表示される Grid-Like レイアウトから FormView が分割される

図 1: DetailsView に表示される Grid-Like レイアウトから FormView が分割される (フルサイズの画像を表示する をクリックします)

手順 1: データを FormView にバインドする

ページをFormView.aspx開き、FormView をツールボックスからDesignerにドラッグします。 最初に FormView を追加すると、灰色のボックスとして表示され、 が必要であることを ItemTemplate 示します。

ItemTemplate が指定されるまで、FormView はDesignerでレンダリングできません

図 2: FormView は、 が指定されるまでItemTemplateDesignerでレンダリングできません (フルサイズの画像を表示する 場合はクリックします)

はItemTemplate、手動で (宣言構文を使用して) 作成することも、Designerを介して FormView をデータ ソース コントロールにバインドすることによって自動的に作成することもできます。 この自動作成 ItemTemplate には、各フィールドの名前を一覧表示する HTML と、フィールドの値にバインドされたプロパティを持つ Text Label コントロールが含まれています。 この方法では、 と EditItemTemplateも自動的に作成InsertItemTemplateされます。どちらも、データ ソース コントロールによって返される各データ フィールドの入力コントロールが設定されます。

テンプレートを自動作成する場合は、FormView のスマート タグから、クラスGetProducts()のメソッドを呼び出す新しい ObjectDataSource コントロールをProductsBLL追加します。 これにより、、、 EditItemTemplateを含む ItemTemplateInsertItemTemplateFormView が作成されます。 [ソース] ビューから、 と 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 のテンプレート編集インターフェイスを介して入力することも、宣言構文を使用して手動で入力することもできます。 テンプレートを使用する場合、通常は宣言型構文を直接操作する方が簡単ですが、最も使い慣れた手法を自由に使用できます。

次のマークアップは、 の構造体が完了した後の ItemTemplateFormView 宣言型マークアップを示しています。

<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)。

Rigid DetailsView の出力

図 3: Rigid DetailsView 出力 (フルサイズの画像を表示する場合はクリックします)

Fluid FormView の出力

図 4: Fluid FormView の出力 (フルサイズの画像を表示する場合をクリック)

まとめ

GridView コントロールと DetailsView コントロールでは、TemplateFields を使用して出力をカスタマイズできますが、どちらもグリッドのようなボックス形式でデータを表示します。 1 つのレコードを表示する必要がある場合は、より剛性の低いレイアウトを使用して FormView を使用するのが理想的な選択肢です。 DetailsView と同様に、FormView はその から DataSource1 つのレコードをレンダリングしますが、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行をドロップしてください。

前へ次へ