ここでは、静的コンテンツを表示する Web パーツを使用したページを作成します。
メモ : |
|---|
Web パーツのパーソナル化は Web パーツ コントロール セットの既定で有効になっているため、有効化のための操作は必要ありません。サイトで Web パーツ ページを初めて実行したときに、ASP.NET により、ユーザーのパーソナル化設定を格納する既定のパーソナル化プロバイダが設定されます。既定のプロバイダは、サイトのディレクトリのサブディレクトリに作成されたデータベースを使用します。パーソナル化の詳細については、「Web パーツのパーソナル化の概要」を参照してください。 |
Web ページを作成するには
テキスト エディタで新しいファイルを作成し、ファイルの先頭に次のページ宣言を追加します。
<%@ page language="VB" %>
<%@ page language="C#" %>
ページ宣言の下に、次のコード例に示すように、完全なページ構造を作成するタグを入力します。
このページには、1 つの行と 3 つの列で構成される空のテーブルが含まれています。このテーブルに、後で追加する Web パーツ コントロールを格納します。
<html>
<head runat="server">
<title>Web Parts Page</title>
</head>
<body>
<h1>Web Parts Demonstration Page</h1>
<form runat="server" id="form1">
<br />
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
</table>
</form>
</body>
</html>ファイルに WebPartsDemo.aspx という名前を付け、Web サイトのディレクトリに保存します。
次の手順では、ゾーンを設定します。ゾーンは、ページの特定の領域を占める、Web パーツ コントロールを格納する複合コントロールです。
ページにゾーンを追加するには
ページの <form> 要素のすぐ下に、次の例に示すように <asp:webpartmanager> 要素を追加します。
<asp:webpartmanager id="WebPartManager1" runat="server" />
WebPartManager コントロールは、Web パーツ コントロールを使用するすべてのページに必須のコントロールです。
テーブル内の最初の <td> 要素の中に <asp:webpartzone> 要素を追加し、次の例に示すようにそのプロパティ値を割り当てます。
<asp:webpartzone> 要素には、<zonetemplate> 要素も含まれます。Web パーツ コントロールは、<zonetemplate> 要素内に配置されます。
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<asp:webpartzone id="SideBarZone" runat="server"
headertext="Sidebar">
<zonetemplate>
</zonetemplate>
</asp:webpartzone>
</td>テーブル内の 2 番目の <td> 要素の中に <asp:webpartzone> 要素を追加し、次の例に示すようにそのプロパティ値を割り当てます。
<td valign="top">
<asp:webpartzone id="MainZone" runat="server" headertext="Main">
<zonetemplate>
</zonetemplate>
</asp:webpartzone>
</td>WebPartsDemo.aspx ファイルを保存します。
これで、個別に制御できる 2 つのゾーンがページに作成されました。ただし、いずれのゾーンも内容がないので、次の手順で内容を作成します。このチュートリアルでは、静的コンテンツのみを表示する Web パーツ コントロールを使用します。
Web パーツ ゾーンのレイアウトは、<zonetemplate> 要素によって指定されます。ゾーン テンプレートの内部には、任意の Web サーバー コントロール (カスタム Web パーツ コントロール、ユーザー コントロール、または既存のサーバー コントロール) を追加できます。このチュートリアルでは Label サーバー コントロールを使用し、その中に静的テキストを単純に追加します。WebPartZone ゾーンに標準の ASP.NET サーバー コントロールを追加すると、ASP.NET は実行時にそれを Web パーツ コントロールとして扱います。これにより、標準のサーバー コントロールで Web パーツ機能のほとんどを使用できるようになります。
ゾーンのコンテンツを作成するには
Main ゾーンの <zonetemplate> 要素の中に、次のコード例に示すようなコンテンツを含む <asp:label> 要素を追加します。
<asp:webpartzone id="MainZone" runat="server" headertext="Main">
<zonetemplate>
<asp:label id="contentPart" runat="server" title="Content">
<h2>Welcome to My Home Page</h2>
<p>Use links to visit my favorite sites!</p>
</asp:label>
</zonetemplate>
</asp:webpartzone>WebPartsDemo.aspx ファイルを保存します。
テキスト エディタで新しいファイルを作成します。
このファイル内に、Web パーツ コントロールとしてページに追加するユーザー コントロールを作成します。
新しいファイルの先頭に、次の例に示すようなコントロール宣言を入力します。
<%@ control language="VB" classname="SearchUserControl" %>
<%@ control language="C#" classname="SearchUserControl" %>
メモ : |
|---|
このチュートリアルの検索コントロールは、実際の検索機能を実装しません。Web パーツ機能を実証するためにのみ使用します。 |
コントロール宣言の後に 1 組の <script> タグを追加し、その中に、パーソナライズ可能なプロパティを作成するためのコードを追加します。
ResultsPerPage プロパティには Personalizable 属性があることに注意してください。ユーザー インターフェイス (UI) に、デザイン ビューの設定を変更するためのエディット コントロールを追加している場合、このプロパティにより、コントロールのユーザーはページごとに返される検索結果の数をパーソナライズ化できるようになります。
コントロールのコードが次のコード例のようになるようにします。
<%@ control language="VB" classname="SearchUserControl" %>
<script runat="server">
Private results As Integer
<Personalizable()> _
Property ResultsPerPage() As Integer
Get
Return results
End Get
Set(ByVal value As Integer)
results = value
End Set
End Property
</script>
<%@ control language="C#" classname="SearchUserControl" %>
<script runat="server">
private int results;
[Personalizable]
public int ResultsPerPage
{
get
{return results;}
set
{results = value;}
}
</script>
次のコード例に示されるように、<script> 要素の下にテキスト ボックスとボタンを追加して、検索コントロールのための UI を作成します。
<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />
セキュリティに関するメモ : |
|---|
このコントロールは、ユーザー入力を受け付けるテキストボックスを持つため、セキュリティ上の脅威になる可能性があります。既定では、ASP.NET Web ページはユーザー入力を検証し、入力に HTML 要素やスクリプトが含まれていないことを確認します。詳細については、「スクリプトによる攻略の概要」を参照してください。 |
使用している言語に応じて SearchUserControlVB.ascx または SearchUserControlCS.ascx という名前をファイルに付け、WebPartsDemo.aspx ページと同じディレクトリに保存します。
リンクの一覧を含むコントロールと前の手順で作成したユーザー コントロールの 2 つのコントロールを、Sidebar ゾーンに追加します。リンクは、Main ゾーンの静的テキストを作成したときと同様に、単一の標準 Label サーバー コントロールとして追加します。ユーザー コントロールに含まれる個々のサーバー コントロールはゾーンに直接追加できますが、この場合は直接追加しません。その代わりに、サーバー コントロールを前の手順で作成したユーザー コントロールの一部にします。これは、ユーザー コントロールに含めるコントロールと付加機能をパッケージ化して、そのユーザー コントロールをゾーン内で Web パーツ コントロールとして参照するための一般的な方法です。
実行時に、ASP.NET は GenericWebPart コントロールのある両方のコントロールをラップします。Web サーバー コントロールが GenericWebPart コントロールでラップされると、この汎用パーツ コントロールが親コントロールとなり、この親コントロールの ChildControl プロパティを通じてサーバー コントロールにアクセスできます。この汎用パーツ コントロールを使用することにより、標準の Web サーバー コントロールに、WebPart クラスから派生した Web パーツ コントロールと同じ基本動作と属性を持たせることができます。
Sidebar ゾーンのコンテンツを作成するには
テキスト エディタで WebPartsDemo.aspx ページを開きます。
ページの上部、ページ宣言の直後に、先ほど作成したユーザー コントロールを参照する次の宣言を追加します。
<%@ register tagprefix="uc1" tagname="SearchUserControl"
src="searchusercontrolvb.ascx" %>
<%@ register tagprefix="uc1" tagname="SearchUserControl"
src="searchusercontrolcs.ascx" %>
Sidebar ゾーンの <zonetemplate> 要素の中に、いくつかのリンクを含んでいる Label コントロールを追加します。このコントロールの下で、次のコード例に示すように、作成したユーザー コントロールを参照します。
<asp:webPartZone id="SidebarZone" runat="server"
headertext="Sidebar">
<zonetemplate>
<asp:label runat="server" id="linksPart" title="Links">
<a href="www.asp.net">ASP.NET site</a>
<br />
<a href="www.gotdotnet.com">GotDotNet</a>
<br />
<a href="www.contoso.com">Contoso.com</a>
<br />
</asp:label>
<uc1:SearchUserControl id="searchPart" runat="server"
title="Search" />
</zonetemplate>
</asp:WebPartZone>WebPartsDemo.aspx ファイルを保存します。
ここでページをテストできます。
ページをテストするには
ページをブラウザに読み込みます。
ページに 2 つのゾーンが表示されます。ページ上の各コントロールのタイトル バーに、下向き矢印が表示されます。これには、動詞メニューと呼ばれるドロップダウン メニューが含まれています。動詞とは、コントロールのクローズ、最小化、編集など、ユーザーがサーバー コントロールに対して実行できる操作です。動詞メニューに含まれている各項目が動詞です。ページは次の図のようになります。
.gif)
コントロールのタイトル バーの下向き矢印をクリックして動詞メニューを表示し、[最小化] リンクをクリックします。
コントロールが最小化されます。
動詞メニューの [元に戻す] をクリックします。
このようにして、Web パーツ コントロールのビジュアル状態の表示を変更できます。