ASP.NET EC のホームへ戻る

Webパーツ

 

アカウントを取得したユーザーが、自分好みのページにカスタマイズできるように本システムのトップページには、「天気予報」、「ヤフー検索」、「グーグル検索」、「カレンダー」の4個のWebパーツが組み込まれています。Webパーツを利用するとパーツを最小化したり、閉じることができます。また、パーツを移動させることも可能です。なお、Webパーツをカスタマイズするには、サイトにログインして認証ユーザーとなる必要があります。図12は、ユーザーがまだログインしていませんのでWebパーツをカスタマイズすることはできません。

 

12: 本システムのトップページには4個のWebパーツが組み込まれている

fig11-1

 

Webパーツの組み込み (Default.aspx)

 

WebフォームにWebパーツを組み込むには、最初にWebPartManagerコントロールを配置します。

 

<asp:WebPartManager ID="WebPartManager1" runat="server" />

 

次に、WebPartZoneコントロールを必要な数だけ配置します。ここでは3個配置します。WebPartZone1にはWebパーツとして「天気予報」のWebユーザーコントロール(Weather.ascx)を配置します。WebPartZoneにユーザーコントロールを配置するには、ソリューションエクスプローラからWeather.ascxをドラッグ&ドロップします。

WebPartZone<ZoneTempalte>…</ZoneTemplate><uc:Weather…/>が挿入されたら、「title="天気予報"」属性を入力してWebパーツのタイトルを追加します。

 

<asp:WebPartZone ID="WebPartZone1" runat="server">

  <ZoneTemplate>

    <uc1:Weather ID="Weather1" runat="server" title="天気予報" />

  </ZoneTemplate>

</asp:WebPartZone>

 

Weather.ascx(天気予報のユーザーコントロール)

<%@ Control Language="VB" AutoEventWireup="false"

  CodeFile="Weather.ascx.vb" Inherits="Weather" %>

<iframe

  src="http://link.tenki-yoho.com/img.php?all130,acrweb">

  <A href="http://www.tenki-yoho.com/" target=_blank>天気予報</A>

</iframe>

 

同様の手順で、WebPartZone2Webパーツとして「ヤフー検索」と「グーグル検索」のWebユーザーコントロール(Yahoo.ascx, Google.ascx)を配置します。WebPartZone3には、WebパーツとしてCalendarコントロールを配置します。

 

<asp:WebPartZone ID="WebPartZone2" runat="server">

  <ZoneTemplate>

    <uc2:Yahoo ID="Yahoo1" runat="server" title="ヤフー検索" />

    <uc3:Google ID="Google1" runat="server" title="グーグル検索" />

  </ZoneTemplate>

</asp:WebPartZone>

 

<asp:WebPartZone ID="WebPartZone3" runat="server">

  <ZoneTemplate>

    <asp:Calendar ID="Calendar1" runat="server"

      SkinID="defaultCalendar"

      title="カレンダー" />

  </ZoneTemplate>

</asp:WebPartZone>

 

トップページから[ログイン]のリンクをクリックしてログインすると、Webパーツの上位右端に「▼」ボタンが表示されますので、クリックするとドロップダウンメニューが表示されます。[最小化]をクリックすると、Webパーツのタイトルのみ表示されます。[閉じる]をクリックすると、Webパーツが画面から消えます。Webパーツをカスタマイズした情報は、ASPNETDB.MDFデータベースのaspnet_PersonalozationPerUserテーブルに保存されて、再訪問したときに復元されます。

 

※一旦閉じたWebパーツを復元させるには、VWD 2005のデータベースエクスプローラからASPNETDB.MDFデータベースのaspnet_PersonalizationPerUserテーブルを表示して該当するレコードを削除します。

 

 

13: ドロップダウンメニューからWebパーツを最小化または閉じることができる

fig12

 

 

Webパーツを移動させる (Default.aspx)

 

Webパーツを移動させるには、WebPartManagerをデザインモードに切り替える必要があります。ここでは、トップページにRadioButtonListコントロールを配置してWebPartManagerDisplayModeプロパティを切り替えます。

 

<asp:RadioButtonList ID="rablMode" runat="server"

  AutoPostBack="True">

  <asp:ListItem Value="0">ブラウズモード</asp:ListItem>

  <asp:ListItem Value="1">デザインモード</asp:ListItem>

</asp:RadioButtonList>

 

Protected Sub rablMode_SelectedIndexChanged(...) _

  Handles rablMode.SelectedIndexChanged

  Select Case rablMode.SelectedIndex

    Case 0

      WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode

    Case 1

      WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode

  End Select

End Sub

 

トップページのラジオボタンリストから「デザインモード」を選択すると、WebPartManagerがデザインモードに切り替わります。この状態でマウスをWebパーツ上に移動するとマウスの形状が十字型に変化しますので、ドラッグしてお好みのWebPartZoneに移動させます。移動が完了したらラジオボタンリストから「ブラウズモード」を選択して移動不可の状態にします。

 

本システムでは利用していませんが、CatalogZoneDeclarativeCatalogPartPageCatalogPartコントロールを配置するとランタイム時にWebパーツをダイナミックに追加、削除することができます。

 

 

14:「グーグル検索」のWebパーツをWebPartZone2からWebPartZone1に移動

fig13

 

ASP.NET EC のホームへ戻る