Share via


データ バインドされたコントロール

作成者: Microsoft

ほとんどの ASP.NET アプリケーションは、バックエンド データ ソースからのある程度のデータ表示に依存しています。 データ バインド コントロールは、動的 Web アプリケーションでデータを操作する重要な部分でした。 ASP.NET 2.0 では、新しい BaseDataBoundControl クラスや宣言構文など、データ バインド コントロールにいくつかの大幅な機能強化が導入されています。

ほとんどの ASP.NET アプリケーションは、バックエンド データ ソースからのある程度のデータ表示に依存しています。 データ バインド コントロールは、動的 Web アプリケーションでデータを操作する重要な部分でした。 ASP.NET 2.0 では、新しい BaseDataBoundControl クラスや宣言構文など、データ バインド コントロールにいくつかの大幅な機能強化が導入されています。

BaseDataBoundControl は、DataBoundControl クラスと HierarchyDataBoundControl クラスの基底クラスとして機能します。 このモジュールでは、DataBoundControl から派生する次のクラスについて説明します。

  • AdRotator
  • コントロールを一覧表示する
  • GridView
  • Formview
  • Detailsview

また、HierarchyDataBoundControl クラスから派生する次のクラスについても説明します。

  • TreeView
  • メニュー
  • Sitemappath

DataBoundControl クラス

DataBoundControl クラスは、表形式またはリスト スタイルのデータを操作するために使用される抽象クラス (VB では MustInherit とマークされています) です。 次のコントロールは、DataBoundControl から派生したコントロールの一部です。

AdRotator

AdRotator コントロールを使用すると、特定の URL にリンクされている Web ページにグラフィック バナーを表示できます。 表示されるグラフィックは、 コントロールのプロパティを使用して回転されます。 ページに表示される特定の広告の頻度は[インプレッション]プロパティを使用して設定でき、広告はキーワード (keyword)フィルタリングを使用してフィルタリングできます。

AdRotator コントロールは、データに XML ファイルまたはデータベース内のテーブルを使用します。 ADRotator コントロールを構成するには、XML ファイルで次の属性を使用します。

ImageUrl

広告に表示する画像の URL。

広告がクリックされたときにユーザーが取得する必要がある URL。 URL エンコードする必要があります。

AlternateText

ヒントに表示され、スクリーン リーダーによって読み取られた代替テキスト。 また、ImageUrl で指定されたイメージが使用できない場合も表示されます。

Keyword

フィルター処理を使用するときに使用できるキーワード (keyword)キーワード (keyword)定義します。 指定すると、キーワード (keyword)フィルターに一致するキーワード (keyword)を持つ広告のみが表示されます。

インプレッション数

特定の広告が表示される頻度を決定する重み付け番号。 同じファイル内の他の広告の印象を基準にしています。 XML ファイル内のすべての広告の集合インプレッションの最大値は 2,048,000,000 1 です。

[高さ]

広告の高さ (ピクセル単位)。

広告の幅 (ピクセル単位)。

Note

Height 属性と Width 属性は、AdRotator コントロール自体の高さと幅をオーバーライドします。

一般的な XML ファイルは次のようになります。

<?xml version="1.0" encoding="utf-8" ?> <Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <NavigateUrl>http://www.contoso-ltd.com</NavigateUrl> <AlternateText>Ad for Contoso, Ltd. Web site</AlternateText> <Impressions>100</Impressions> </Ad> <Ad> <ImageUrl>~/images/Aspnet_ad.gif</ImageUrl> <NavigateUrl>http://www.asp.net</NavigateUrl> <AlternateText>Ad for ASP.NET Web site</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements>

上記の例では、Contoso の広告はインプレッション属性の値のため、ASP.NET Web サイトの広告の 2 倍の確率で表示されます。

上記の XML ファイルから広告を表示するには、AdRotator コントロールをページに追加し、次に示すように 、AdvertisementFile プロパティを XML ファイルをポイントするように設定します。

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />

AdRotator コントロールのデータ ソースとしてデータベース テーブルを使用する場合は、まず次のスキーマを使用してデータベースを設定する必要があります。

列名 データの種類 説明
id INT 主キー この列には任意の名前を付けることができます。
ImageUrl nvarchar(length) 広告に表示する画像の相対 URL または絶対 URL。
Navigateurl nvarchar(length) 広告のターゲット URL。 値を指定しない場合、広告はハイパーリンクではありません。
AlternateText nvarchar(length) 画像が見つからない場合に表示されるテキスト。 一部のブラウザーでは、テキストはツールヒントとして表示されます。 代替テキストは、グラフィックを見ることができないユーザーが説明を読み上げることができるように、アクセシビリティにも使用されます。
Keyword nvarchar(length) ページがフィルター処理できる広告のカテゴリ。
インプレッション数 int(4) 広告が表示される頻度の可能性を示す数値。 数値が大きいほど、広告が表示される頻度が高くなります。 XML ファイル内のすべてのインプレッション値の合計は、2,048,000,000 - 1 を超えることはできません。
int(4) 画像の幅 (ピクセル単位)。
[高さ] int(4) 画像の高さ (ピクセル単位)。

別のスキーマを持つデータベースが既にある場合は、AlternateTextFieldImageUrlField、NavigateUrlField の各プロパティを使用して、AdRotator 属性を既存のデータベースにマップできます。 AdRotator コントロールのデータベースのデータを表示するには、データ ソース コントロールをページに追加し、データ ソース コントロールがデータベースを指すように接続文字列を構成し、AdRotator コントロールの DataSourceID プロパティをデータ ソース コントロールの ID に設定します。 AdRotator 広告をプログラムで構成する必要がある場合は、AdCreated イベントを使用します。 AdCreated イベントは 2 つのパラメーターを受け取ります。1 つはオブジェクト、もう 1 つは AdCreatedEventArgs のインスタンスです。 AdCreatedEventArgs は、作成される広告への参照です。

次のコード スニペットは、プログラムによって広告の ImageUrl、NavigateUrl、AlternateText を設定します。

protected void AdRotator1_AdCreated(object sender, System.Web.UI.WebControls.AdCreatedEventArgs e) { e.ImageUrl = "images/contoso_ad.gif"; e.NavigateUrl = "http://www.contoso-ltd.com/"; e.AlternateText = "Ad for Contoso, Ltd Web site"; }

リスト コントロール

リスト コントロールには、ListBox、DropDownList、CheckBoxList、RadioButtonList、BulletedList などがあります。 これらの各コントロールは、データ ソースにバインドされたデータにすることができます。 データ ソース内の 1 つのフィールドを表示テキストとして使用し、必要に応じて項目の値として 2 番目のフィールドを使用できます。 アイテムはデザイン時に静的に追加することもでき、静的な項目とデータ ソースから追加された動的な項目を混在させることができます。

リスト コントロールをデータバインドするには、データ ソース コントロールをページに追加します。 データ ソース コントロールの SELECT コマンドを指定し、リスト コントロールの DataSourceID プロパティをデータ ソース コントロールの ID に設定します。 DataTextField プロパティと DataValueField プロパティを使用して、コントロールの表示テキストと値を定義します。 さらに、 DataTextFormatString プロパティを使用して、表示テキストの外観を次のように制御できます。

[式] 説明
価格: {0:C} 数値/10 進データの場合。 リテラル "Price:" の後に数値を通貨形式で表示します。 通貨形式は、 Page ディレクティブまたはWeb.config ファイルの culture 属性で指定されたカルチャ設定によって異なります。
{0:D4} 整数データの場合。 10 進数では使用できません。 整数は、幅 4 文字の 0 埋め込みフィールドに表示されます。
{0:N2}% 数値データの場合。 小数点以下 2 桁の有効桁数で数値を表示し、リテラル "%" を続けて表示します。
{0:000.0} 数値/10 進データの場合。 数値は小数点以下 1 桁に丸められます。 3 桁に満たない場合はゼロで埋めます。
{0:D} 日付/時刻データの場合。 長い日付形式 ("木曜日、1996 年 8 月 6 日") を表示します。 使用される日付の形式は、ページまたは Web.config ファイルのカルチャ設定によって決まります。
{0:d} 日付/時刻データの場合。 短い日付形式 ("12/31/99") を表示します。
{0:yy-MM-dd} 日付/時刻データの場合。 日付を数値の年月形式で表示します (96-08-06)

GridView

GridView コントロールは、宣言型アプローチを使用して表形式のデータの表示と編集を可能にし、DataGrid コントロールの後継です。 GridView コントロールでは、次の機能を使用できます。

  • SqlDataSource などのデータ ソース コントロールへのバインド。
  • 組み込みの並べ替え機能。
  • 組み込みの更新および削除機能。
  • 組み込みのページング機能。
  • 組み込みの行選択機能。
  • プロパティを動的に設定したり、イベントを処理したりするための GridView オブジェクト モデルへのプログラムによるアクセス。
  • 複数のキー フィールド。
  • ハイパーリンク列の複数のデータ フィールド。
  • テーマとスタイルを使用してカスタマイズ可能な外観。

列フィールド

GridView コントロールの各列は、DataControlField オブジェクトによって表されます。 既定では、AutoGenerateColumns プロパティは true に設定され、データ ソース内の各フィールドに AutoGeneratedField オブジェクトが作成されます。 その後、各フィールドは、各フィールドがデータ ソースに表示される順序で GridView コントロールの列としてレンダリングされます。 AutoGenerateColumns プロパティを false に設定し、独自の列フィールド コレクションを定義することで、GridView コントロールに表示される列フィールドを手動で制御することもできます。 列フィールドの種類によって、コントロール内の列の動作が決まります。

次の表に、使用できるさまざまな列フィールドの種類を示します。

列フィールドの種類 説明
BoundField データ ソース内のフィールドの値を表示します。 これは、GridView コントロールの既定の列の種類です。
ButtonField GridView コントロールの各項目のコマンド ボタンを表示します。 これにより、[追加] や [削除] ボタンなどのカスタム ボタン コントロールの列を作成できます。
CheckBoxField GridView コントロールの各項目のチェック ボックスを表示します。 この列フィールド型は、ブール値を持つフィールドを表示するために一般的に使用されます。
CommandField 選択、編集、または削除操作を実行するための定義済みのコマンド ボタンを表示します。
HyperLinkField データ ソース内のフィールドの値をハイパーリンクとして表示します。 この列フィールド型を使用すると、2 番目のフィールドをハイパーリンクの URL にバインドできます。
ImageField GridView コントロールの各項目の画像を表示します。
Templatefield 指定したテンプレートに従って、GridView コントロール内の各項目のユーザー定義コンテンツを表示します。 この列フィールド型を使用すると、ユーザー設定の列フィールドを作成できます。

列フィールド コレクションを宣言的に定義するには、まず、GridView コントロールの開始タグと終了 <タグの間に、開始タグと終了列> タグを追加します。 次に、開始タグと終了 <列タグの間に含める列> フィールドを一覧表示します。 指定された列は、一覧表示されている順序で Columns コレクションに追加されます。 Columns コレクションには、コントロール内のすべての列フィールドが格納され、GridView コントロールの列フィールドをプログラムで管理できます。

明示的に宣言された列フィールドは、自動的に生成される列フィールドと組み合わせて表示できます。 両方を使用すると、明示的に宣言された列フィールドが最初にレンダリングされ、その後に自動的に生成された列フィールドが表示されます。

データ ソース管理へのバインド

GridView コントロールは、データ ソース コントロール ( SqlDataSourceObjectDataSource など) と、System.Collections.IEnumerable インターフェイス (System.Data.DataView、System.Collections.ArrayList、System.Collections.Hashtable など) を実装するデータ ソースにバインドできます。 GridView コントロールを適切なデータ ソースの種類にバインドするには、次のいずれかの方法を使用します。

  • データ ソース コントロールにバインドするには、GridView コントロールの DataSourceID プロパティをデータ ソース コントロールの ID 値に設定します。 GridView コントロールは、指定されたデータ ソース コントロールに自動的にバインドされ、データ ソース コントロールの機能を利用して、並べ替え、更新、削除、ページング機能を実行できます。 これは、データにバインドする推奨される方法です。
  • System.Collections.IEnumerable インターフェイスを実装するデータ ソースにバインドするには、GridView コントロールの DataSource プロパティをプログラムでデータ ソースに設定し、DataBind メソッドを呼び出します。 このメソッドを使用する場合、GridView コントロールは組み込みの並べ替え、更新、削除、ページング機能を提供しません。 この機能は自分で提供する必要があります。

GridView コントロール操作

GridView コントロールには、ユーザーがコントロール内の項目を並べ替え、更新、削除、選択、ページ処理できる多くの組み込み機能が用意されています。 GridView コントロールがデータ ソース コントロールにバインドされている場合、GridView コントロールはデータ ソース コントロールの機能を利用し、自動並べ替え、更新、および削除機能を提供できます。

Note

GridView コントロールは、他の種類のデータ ソースで並べ替え、更新、および削除をサポートできます。ただし、これらの操作の実装に適切なイベント ハンドラーを提供する必要があります。

並べ替えにより、ユーザーは列のヘッダーをクリックして、特定の列に対して GridView コントロール内の項目を並べ替えることができます。 並べ替えを有効にするには、AllowSorting プロパティを true に設定 します

ButtonField 列フィールドまたは TemplateField 列フィールドのボタンが、それぞれ "編集"、"削除"、および "Select" のコマンド名でクリックされると、自動更新、削除、および選択機能が有効になります。 GridView コントロールは、AutoGenerateEditButton、AutoGenerateDeleteButton、または AutoGenerateSelectButton プロパティがそれぞれ true に設定されている場合、Edit、Delete、または Select ボタンを使用して CommandField 列フィールドを自動的に追加できます。

Note

データ ソースへのレコードの挿入は、GridView コントロールでは直接サポートされていません。 ただし、GridView コントロールを DetailsView コントロールまたは FormView コントロールと組み合わせて使用すると、レコードを挿入できます。

GridView コントロールは、データ ソース内のすべてのレコードを同時に表示する代わりに、レコードをページに自動的に分割できます。 ページングを有効にするには、AllowPaging プロパティを true に設定 します

GridView の外観のカスタマイズ

GridView コントロールの外観をカスタマイズするには、コントロールのさまざまな部分のスタイル プロパティを設定します。 次の表に、さまざまなスタイル プロパティを示します。

Style プロパティ 説明
AlternatingRowStyle GridView コントロールの交互のデータ行のスタイル設定。 このプロパティを設定すると、データ行は RowStyle 設定と AlternatingRowStyle 設定の間で交互に表示されます。
EditRowStyle GridView コントロールで編集する行のスタイル設定。
EmptyDataRowStyle データ ソースにレコードが含まれていない場合に GridView コントロールに表示される空のデータ行のスタイル設定。
FooterStyle GridView コントロールのフッター行のスタイル設定。
Headerstyle GridView コントロールのヘッダー行のスタイル設定。
Pagerstyle GridView コントロールのポケットベル行のスタイル設定。
RowStyle GridView コントロールのデータ行のスタイル設定。 AlternatingRowStyle プロパティも設定されている場合、データ行は RowStyle 設定と AlternatingRowStyle 設定の間で交互に表示されます。
SelectedRowStyle GridView コントロールで選択した行のスタイル設定。

コントロールのさまざまな部分を表示または非表示にすることもできます。 次の表は、表示または非表示の部分を制御するプロパティの一覧です。

プロパティ 説明
ShowFooter GridView コントロールのフッター セクションを表示または非表示にします。
Showheader GridView コントロールのヘッダー セクションを表示または非表示にします。

イベント

GridView コントロールには、プログラミングできるイベントがいくつか用意されています。 これにより、イベントが発生するたびにカスタム ルーチンを実行できます。 次の表に、GridView コントロールでサポートされるイベントの一覧を示します。

Event 説明
PageIndexChanged ページャー ボタンの 1 つがクリックされたときに、GridView コントロールがページング操作を処理した後に発生します。 このイベントは、ユーザーがコントロール内の別のページに移動した後にタスクを実行する必要がある場合に一般的に使用されます。
PageIndexChanging ページャー ボタンの 1 つがクリックされたときに、GridView コントロールがページング操作を処理する前に発生します。 このイベントは、ページング操作を取り消すためによく使用されます。
RowCancelingEdit 行の [キャンセル] ボタンをクリックしたときに、GridView コントロールが編集モードを終了する前に発生します。 このイベントは、取り消し操作を停止するためによく使用されます。
Rowcommand GridView コントロールでボタンがクリックされたときに発生します。 このイベントは、多くの場合、コントロール内のボタンがクリックされたときにタスクを実行するために使用されます。
RowCreated GridView コントロールで新しい行が作成されたときに発生します。 このイベントは、行の作成時に行の内容を変更するためによく使用されます。
RowDataBound データ行が GridView コントロールのデータにバインドされるときに発生します。 このイベントは、多くの場合、行がデータにバインドされている場合に行の内容を変更するために使用されます。
RowDeleted 行の [削除] ボタンをクリックしたときに、GridView コントロールがデータ ソースからレコードを削除した後に発生します。 このイベントは、多くの場合、削除操作の結果をチェックするために使用されます。
RowDeleting 行の [削除] ボタンをクリックしたときに、GridView コントロールがデータ ソースからレコードを削除する前に発生します。 このイベントは、削除操作を取り消すためによく使用されます。
RowEditing 行の [編集] ボタンをクリックしたときに、GridView コントロールが編集モードになる前に発生します。 このイベントは、多くの場合、編集操作を取り消すために使用されます。
RowUpdated 行の [更新] ボタンをクリックしたときに、GridView コントロールが行を更新した後に発生します。 このイベントは、更新操作の結果をチェックするためによく使用されます。
RowUpdating 行の [更新] ボタンをクリックしたときに、GridView コントロールが行を更新する前に発生します。 このイベントは、更新操作を取り消すためによく使用されます。
SelectedIndexChanged 行の [選択] ボタンをクリックしたときに、GridView コントロールが選択操作を処理した後に発生します。 このイベントは、多くの場合、コントロールで行が選択された後にタスクを実行するために使用されます。
SelectedIndexChanging 行の [選択] ボタンをクリックしたときに、GridView コントロールが選択操作を処理する前に発生します。 このイベントは、選択操作を取り消すためによく使用されます。
並べ替え 列を並べ替えるハイパーリンクをクリックしたときに、GridView コントロールが並べ替え操作を処理した後に発生します。 このイベントは、ユーザーがハイパーリンクをクリックして列を並べ替えた後にタスクを実行するために一般的に使用されます。
並べ替え 列を並べ替えるハイパーリンクをクリックしたときに、GridView コントロールが並べ替え操作を処理する前に発生します。 このイベントは、並べ替え操作を取り消したり、カスタムの並べ替えルーチンを実行したりするためによく使用されます。

Formview

FormView コントロールは、データ ソースから 1 つのレコードを表示するために使用されます。 これは DetailsView コントロールに似ていますが、行フィールドの代わりにユーザー定義テンプレートが表示される点が除きます。 独自のテンプレートを作成すると、データの表示方法を柔軟に制御できます。 FormView コントロールでは、次の機能がサポートされています。

  • SqlDataSource や ObjectDataSource などのデータ ソース コントロールへのバインド。
  • 組み込みの挿入機能。
  • 組み込みの更新および削除機能。
  • 組み込みのページング機能。
  • プロパティを動的に設定したり、イベントを処理したりするための FormView オブジェクト モデルへのプログラムによるアクセス。
  • ユーザー定義のテンプレート、テーマ、スタイルを使用したカスタマイズ可能な外観。

テンプレート

FormView コントロールでコンテンツを表示するには、コントロールのさまざまな部分のテンプレートを作成する必要があります。 ほとんどのテンプレートは省略可能です。ただし、コントロールが構成されているモードのテンプレートを作成する必要があります。 たとえば、レコードの挿入をサポートする FormView コントロールには、項目の挿入テンプレートが定義されている必要があります。 次の表に、作成できるさまざまなテンプレートの一覧を示します。

テンプレートの種類 説明
EditItemTemplate FormView コントロールが編集モードの場合のデータ行の内容を定義します。 このテンプレートには、通常、ユーザーが既存のレコードを編集できる入力コントロールとコマンド ボタンが含まれています。
EmptyDataTemplate FormView コントロールがレコードを含まないデータ ソースにバインドされるときに表示される空のデータ行の内容を定義します。 このテンプレートには通常、データ ソースにレコードが含まれていないことをユーザーに警告するコンテンツが含まれています。
FooterTemplate フッター行の内容を定義します。 このテンプレートには、通常、フッター行に表示する追加コンテンツが含まれています。 別の方法として、FooterText プロパティを設定することで、フッター行に表示するテキストを指定することもできます。
HeaderTemplate ヘッダー行の内容を定義します。 このテンプレートには、通常、ヘッダー行に表示する追加のコンテンツが含まれています。 別の方法として、HeaderText プロパティを設定することで、ヘッダー行に表示するテキストを指定することもできます。
ItemTemplate FormView コントロールが読み取り専用モードの場合のデータ行の内容を定義します。 このテンプレートには、通常、既存のレコードの値を表示するコンテンツが含まれています。
InsertItemTemplate FormView コントロールが挿入モードの場合のデータ行の内容を定義します。 このテンプレートには、通常、ユーザーが新しいレコードを追加できる入力コントロールとコマンド ボタンが含まれています。
PagerTemplate ページング機能が有効になっているときに表示されるページャー行のコンテンツを定義します (AllowPaging プロパティが true に設定されている場合)。 このテンプレートには、通常、ユーザーが別のレコードに移動できるコントロールが含まれています。

項目テンプレートの編集と項目の挿入テンプレートの入力コントロールは、双方向バインド式を使用してデータ ソースのフィールドにバインドできます。 これにより、FormView コントロールは、更新操作または挿入操作の入力コントロールの値を自動的に抽出できます。 双方向バインディング式を使用すると、編集項目テンプレートの入力コントロールで元のフィールド値を自動的に表示することもできます。

データへのバインド

FormView コントロールは、データ ソース コントロール ( SqlDataSource、AccessDataSource、 ObjectDataSource など)、または System.Data.DataView、System.Collections.ArrayList、System.Collections.Hashtable などの System.Collections.IEnumerable インターフェイスを実装する任意のデータ ソースにバインドできます。 FormView コントロールを適切なデータ ソースの種類にバインドするには、次のいずれかの方法を使用します。

  • データ ソース コントロールにバインドするには、FormView コントロールの DataSourceID プロパティをデータ ソース コントロールの ID 値に設定します。 FormView コントロールは、指定したデータ ソース コントロールに自動的にバインドされ、データ ソース コントロールの機能を利用して、挿入、更新、削除、ページング機能を実行できます。 これは、データにバインドする推奨される方法です。
  • System.Collections.IEnumerable インターフェイスを実装するデータ ソースにバインドするには、プログラムによって FormView コントロールの DataSource プロパティをデータ ソースに設定し、DataBind メソッドを呼び出します。 このメソッドを使用する場合、FormView コントロールは組み込みの挿入、更新、削除、ページング機能を提供しません。 適切なイベントを使用して、この機能を提供する必要があります。

FormView コントロール操作

FormView コントロールには、ユーザーがコントロール内の項目を更新、削除、挿入、およびページ処理できる多くの組み込み機能が用意されています。 FormView コントロールがデータ ソース コントロールにバインドされている場合、FormView コントロールはデータ ソース コントロールの機能を利用し、自動更新、削除、挿入、ページング機能を提供できます。 FormView コントロールは、他の種類のデータ ソースとの更新、削除、挿入、ページング操作をサポートできます。ただし、これらの操作の実装に適切なイベント ハンドラーを指定する必要があります。

FormView コントロールはテンプレートを使用するため、更新、削除、または挿入操作を実行するコマンド ボタンを自動的に生成する方法は提供されません。 これらのコマンド ボタンは、適切なテンプレートに手動で含める必要があります。 FormView コントロールは、 CommandName プロパティが特定の値に設定されている特定のボタンを認識します。 次の表に、FormView コントロールが認識するコマンド ボタンの一覧を示します。

Button Commandname 値 説明
キャンセル "Cancel" 操作を取り消し、ユーザーが入力した値を破棄する操作の更新または挿入に使用されます。 次に、FormView コントロールは DefaultMode プロパティで指定されたモードに戻ります。
削除 "削除" データ ソースから表示されるレコードを削除する操作の削除に使用されます。 ItemDeleting イベントと ItemDeleted イベントを発生させます。
編集 "編集" FormView コントロールを編集モードにするための更新操作で使用されます。 EditItemTemplate プロパティで指定されたコンテンツが、データ行に対して表示されます。
挿入 "挿入" ユーザーが指定した値を使用してデータ ソースに新しいレコードを挿入する操作の挿入に使用されます。 ItemInserting イベントと ItemInserted イベントを発生させます。
新規 "新規" FormView コントロールを挿入モードにする挿入操作で使用されます。 InsertItemTemplate プロパティで指定されたコンテンツが、データ行に対して表示されます。
Page "Page" ページング操作で、ページングを実行するページャー行のボタンを表すために使用されます。 ページング操作を指定するには、ボタンの CommandArgument プロパティを "Next"、"Prev"、"First"、"Last"、または移動先のページのインデックスに設定します。 PageIndexChanging イベントと PageIndexChanged イベントを発生させます。
更新 "更新" 更新操作で使用され、ユーザーが指定した値を使用してデータ ソースに表示されるレコードを更新しようとします。 ItemUpdating イベントと ItemUpdated イベントを発生させます。

[削除] ボタン (表示されたレコードをすぐに削除) とは異なり、[編集] または [新規作成] ボタンをクリックすると、FormView コントロールはそれぞれ編集モードまたは挿入モードになります。 編集モードでは、現在のデータ項目の EditItemTemplate プロパティに含まれるコンテンツが表示されます。 通常、アイテムの編集テンプレートは、[編集] ボタンが [更新] ボタンと [キャンセル] ボタンに置き換わるよう定義されています。 フィールドのデータ型 (TextBox コントロールや CheckBox コントロールなど) に適した入力コントロールも、通常、ユーザーが変更するフィールドの値と共に表示されます。 [更新] ボタンをクリックすると、データ ソース内のレコードが更新され、[キャンセル] ボタンをクリックすると変更は破棄されます。

同様に、コントロールが挿入モードの場合、データ項目の InsertItemTemplate プロパティに含まれるコンテンツが表示されます。 通常、項目の挿入テンプレートは、[新規] ボタンが [挿入] ボタンと [キャンセル] ボタンに置き換えられ、ユーザーが新しいレコードの値を入力するための空の入力コントロールが表示されるように定義されます。 [挿入] ボタンをクリックすると、データ ソースにレコードが挿入され、[キャンセル] ボタンをクリックすると変更は破棄されます。

FormView コントロールにはページング機能があり、ユーザーはデータ ソース内の他のレコードに移動できます。 有効にすると、ページ ナビゲーション コントロールを含む FormView コントロールにポケットベル行が表示されます。 ページングを有効にするには、 AllowPaging プロパティを true に設定 します。 PagerStyle プロパティと PagerSettings プロパティに含まれるオブジェクトのプロパティを設定することで、ポケットベル行をカスタマイズできます。 組み込みのポケットベル行 UI を使用する代わりに、 PagerTemplate プロパティを使用して独自の UI を作成できます。

FormView の外観のカスタマイズ

FormView コントロールの外観は、コントロールのさまざまな部分のスタイル プロパティを設定することでカスタマイズできます。 次の表に、さまざまなスタイル プロパティの一覧を示します。

Style プロパティ 説明
EditRowStyle FormView コントロールが編集モードの場合のデータ行のスタイル設定。
EmptyDataRowStyle データ ソースにレコードが含まれていない場合に FormView コントロールに表示される空のデータ行のスタイル設定。
FooterStyle FormView コントロールのフッター行のスタイル設定。
Headerstyle FormView コントロールのヘッダー行のスタイル設定。
InsertRowStyle FormView コントロールが挿入モードの場合のデータ行のスタイル設定。
Pagerstyle ページング機能が有効になっているときに FormView コントロールに表示されるポケットベル行のスタイル設定。
RowStyle FormView コントロールが読み取り専用モードの場合のデータ行のスタイル設定。

FormView イベント

FormView コントロールには、プログラミングできるイベントがいくつか用意されています。 これにより、イベントが発生するたびにカスタム ルーチンを実行できます。 次の表に、FormView コントロールでサポートされるイベントの一覧を示します。

Event 説明
Itemcommand FormView コントロール内のボタンがクリックされたときに発生します。 このイベントは、多くの場合、コントロール内のボタンがクリックされたときにタスクを実行するために使用されます。
Itemcreated FormView コントロールですべての FormViewRow オブジェクトが作成された後に発生します。 このイベントは、表示前にレコードの値を変更するためによく使用されます。
ItemDeleted Delete ボタン ( CommandName プロパティが "Delete" に設定されているボタン) がクリックされた後、FormView コントロールがデータ ソースからレコードを削除したときに発生します。 このイベントは、多くの場合、削除操作の結果をチェックするために使用されます。
ItemDeleting [削除] ボタンをクリックしたときに、FormView コントロールがデータ ソースからレコードを削除する前に発生します。 このイベントは、削除操作を取り消すためによく使用されます。
ItemInserted [挿入] ボタン ( CommandName プロパティが "Insert" に設定されているボタン) をクリックしたときに、FormView コントロールがレコードを挿入した後に発生します。 このイベントは、挿入操作の結果をチェックするためによく使用されます。
ItemInserting [挿入] ボタンをクリックしたときに、FormView コントロールがレコードを挿入する前に発生します。 このイベントは、挿入操作を取り消すためによく使用されます。
Itemupdated [更新] ボタン ( CommandName プロパティが "Update" に設定されているボタン) をクリックしたときに、FormView コントロールによって行が更新されたときに発生します。 このイベントは、更新操作の結果をチェックするためによく使用されます。
ItemUpdating [更新] ボタンをクリックしたときに、FormView コントロールがレコードを更新する前に発生します。 このイベントは、更新操作を取り消すためによく使用されます。
ModeChanged FormView コントロールがモードを変更した後に発生します (編集、挿入、または読み取り専用モード)。 このイベントは、FormView コントロールがモードを変更したときにタスクを実行するためによく使用されます。
ModeChanging FormView コントロールがモードを変更する前に発生します (編集、挿入、または読み取り専用モード)。 このイベントは、モードの変更を取り消すためによく使用されます。
PageIndexChanged ページャー ボタンの 1 つがクリックされたときに、FormView コントロールがページング操作を処理した後に発生します。 このイベントは、ユーザーがコントロール内の別のレコードに移動した後にタスクを実行する必要がある場合に一般的に使用されます。
PageIndexChanging ページャー ボタンの 1 つがクリックされたが、FormView コントロールがページング操作を処理する前に発生します。 このイベントは、ページング操作を取り消すためによく使用されます。

Detailsview

DetailsView コントロールは、テーブル内のデータ ソースの 1 つのレコードを表示するために使用され、レコードの各フィールドがテーブルの行に表示されます。 マスター詳細シナリオでは、GridView コントロールと組み合わせて使用できます。 DetailsView コントロールは、次の機能をサポートしています。

  • SqlDataSource などのデータ ソース コントロールへのバインド。
  • 組み込みの挿入機能。
  • 組み込みの更新および削除機能。
  • 組み込みのページング機能。
  • プロパティを動的に設定したり、イベントを処理したりするための DetailsView オブジェクト モデルへのプログラムによるアクセス。
  • テーマとスタイルを使用したカスタマイズ可能な外観。

行フィールド

DetailsView コントロールの各データ行は、フィールド コントロールを宣言することによって作成されます。 コントロール内の行の動作は、行フィールドの種類によって異なります。 フィールド コントロールは、DataControlField から派生します。 次の表に、使用できるさまざまな行フィールドの種類を示します。

列フィールドの種類 説明
BoundField データ ソース内のフィールドの値をテキストとして表示します。
ButtonField DetailsView コントロールにコマンド ボタンを表示します。 これにより、[追加] ボタンや [削除] ボタンなどのカスタム ボタン コントロールを含む行を表示できます。
CheckBoxField DetailsView コントロールにチェック ボックスを表示します。 この行フィールド型は、ブール値を持つフィールドを表示するために一般的に使用されます。
CommandField DetailsView コントロールで編集、挿入、または削除の操作を実行するための組み込みのコマンド ボタンを表示します。
HyperLinkField データ ソース内のフィールドの値をハイパーリンクとして表示します。 この行フィールド型を使用すると、2 番目のフィールドをハイパーリンクの URL にバインドできます。
ImageField DetailsView コントロールに画像を表示します。
Templatefield 指定したテンプレートに従って DetailsView コントロール内の行のユーザー定義コンテンツを表示します。 この行フィールド型を使用すると、ユーザー設定の行フィールドを作成できます。

既定では、AutoGenerateRows プロパティは true に設定され、データ ソース内のバインド可能な型のフィールドごとにバインドされた行フィールド オブジェクトが自動的に生成されます。 有効なバインド可能な型は、String、DateTime、Decimal、Guid、およびプリミティブ型のセットです。 各フィールドは、データ ソース内の各フィールドが表示される順序で、テキストとして行に表示されます。

行を自動的に生成すると、レコード内のすべてのフィールドをすばやく簡単に表示できます。 ただし、DetailsView コントロールの高度な機能を利用するには、DetailsView コントロールに含める行フィールドを明示的に宣言する必要があります。 行フィールドを宣言するには、まず AutoGenerateRows プロパティを false に設定 します。 次に、DetailsView コントロールの開始タグと終了 <タグの間に、開始> タグと終了フィールド タグを追加します。 最後に、開始フィールド タグと終了 <フィールド タグの間に含める行フィールド> を一覧表示します。 指定された行フィールドは、一覧表示されている順序で Fields コレクションに追加されます。 Fields コレクションを使用すると、DetailsView コントロールの行フィールドをプログラムで管理できます。

Note

自動的に生成された行フィールドは Fields コレクションに追加されません。

DetailsView を使用したデータへのバインド

DetailsView コントロールは、 SqlDataSource や AccessDataSource などのデータ ソース コントロール、または System.Data.DataView、System.Collections.ArrayList、System.Collections.Hashtable などの System.Collections.IEnumerable インターフェイスを実装する任意のデータ ソースにバインドできます。

DetailsView コントロールを適切なデータ ソースの種類にバインドするには、次のいずれかの方法を使用します。

  • データ ソース コントロールにバインドするには、DetailsView コントロールの DataSourceID プロパティをデータ ソース コントロールの ID 値に設定します。 DetailsView コントロールは、指定したデータ ソース コントロールに自動的にバインドされます。 これは、データにバインドする推奨される方法です。
  • System.Collections.IEnumerable インターフェイスを実装するデータ ソースにバインドするには、プログラムによって DetailsView コントロールの DataSource プロパティをデータ ソースに設定し、DataBind メソッドを呼び出します。

セキュリティ

このコントロールは、悪意のあるクライアント スクリプトを含む可能性があるユーザー入力を表示するために使用できます。 クライアントから送信された情報で、実行可能スクリプト、SQL ステートメント、またはその他のコードを確認してから、アプリケーションに表示します。 ASP.NET は、ユーザー入力のスクリプトと HTML をブロックする入力要求検証機能を提供します。

DetailsView でのデータ操作

DetailsView コントロールには、ユーザーがコントロール内の項目を更新、削除、挿入、ページ処理できる組み込み機能が用意されています。 DetailsView コントロールがデータ ソース コントロールにバインドされている場合、DetailsView コントロールはデータ ソース コントロールの機能を利用し、自動更新、削除、挿入、ページング機能を提供できます。

DetailsView コントロールは、他の種類のデータ ソースを使用した更新、削除、挿入、ページングの操作をサポートできます。ただし、これらの操作の実装を適切なイベント ハンドラーで提供する必要があります。

DetailsView コントロールは、AutoGenerateEditButton、AutoGenerateDeleteButton、または AutoGenerateInsertButton プロパティをそれぞれ true に設定することで、Edit、Delete、または New ボタンを含む CommandField 行フィールドを自動的に追加できます。 [削除] ボタン (選択したレコードをすぐに削除) とは異なり、[編集] または [新規] ボタンをクリックすると、DetailsView コントロールはそれぞれ編集モードまたは挿入モードになります。 編集モードでは、[編集] ボタンは [更新] ボタンと [キャンセル] ボタンに置き換えられます。 フィールドのデータ型 (TextBox コントロールや CheckBox コントロールなど) に適した入力コントロールは、ユーザーが変更するフィールドの値と共に表示されます。 [更新] ボタンをクリックすると、データ ソース内のレコードが更新され、[キャンセル] ボタンをクリックすると変更は破棄されます。 同様に、挿入モードでは、[新規] ボタンが [挿入] ボタンと [キャンセル] ボタンに置き換えられ、ユーザーが新しいレコードの値を入力するための空の入力コントロールが表示されます。

DetailsView コントロールにはページング機能があり、ユーザーはデータ ソース内の他のレコードに移動できます。 有効にすると、ページ ャー行にページ ナビゲーション コントロールが表示されます。 ページングを有効にするには、AllowPaging プロパティを true に設定 します。 pager 行は、PagerStyle プロパティと PagerSettings プロパティを使用してカスタマイズできます。

DetailsView の外観のカスタマイズ

DetailsView コントロールの外観は、コントロールのさまざまな部分のスタイル プロパティを設定することでカスタマイズできます。 次の表に、さまざまなスタイル プロパティの一覧を示します。

Style プロパティ 説明
AlternatingRowStyle DetailsView コントロールの交互のデータ行のスタイル設定。 このプロパティを設定すると、データ行は RowStyle 設定と AlternatingRowStyle 設定の間で交互に表示されます。
CommandRowStyle DetailsView コントロールの組み込みコマンド ボタンを含む行のスタイル設定。
EditRowStyle DetailsView コントロールが編集モードの場合のデータ行のスタイル設定。
EmptyDataRowStyle データ ソースにレコードが含まれていない場合に DetailsView コントロールに表示される空のデータ行のスタイル設定。
FooterStyle DetailsView コントロールのフッター行のスタイル設定。
Headerstyle DetailsView コントロールのヘッダー行のスタイル設定。
InsertRowStyle DetailsView コントロールが挿入モードの場合のデータ行のスタイル設定。
Pagerstyle DetailsView コントロールのポケットベル行のスタイル設定。
RowStyle DetailsView コントロールのデータ行のスタイル設定。 AlternatingRowStyle プロパティも設定されている場合、データ行は RowStyle 設定と AlternatingRowStyle 設定の間で交互に表示されます。
FieldHeaderStyle DetailsView コントロールのヘッダー列のスタイル設定。

DetailsView のイベント

DetailsView コントロールには、プログラミングできるイベントがいくつか用意されています。 これにより、イベントが発生するたびにカスタム ルーチンを実行できます。 次の表に、DetailsView コントロールでサポートされるイベントの一覧を示します。 DetailsView コントロールは、基本クラス DataBinding、DataBound、Disposed、Init、Load、PreRender、Render の各イベントも継承します。

Event 説明
Itemcommand DetailsView コントロールでボタンがクリックされたときに発生します。
Itemcreated DetailsView コントロールですべての DetailsViewRow オブジェクトが作成された後に発生します。 このイベントは、表示前にレコードの値を変更するためによく使用されます。
ItemDeleted [削除] ボタンをクリックしたときに、DetailsView コントロールの後にデータ ソースからレコードが削除されたときに発生します。 このイベントは、多くの場合、削除操作の結果をチェックするために使用されます。
ItemDeleting [削除] ボタンをクリックしたときに、DetailsView コントロールがデータ ソースからレコードを削除する前に発生します。 このイベントは、削除操作を取り消すためによく使用されます。
ItemInserted [挿入] ボタンをクリックしたときに、DetailsView コントロールがレコードを挿入した後に発生します。 このイベントは、挿入操作の結果をチェックするためによく使用されます。
ItemInserting [挿入] ボタンをクリックしたときに、DetailsView コントロールがレコードを挿入する前に発生します。 このイベントは、挿入操作を取り消すためによく使用されます。
Itemupdated [更新] ボタンをクリックしたときに、DetailsView コントロールが行を更新した後に発生します。 このイベントは、更新操作の結果をチェックするためによく使用されます。
ItemUpdating [更新] ボタンをクリックしたときに、DetailsView コントロールがレコードを更新する前に発生します。 このイベントは、更新操作を取り消すためによく使用されます。
ModeChanged DetailsView コントロールがモード (編集、挿入、または読み取り専用モード) を変更した後に発生します。 このイベントは、DetailsView コントロールがモードを変更したときにタスクを実行するためによく使用されます。
ModeChanging DetailsView コントロールがモード (編集、挿入、または読み取り専用モード) を変更する前に発生します。 このイベントは、モードの変更を取り消すためによく使用されます。
PageIndexChanged ポケットベル ボタンの 1 つがクリックされたときに、DetailsView コントロールがページング操作を処理した後に発生します。 このイベントは、ユーザーがコントロール内の別のレコードに移動した後にタスクを実行する必要がある場合に一般的に使用されます。
PageIndexChanging Pager ボタンの 1 つがクリックされたが、DetailsView コントロールがページング操作を処理する前に発生します。 このイベントは、ページング操作を取り消すためによく使用されます。

メニュー コントロール

ASP.NET 2.0 の Menu コントロールは、フル機能のナビゲーション システムとして設計されています。 SiteMapDataSource などの階層データ ソースに簡単にデータをバインドできます。

Menu コントロールの構造は、宣言的または動的に定義でき、1 つのルート ノードと任意の数のサブノードで構成されます。 次のコードは、Menu コントロールのメニューを宣言的に定義します。

<asp:menu id="NavigationMenu" disappearafter="2000" staticdisplaylevels="2" staticsubmenuindent="10" orientation="Vertical" font-names="Arial" target="_blank" runat="server"> <staticmenuitemstyle backcolor="LightSteelBlue" forecolor="Black"/> <statichoverstyle backcolor="LightSkyBlue"/> <dynamicmenuitemstyle backcolor="Black" forecolor="Silver"/> <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/> <items> <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home"> <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music"> <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/> <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/> <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/> </asp:menuitem> <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies"> <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/> <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/> <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/> </asp:menuitem> </asp:menuitem> </items> </asp:menu>

上の例では、Home.aspx ノードがルート ノードです。 他のすべてのノードは、ルート ノード内のさまざまなレベルで入れ子になっています。

Menu コントロールでレンダリングできるメニューには 2 種類あります。静的メニューと動的メニュー。 静的メニューは、常に表示されるメニュー項目で構成されます。 動的メニューは、ユーザーがマウスでマウスをポイントしたときにのみ表示されるメニュー項目で構成されます。 お客様は、静的メニューと宣言的に定義されたメニューと、実行時にデータバインドされるメニューを含む動的メニューを混同することがよくあります。 実際、動的メニューと静的メニューは、母集団の方法とは無関係です。 "静的" と "動的" という用語は、メニューが既定で静的に表示されるか、ユーザーが何らかのアクションを実行したときにのみ表示されるかのみを指します。

StaticDisplayLevels プロパティは、メニューの静的なレベルの数を構成するために使用されるため、既定で表示されます。 上の例では、 StaticDisplayLevels プロパティを 2 に設定すると、メニューに [ホーム] ノード、ミュージック ノード、および [ムービー] ノードが静的に表示されます。 他のすべてのノードは、ユーザーが親ノードの上にマウス ポインターを合わせると動的に表示されます。

MaximumDynamicDisplayLevels プロパティは、メニューで表示できる動的レベルの最大数を構成します。 MaximumDynamicDisplayLevels プロパティで指定された値より高いレベルの動的メニューは破棄されます。

Note

MaximumDynamicDisplayLevels プロパティが原因でメニューが表示されない状況が発生する可能性はほぼ確実です。 このような場合は、顧客メニューを表示できるように プロパティが十分に設定されていることを確認します。

メニュー コントロールのデータ バインディング

Menu コントロールは、SiteMapDataSource や XMLDataSource などの任意の階層データ ソースにバインドできます。 SiteMapDataSource は、Web.sitemap ファイルからフィードオフされ、そのスキーマによって Menu コントロールに既知の API が提供されるため、Menu コントロールへのデータ バインディングに最も一般的に使用されるメソッドです。 次の一覧は、単純な Web.sitemap ファイルを示しています。

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx" description="Our Home Page" title="Home"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>

ルート siteMapNode 要素が 1 つだけあることに注意してください。この場合は Home 要素です。 siteMapNode ごとに複数の属性を構成できます。 最もよく使用される属性は次のとおりです。

  • Url ユーザーがメニュー項目をクリックしたときに表示する URL を指定します。 この属性が存在しない場合、ノードはクリックされたときに単にポストバックされます。
  • タイトル メニュー項目に表示されるテキストを指定します。
  • 説明 ノードのドキュメントとして使用されます。 また、マウスをノードの上に置くと、ツール ヒントとして表示されます。
  • siteMapFile 入れ子になったサイトマップを許可します。 この属性は、整形式の ASP.NET サイトマップ ファイルを指している必要があります。
  • 役割 セキュリティ トリミングによってノードの外観を制御 ASP.NET 許可します。

これらの属性はすべて省略可能ですが、メニューが指定されていない場合は、メニューの動作が期待どおりではない可能性があることに注意してください。 たとえば、 url 属性が指定されていても description 属性が指定されていない場合、ノードは表示されず、指定された URL に移動する方法はありません。

メニュー操作の制御

ASP.NET Menu コントロールの操作に影響を与えるプロパティがいくつかあります。 Orientation プロパティ、 DisappearAfter プロパティ、 StaticItemFormatString プロパティ、 StaticPopoutImageUrl プロパティは、これらのほんの一部です。

  • [向き]、水平または垂直に設定でき、静的メニュー項目を行の水平方向または垂直方向にレイアウトし、互いに積み重ねるかどうかを制御します。 このプロパティは、動的メニューには影響しません。
  • DisappearAfter プロパティは、マウスを移動した後に動的メニューを表示する期間を構成します。 値はミリ秒単位で指定され、既定値は 500 です。 このプロパティを -1 に設定すると、メニューが自動的に消えることはありません。 その場合、メニューは、ユーザーがメニューの外側をクリックしたときにのみ消えます。
  • StaticItemFormatString プロパティを使用すると、メニュー システムで一貫した詳細を簡単に維持できます。 このプロパティを指定する場合は、 {0} データ ソースに表示される説明の代わりに を入力する必要があります。 たとえば、演習 1 のメニュー項目に「製品ページにアクセスする」などと表示するには、StaticItemFormatString の [ページ {0} にアクセスする] を指定します。 実行時に、ASP.NET は の {0} 出現箇所をメニュー項目の正しい説明に置き換えます。
  • StaticPopoutImageUrl プロパティは、特定のメニュー ノードにマウス ポインターを合わせてアクセスできる子ノードがあることを示すために使用されるイメージを指定します。 動的メニューでは、引き続き既定のイメージが使用されます。

テンプレート化されたメニュー コントロール

Menu コントロールはテンプレート化されたコントロールであり、2 つの異なる ItemTemplate を使用できます。StaticItemTemplate と DynamicItemTemplate。 これらのテンプレートを使用すると、サーバー コントロールまたはユーザー コントロールをメニューに簡単に追加できます。

Visual Studio .NET でテンプレートを編集するには、メニューの [スマート タグ] ボタンをクリックし、[テンプレートの編集] を選択します。 その後、StaticItemTemplate または DynamicItemTemplate の編集を選択できます。

StaticItemTemplate に追加されたコントロールは、ページの読み込み時に静的メニューに表示されます。 DynamicItemTemplate に追加されたコントロールはすべて、すべてのポップアップ メニューに表示されます。

Menu コントロールには、それに固有の 2 つのイベントがあります。 MenuItemClicked イベントと MenuItemDatabound イベント。

MenuItemClicked イベントは、メニュー項目がクリックされたときに発生します。 MenuItemDatabound イベントは、メニュー項目がデータバインドの場合に発生します。 イベント ハンドラーに渡される MenuEventArgs は、Item プロパティを使用してメニュー項目にアクセスできます。

メニューの外観を制御する

また、メニューの書式設定に使用できる多くのスタイルの 1 つ以上を使用して、メニュー コントロールの外観に影響を与えることができます。 これらの中には、 StaticMenuStyleDynamicMenuStyleDynamicMenuItemStyleDynamicSelectedStyleおよび DynamicHoverStyle があります。 これらのプロパティは、標準の HTML スタイル文字列を使用して構成されます。 たとえば、次は動的メニューのスタイルに影響します。

<DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"
    BackColor="#D6D3CE" />

Note

いずれかのホバー スタイルを使用している場合は、runat 要素がサーバーに設定された head> 要素をページに追加<する必要があります。

メニュー コントロールでは、ASP.NET 2.0 テーマの使用もサポートされています。

TreeView コントロール

TreeView コントロールは、ツリーのような構造のデータを表示します。 Menu コントロールと同様に、SiteMapDataSource などの任意の階層データ ソースに簡単にデータをバインドできます。

お客様が ASP.NET 2.0 の TreeView コントロールについて質問する可能性が高い最初の質問は、ASP.NET 1.x で使用できた TreeView IE WebControl に関連しているかどうかです。 そのようなことはありません。 ASP.NET 2.0 TreeView コントロールは一から作成され、以前に使用できた IE TreeView WebControl よりも大幅に改善されています。

TreeView コントロールをサイト マップにバインドする方法については、Menu コントロールとまったく同じ方法で実行されるため、詳しくは説明しません。 ただし、TreeView コントロールの動作方法には明確な違いがあります。

既定では、TreeView コントロールは完全に展開されます。 初期読み込み時に展開のレベルを変更するには、コントロールの ExpandDepth プロパティを変更します。 これは、TreeView が特定のノードの拡張時にデータバインドされる場合に特に重要です。

DataBinding the TreeView Control

Menu コントロールとは異なり、TreeView は大量のデータの処理に役立ちます。 したがって、SiteMapDataSource または XMLDataSource へのデータバインドに加えて、TreeView は多くの場合、DataSet またはその他のリレーショナル データにバインドされるデータです。 TreeView コントロールが大量のデータにバインドされている場合は、コントロールで実際に表示されるデータにのみバインドすることをお勧めします。 その後、TreeView ノードが展開されると、データを追加のデータにバインドできます。

このような場合、TreeView の PopulateOnDemand プロパティを true に設定する必要があります。 その後、 TreeNodePopulate メソッドの実装を指定する必要があります。

PostBack を使用しないデータ バインディング

前の例のノードを初めて展開すると、ページがポストバックされて更新されます。 この例では問題ではありませんが、大量のデータを含む運用環境にある可能性があると想像できます。 より良いシナリオは、TreeView がまだノードに動的に設定されますが、サーバーへのポストバックは行わないシナリオです。

PopulateNodesFromClient プロパティと PopulateOnDemand プロパティを true に設定すると、ASP.NET TreeView コントロールはポストバックなしでノードに動的に設定されます。 親ノードが展開されると、クライアントから XMLHttp 要求が行われ、OnTreeNodePopulate イベントが発生します。 サーバーは XML データ アイランドで応答し、子ノードをデータバインドするために使用されます。

ASP.NET は、この機能を実装するクライアント コードを動的に作成します。 <スクリプトを含むスクリプト> タグは、AXD ファイルを指して生成されます。 たとえば、次の一覧は、XMLHttp 要求を生成するスクリプト コードのスクリプト リンクを示しています。

<script src="/WebSite1/WebResource.axd?d=QQG9vSdBi4_k2y9AeP_iww2&
    amp;t=632514255396426531"
    type="text/javascript"></script>

ブラウザーで上記の AXD ファイルを参照して開くと、XMLHttp 要求を実装するコードが表示されます。 このメソッドを使用すると、お客様がスクリプト ファイルを変更できなくなります。

TreeView コントロールの操作の制御

TreeView コントロールには、コントロールの操作に影響を与えるいくつかのプロパティがあります。 最も明確なプロパティは 、ShowCheckBoxesShowExpandCollapseおよび ShowLines です

ShowCheckBoxes プロパティは、レンダリング時にノードにチェック ボックスを表示するかどうかに影響します。 このプロパティの有効な値は NoneRootParentLeaf、All です。 これらは、次のように TreeView コントロールに影響します。

プロパティ値 効果
なし チェックボックスはノードには表示されません。 これが既定の設定です。
Root チェック ボックスは、ルート ノードにのみ表示されます。
Parent チェックボックスは、子ノードを持つノードにのみ表示されます。 これらの子ノードは、親ノードまたはリーフ ノードにすることができます。
Leaf チェックボックスは、子ノードを持たないノードにのみ表示されます。
すべて すべてのノードにチェックボックスが表示されます。

チェック ボックスを使用している場合、 CheckedNodes プロパティはポストバック時にチェックされる TreeView ノードのコレクションを返します。

ShowExpandCollapse プロパティは、ルート ノードと親ノードの横にある展開/折りたたみイメージの外観を制御します。 このプロパティが false に設定されている場合、TreeView ノードはハイパーリンクとしてレンダリングされ、リンクをクリックして展開または折りたたまれます。

ShowLines プロパティは、親ノードを子ノードに接続する行を表示するかどうかを制御します。 false (既定値) の場合、行は表示されません。 true の場合、TreeView コントロールは LineImagesFolder プロパティで指定されたフォルダー内の線イメージを使用します。

TreeView 行の外観をカスタマイズするために、Visual Studio .NET 2005 には Line Designer ツールが含まれています。 このツールには、次のように TreeView コントロールの [スマート タグ] ボタンを使用してアクセスできます。

Visual Studio ライン デザイナー ツールのスクリーンショット。カーソルが [行イメージのカスタマイズ] の選択にカーソルを合わせます。

図 1

[線イメージのカスタマイズ] メニュー オプションを選択すると、Line Designer ツールが起動し、TreeView 行の外観を構成できます。

TreeView イベント

TreeView コントロールには、次の一意のイベントがあります。

  • SelectedNodeChanged SelectAction プロパティに基づいてノードが選択されたときに発生します。
  • TreeNodeCheckChanged ノードのチェックボックスの状態が変更されたときに発生します。
  • TreeNodeExpanded SelectAction プロパティに基づいてノードが展開されたときに発生します。
  • TreeNodeCollapsed ノードが折りたたまれているときに発生します。
  • TreeNodeDataBound ノードがデータ バインドされている場合に発生します。
  • TreeNodePopulate ノードが設定されたときに発生します。

SelectAction プロパティを使用すると、ノードが選択されたときに発生するイベントを構成できます。 SelectAction プロパティには、次のアクションがあります。

  • TreeNodeSelectAction.Expand ノードが選択されたときに TreeNodeExpanded が発生します。
  • TreeNodeSelectAction.None ノードが選択されている場合、イベントは発生しません。
  • TreeNodeSelectAction.Select ノードを選択すると、SelectedNodeChanged イベントが発生します。
  • TreeNodeSelectAction.SelectExpand ノードを選択すると、SelectedNodeChanged イベントと TreeNodeExpanded イベントの両方が発生します。

TreeView を使用した外観の制御

TreeView コントロールは、スタイルを使用してコントロールの外観を制御するための多くのプロパティを提供します。 使用できるプロパティは次のとおりです。

プロパティ名 コントロール
HoverNodeStyle マウスをポイントしたときのノードのスタイルを制御します。
LeafNodeStyle リーフ ノードのスタイルを制御します。
Nodestyle すべてのノードのスタイルを制御します。 特定のノード スタイル (LeafNodeStyle など) がこのスタイルをオーバーライドします。
ParentNodeStyle すべての親ノードのスタイルを制御します。
RootNodeStyle ルート ノードのスタイルを制御します。
SelectedNodeStyle 選択したノードのスタイルを制御します。

これらの各プロパティは読み取り専用です。 ただし、それぞれ TreeNodeStyle オブジェクトが返され、そのオブジェクトのプロパティは property-subproperty 形式を使用して変更できます。 たとえば、SelectedNodeStyleForeColor プロパティを設定するには、次の構文を使用します。

<asp:TreeView id=sampleTreeView
    SelectedNodeStyle-ForeColor=Blue
    runat=server>

上記のタグが閉じていないことに注意してください。 これは、ここに示す宣言構文を使用する場合は、HTML コードにも TreeViews ノードを含めるからです。

スタイル プロパティは、 property.subproperty 形式を使用してコードで指定することもできます。 たとえば、コードで RootNodeStyleForeColor プロパティを設定するには、次の構文を使用します。

treeView1.RootNodeStyle.ForeColor = System.Drawing.Color.Red;

Note

さまざまなスタイル プロパティの包括的な一覧については、TreeNodeStyle オブジェクトの MSDN ドキュメントを参照してください。

SiteMapPath コントロール

SiteMapPath コントロールは、ASP.NET 開発者向けのパンくずナビゲーション コントロールを提供します。 他のナビゲーション コントロールと同様に、SiteMapDataSource や XmlDataSource などの階層データ ソースに簡単にデータをバインドできます。

SiteMapPath コントロールは、SiteMapNodeItem オブジェクトで構成されます。 ノードには 3 種類あります。ルート ノード、親ノード、および現在のノード。 ルート ノードは、階層構造の上部にあるノードです。 現在のノードは、現在のページを表します。 他のすべてのノードは親ノードです。

SiteMapPath コントロールの操作の制御

SiteMapPath コントロールの操作を制御するプロパティは次のとおりです。

プロパティ プロパティの説明
ParentLevelsDisplayed 表示される親ノードの数を制御します。 既定値は -1 で、表示される親ノードの数に制限はありません。
PathDirection SiteMapPath の方向を制御します。 有効な値は、RootToCurrent (既定値) と CurrentToRoot です。
PathSeparator SiteMapPath コントロール内のノードを区切る文字を制御する文字列。 既定値は です。
RenderCurrentNodeAsLink 現在のノードをリンクとしてレンダリングするかどうかを制御するブール値。 既定値は False です。
Skiplinktext スクリーン リーダーでページを表示するときのアクセシビリティを支援します。 このプロパティを使用すると、スクリーン リーダーは SiteMapPath コントロールをスキップできます。 この機能を無効にするには、 プロパティを String.Empty に設定します。

テンプレート化された SiteMapPath コントロール

SiteMapControl はテンプレート化されたコントロールであるため、コントロールの表示に使用するさまざまなテンプレートを定義できます。 SiteMapPath コントロールのテンプレートを編集するには、コントロールの [スマート タグ] ボタンをクリックし、メニューから [テンプレートの編集] を選択します。 次に示すように、[SiteMapTasks] メニューが表示され、使用可能なさまざまなテンプレートから選択できます。

SiteMapControl テンプレート編集モード メニューのスクリーンショット。NodeTemplate が強調表示されています。

図 2

NodeTemplate テンプレートは、SiteMapPath 内の任意のノードを参照します。 ノードがルート ノードまたは現在のノードであり、 RootNodeTemplate または CurrentNodeTemplate が構成されている場合、NodeTemplate はオーバーライドされます。

SiteMapPath イベント

SiteMapPath コントロールには、Control クラスから派生していない 2 つのイベントがあります。 ItemCreated イベントと ItemDataBound イベント。 ItemCreated イベントは、SiteMapPath アイテムの作成時に発生します。 ItemDataBound は、SiteMapPath ノードのデータ バインディング中に DataBind メソッドが呼び出されたときに発生します。 SiteMapNodeItemEventArgs オブジェクトは、Item プロパティを使用して特定の SiteMapNodeItem にアクセスできるようにします。

SiteMapPath を使用した外観の制御

SiteMapPath コントロールの書式設定には、次のスタイルを使用できます。

プロパティ名 コントロール
CurrentNodeStyle 現在のノードのテキストのスタイルを制御します。
RootNodeStyle ルート ノードのテキストのスタイルを制御します。
Nodestyle CurrentNodeStyle または RootNodeStyle が適用されないと仮定して、すべてのノードのテキストのスタイルを制御します。

NodeStyle プロパティは、CurrentNodeStyle または RootNodeStyle によってオーバーライドされます。 これらの各プロパティは読み取り専用であり、 Style オブジェクトを返します。 これらのプロパティのいずれかを使用してノードの外観を変更するには、返される Style オブジェクトのプロパティを設定する必要があります。 たとえば、次のコードは、現在のノードの forecolor プロパティを変更します。

<asp:SiteMapPath runat="server" ID="SiteMapPath1"
  CurrentNodeStyle-ForeColor="Orange"/>

プロパティは、次のようにプログラムで適用することもできます。

this.SiteMapPath1.CurrentNodeStyle.ForeColor =
    System.Drawing.Color.Orange;

Note

テンプレートが適用されている場合、スタイルは適用されません。

ラボ 1: ASP.NET メニュー コントロールの構成

  1. 新しい Web サイトを作成します。

  2. [ファイル]、[新規作成]、[ファイル] の順に選択し、ファイル テンプレートの一覧から [サイト マップ] を選択して、サイト マップ ファイルを追加します。

  3. サイト マップ (既定では Web.sitemap) を開き、次の一覧のように変更します。 サイト マップ ファイルでリンクしているページは実際には存在しませんが、この演習では問題になりません。

    <?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
        <siteMapNode url="~/default.aspx">
            <siteMapNode url="~/products/default.aspx"
              title="Products" description="Our Products">
                <siteMapNode url="~/products/winprods.aspx"
                  title="Windows Products" description="Windows Products" />
                <siteMapNode url="~/products/webprods.aspx"
                  title="Web Products" description="Web Products" />
            </siteMapNode>
            <siteMapNode url="~/services/default.aspx"
              title="Services" description="Our Services">
                <siteMapNode url="~/services/consulting.aspx"
                  title="Consulting Services"
                  description="Consulting Services" />
                <siteMapNode url="~/services/develop.aspx"
                  title="Development Services"
                  description="Development Services" />
            </siteMapNode>
        </siteMapNode>
    </siteMap>
    
  4. デザイン ビューで既定の Web フォームを開きます。

  5. ツールボックスの [ナビゲーション] セクションから、新しいメニュー コントロールをページに追加します。

  6. ツールボックスの [データ] セクションから、新しい SiteMapDataSource を追加します。 SiteMapDataSource は、サイト内の Web.sitemap ファイルを自動的に使用します。 (Web.sitemap ファイルは、サイトのルート フォルダーに存在する 必要があります )。

  7. [メニュー] コントロールをクリックし、[スマート タグ] ボタンをクリックして、[メニュー タスク] ダイアログを表示します。

  8. [データ ソースの選択] ドロップダウンで、[SiteMapDataSource1] を選択します。

  9. [オートフォーマット] リンクをクリックし、メニューの形式を選択します。

  10. [プロパティ] ペインで、 StaticDisplayLevels プロパティを 2 に設定します。 メニュー コントロールに、Designerの [ホーム]、[製品]、[サービス] ノードが表示されます。

  11. ブラウザーでページを参照して、メニューを使用します。 (サイト マップに追加したページは実際には存在しないため、参照しようとするとエラーが表示されます)。

StaticDisplayLevels プロパティと MaximumDynamicDisplayLevels プロパティを変更し、それらがメニューのレンダリング方法にどのように影響するかを確認します。

ラボ 2: TreeView コントロールを動的にバインドする

この演習では、ローカルで実行SQL Serverがあり、Northwind データベースが SQL Server インスタンスに存在することを前提としています。 これらの条件が満たされない場合は、サンプルの接続文字列を変更してください。 また、信頼された接続ではなく、SQL Server認証を指定する必要がある場合もあります。

  1. 新しい Web サイトを作成します。

  2. Default.aspx のコード ビューに切り替え、すべてのコードを以下に示すコードに置き換えます。

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    
    <script runat="server">
        void PopulateNode(Object sender, TreeNodeEventArgs e) {
            // Call the appropriate method to populate a node at a particular level.
            switch (e.Node.Depth) {
                case 0:
                    // Populate the first-level nodes.
                    PopulateCategories(e.Node);
                    break;
                case 1:
                    // Populate the second-level nodes.
                    PopulateProducts(e.Node);
                    break;
                default:
                    // Do nothing.
                    break;
            }
    
        }
        void PopulateCategories(TreeNode node) {
    
            // Query for the product categories. These are the values
            // for the second-level nodes.
            DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");
            // Create the second-level nodes.
            if (ResultSet.Tables.Count > 0) {
    
                // Iterate through and create a new node for each row in the query results.
                // Notice that the query results are stored in the table of the DataSet.
                foreach (DataRow row in ResultSet.Tables[0].Rows) {
    
                    // Create the new node. Notice that the CategoryId is stored in the Value property
                    // of the node. This will make querying for items in a specific category easier when
                    // the third-level nodes are created.
                    TreeNode newNode = new TreeNode();
                    newNode.Text = row["CategoryName"].ToString();
                    newNode.Value = row["CategoryID"].ToString();
                    // Set the PopulateOnDemand property to true so that the child nodes can be
                    // dynamically populated.
                    newNode.PopulateOnDemand = true;
    
                    // Set additional properties for the node.
                    newNode.SelectAction = TreeNodeSelectAction.Expand;
    
                    // Add the new node to the ChildNodes collection of the parent node.
                    node.ChildNodes.Add(newNode);
    
                }
    
            }
    
        }
        void PopulateProducts(TreeNode node) {
            // Query for the products of the current category. These are the values
            // for the third-level nodes.
            DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);
            // Create the third-level nodes.
            if (ResultSet.Tables.Count > 0) {
    
                // Iterate through and create a new node for each row in the query results.
                // Notice that the query results are stored in the table of the DataSet.
                foreach (DataRow row in ResultSet.Tables[0].Rows) {
    
                    // Create the new node.
                    TreeNode NewNode = new TreeNode(row["ProductName"].ToString());
    
                    // Set the PopulateOnDemand property to false, because these are leaf nodes and
                    // do not need to be populated.
                    NewNode.PopulateOnDemand = false;
    
                    // Set additional properties for the node.
                    NewNode.SelectAction = TreeNodeSelectAction.None;
    
                    // Add the new node to the ChildNodes collection of the parent node.
                    node.ChildNodes.Add(NewNode);
    
                }
    
            }
        }
        DataSet RunQuery(String QueryString) {
            // Declare the connection string. This example uses Microsoft SQL Server
            // and connects to the Northwind sample database.
            String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI";
            SqlConnection DBConnection = new SqlConnection(ConnectionString);
            SqlDataAdapter DBAdapter;
            DataSet ResultsDataSet = new DataSet();
            try {
                // Run the query and create a DataSet.
                DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
                DBAdapter.Fill(ResultsDataSet);
                // Close the database connection.
                DBConnection.Close();
            } catch (Exception ex) {
                // Close the database connection if it is still open.
                if (DBConnection.State == ConnectionState.Open) {
                    DBConnection.Close();
                }
    
                Message.Text = "Unable to connect to the database.";
            }
            return ResultsDataSet;
        }
    </script>
    
    <html>
    <body>
        <form id="Form1" runat="server">
            <h3>
                TreeView PopulateNodesFromClient Example</h3>
            <asp:TreeView ID="LinksTreeView" 
              Font-Name="Arial" ForeColor="Blue" EnableClientScript="true"
              PopulateNodesFromClient="false" 
              OnTreeNodePopulate="PopulateNode" runat="server"
                ExpandDepth="0">
                <Nodes>
                    <asp:TreeNode Text="Inventory" SelectAction="Expand"
                                  PopulateOnDemand="True" Value="Inventory" />
                </Nodes>
            </asp:TreeView>
            <br>
            <br>
            <asp:Label ID="Message" runat="server" />
        </form>
    </body>
    </html>
    
  3. ページを treeview.aspx として保存します。

  4. ページを参照します。

  5. ページが最初に表示されたら、ブラウザーでページのソースを表示します。 表示されているノードのみがクライアントに送信されていることに注意してください。

  6. 任意のノードの横にあるプラス記号をクリックします。

  7. ページのソースをもう一度表示します。 新しく表示されたノードが存在していることに注意してください。

ラボ 3: GridView と DetailsView を使用した詳細ビューとデータの編集

  1. 新しい Web サイトを作成します。

  2. Web サイトに新しいweb.configを追加します。

  3. 次に示すように、web.config ファイルに接続文字列を追加します。

    <connectionStrings>
        <add name="Northwind"
             providerName="System.Data.SqlClient"
             connectionString="Data Source=localhost;Integrated Security=SSPI;
             Initial Catalog=Northwind;"/>
    </connectionStrings>
    

    Note

    環境に基づいて接続文字列を変更することが必要な場合があります。

  4. web.config ファイルを保存して閉じます。

  5. Default.aspx を開き、新しい SqlDataSource コントロールを追加します。

  6. SqlDataSource コントロールの ID を Products に変更 します

  7. [ SqlDataSource タスク] メニューの [ データ ソースの構成] をクリックします。

  8. 接続ドロップダウンで [Northwind ] を選択し、[次へ] をクリックします。

  9. [名前] ドロップダウンから [製品] を選択し、次に示すように ProductIDProductNameUnitPriceUnitsInStock の各チェックボックスをチェックします。

データ ソース製品の構成画面のスクリーンショット。

図 3

  1. [次へ] をクリックします。
  2. [完了] をクリックします。
  3. ソース ビューに切り替え、生成されたコードを調べます。 SqlDataSource コントロールに追加された SelectCommandDeleteCommandInsertCommandUpdateCommand に注目してください。 また、追加されたパラメーターにも注意してください。
  4. デザイン ビューに切り替え、新しい GridView コントロールをページに追加します。
  5. [データ ソースの選択] ドロップダウンから [製品] を選択します。
  6. 次に示すように 、[ページングを有効にする][選択を有効にする] をオンにします

[GridView タスク] メニューのスクリーンショット。

図 4

  1. [ 列の編集] リンクをクリックし、[ フィールドの自動生成 ] がオンになっていることを確認します。
  2. [OK] をクリックします。
  3. GridView コントロールを選択した状態で、[プロパティ] ウィンドウの DataKeyNames プロパティの 横にあるボタンをクリックします。
  4. [使用可能なデータ フィールド] の一覧から [ProductID] を選択し、ボタンを>クリックして追加します。
  5. [OK] をクリックします。
  6. 新しい SqlDataSource コントロールをページに追加します。
  7. SqlDataSource コントロールの ID を [詳細] に変更します。
  8. [SqlDataSource タスク] メニューの [ データ ソースの構成] を選択します。
  9. ドロップダウンから [Northwind ] を選択し、[ 次へ] をクリックします。
  10. [名前] ドロップダウンから [製品] を選択し、[] リスト ボックスの <[/strong>*] チェックボックスをチェックします。
  11. [ WHERE ] ボタンをクリックします。
  12. [列] ドロップダウンから [ProductID] を選択します。
  13. [演算子] ドロップダウンで を選択 = します。
  14. [ソース] ドロップダウンから [制御] を選択します。
  15. [コントロール ID] ドロップダウンから [GridView1 ] を選択 します。
  16. [ 追加 ] ボタンをクリックして WHERE 句を追加します。
  17. [OK] をクリックします。
  18. [詳細設定] ボタンをクリックし、[INSERT、UPDATE、および DELETE ステートメントの生成] チェック ボックスをチェックします。
  19. [OK] をクリックします。
  20. [ 次へ ] をクリックし、[完了] をクリック します
  21. DetailsView コントロールをページに追加します。
  22. [ データ ソースの選択 ] ドロップダウンで、[詳細] を選択 します
  23. 次に示すように 、[編集を有効にする] チェック ボックスをオンにします。

[詳細][タスクの表示] メニューのスクリーンショット。

図 5 39.ページを保存し、Default.aspx を参照します。 40. 別のレコードの横にある [選択 ] リンクをクリックすると、DetailsView が自動的に更新されます。 41. DetailsView コントロールの [編集] リンクをクリックします。 42. レコードを変更し、[ 更新] をクリックします。