次の方法で共有

方法 : データ バインド Web パーツ コントロールの例をビルドして実行する

  • [アーティクル]

更新 : 2007 年 11 月

ここでは、データ バインド WebPart コントロールをビルドして実行する手順について説明します。このコントロールの完全なコード例は、「データ バインド Web パーツ コントロールの例」トピックに用意されています。このコード例は、GridView コントロールをデータ ソースに関連付け、Web パーツ アプリケーションで使用できるように WebPart クラスも継承する、カスタム サーバー コントロールの作成方法を示しています。このトピックには、コード例をコンパイルするとき、および Web パーツ コントロールとしてコントロールを実行する ASP.NET Web アプリケーションを構成するときに必要な関連情報が用意されています。

WebPart コントロールのコンパイル

コード例を実行するには、このソース コードをコンパイルする必要があります。これを明示的にコンパイルし、結果のアセンブリを Web サイトの Bin フォルダまたはグローバル アセンブリ キャッシュに配置できます。この代わりに、ソース コードをサイトの App_Code フォルダに配置すると、実行時に動的にコンパイルされます。このコード例は動的コンパイルを使用します。コンパイルする方法を示すチュートリアルについては、「チュートリアル : カスタム サーバー コントロールの開発と使用」を参照してください。

データ バインド WebPart コントロールを動的にコンパイルするには

  1. Web アプリケーションのルート フォルダに、App_Code という名前のフォルダを作成します。

  2. 「データ バインド Web パーツ コントロールの例」トピックからカスタムのデータ バインド WebPart コントロールのソース コードを取得します。App_Code フォルダにソース コード ファイルを配置します。動的コンパイルを使用するためこのファイルには任意の名前を設定できますが、使用する言語に適した拡張子 (..cs または .vb など) をファイルに付ける必要があります。

Web パーツ アプリケーションでのコントロールの使用

Web パーツを使用するアプリケーションを構成する場合は、個々のユーザーを認証できる ASP.NET Web サイトおよびパーソナル化を含めたアプリケーション サービスを処理できるデータベースだけが必要です。また、この例ではデータ バインド コントロールを使用するため、データ ソースを Northwind サンプル データベースに接続できる接続文字列を Web.config ファイルに作成する必要があります。アプリケーションを構成した後、すべての Web パーツ アプリケーションについて、Web パーツ アプリケーション内の WebPart コントロールとサーバー コントロールをホストするそれぞれの Web ページに、WebPartManager コントロールと少なくとも 1 つの WebPartZone コントロールを追加する必要があります。次の 2 番目の手順は、これらのコントロールを追加する方法、およびページを準備してデータ バインド コントロールを実行するのに必要なその他の手順を実行する方法を示しています。

Web パーツ コントロールを実行する ASP.NET アプリケーションを構成するには

  1. 個々のユーザーを認識するように構成された ASP.NET Web アプリケーションがあることを確認します。このサイトを作成する方法については、「方法 : IIS 5.0 および 6.0 内で仮想ディレクトリを作成および構成する」または「方法 : IIS 6.0 でローカル ASP.NET Web サイトを作成および構成する」を参照してください。

  2. 構成済みのパーソナル化プロバイダとデータベースがあることを確認します。Web パーツのパーソナル化は既定で有効になります。これは、Microsoft SQL Server Express (SSE) Edition の SQL パーソナル化プロバイダ (SqlPersonalizationProvider) を使用してパーソナル化データを格納します。このトピックでは、SSE および既定の SQL プロバイダを使用します。SSE がインストールされている場合は、構成を行う必要はありません。SSE は、Microsoft Visual Studio 2005 で、オプションのインストールの一部として使用するか、または Microsoft.com から無料でダウンロードして使用できます。Microsoft SQL Server の完全なバージョンのいずれかを使用するには、ASP.NET アプリケーション サービス データベースをインストールして構成し、SQL パーソナル化プロバイダを構成してそのデータベースに接続する必要があります。詳細については、「SQL Server 向けアプリケーション サービス データベースの作成と構成」を参照してください。また、カスタム プロバイダを作成して構成し、他の SQL 以外のデータベースまたはストレージ ソリューションで使用することもできます。詳細とコード例については、「メンバシップ プロバイダの実装」を参照してください。

  3. データ バインド コントロールをサンプルの Northwind データベースに接続できるように接続文字列を作成します。この例を実行するには、SQL Server に用意されているサンプルの Northwind データベースにアクセスする必要があります。Northwind サンプル データベースがインストールされていない場合は、「Microsoft Download Center」からスクリプトをダウンロードし、データベースを作成してインストールできます。

    接続文字列について推奨される方法では、アプリケーションの Web.config ファイルにそれを配置します。構成ファイルの詳細については、「ASP.NET 構成ファイル」を参照してください。Web.config ファイル内の、SSE 上で実行している Northwind のローカル インスタンスに接続する接続文字列のコード例を次に示します。通常データベース ファイルへのパスを区切る単一引用符 (') は、エンティティ (") として表示されています。Web.config が XML ファイルであるため、このように表示する必要があります。

    <connectionStrings>
  <add name="nwind" 
    connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=
    &quot;C:\SQL Server 2000 Sample Databases\NORTHWND.MDF&quot;;
    Initial Catalog=Northwind;Integrated Security=True;"
    providerName="System.Data.SqlClient" />
</connectionStrings>
    ms227667.alert_note(ja-jp,VS.90).gifメモ :

    接続文字列に含まれているパスワードなどのすべての機密情報を暗号化することをお勧めします。構成データの暗号化の詳細については、「チュートリアル : 保護された構成を使用した構成情報の暗号化」を参照してください。

  4. Web.config ファイルの <system.web> セクションに、<webparts> 要素を追加します。すべての Web パーツ アプリケーションに追加する必要はありませんが、Web パーツ アプリケーションの特定の機能を使用する場合は、このセクションにそれを構成する必要があります。サンプルのデータ バインド WebPart コントロールは、状態データとプロパティ データが格納されている構成ファイルのエクスポートが有効になっています。既定では、Web パーツ アプリケーションのエクスポート機能は無効になっているため、<webParts> セクションでそれを有効にする必要があります。enabledExport 属性を <webParts> 要素に追加し、次のコード例に示すように、その値を True に設定します。

    <webParts enableExport="true" />

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

Web パーツ コントロールをホストする Web ページを準備するには

  1. Web ページ上の利用可能な Web パーツ表示モードをユーザーが切り替えることのできる、ユーザー コントロールを作成します。このコントロールおよび次の手順ではデータ バインド Web パーツ コントロールを実行する必要はありませんが、この機能は多くの Web パーツ ページで役立ちます。エディタで、ユーザー コントロールの次のコードを貼り付け、ファイルに Displaymodemenucs.ascx または Displaymodemenuvb.ascx のいずれかの名前を付けて (使用している言語に応じて異なります)、Web アプリケーションのルート フォルダに保存します。

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="vb" classname="DisplayModeMenuVB"%>

<script runat="server">

' Use a field to reference the current WebPartManager.
Dim _manager As WebPartManager


Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) 
    AddHandler Page.InitComplete, AddressOf InitComplete

End Sub 


Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs) 
    _manager = WebPartManager.GetCurrentWebPartManager(Page)

    Dim browseModeName As String = WebPartManager.BrowseDisplayMode.Name

    ' Fill the dropdown with the names of supported display modes.
    Dim mode As WebPartDisplayMode
    For Each mode In  _manager.SupportedDisplayModes
        Dim modeName As String = mode.Name
        ' Make sure a mode is enabled before adding it.
        If mode.IsEnabled(_manager) Then
            Dim item As New ListItem(modeName + " Mode", modeName)
            DisplayModeDropdown.Items.Add(item)
        End If
    Next mode

End Sub 


' Change the page to the selected display mode.
Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) 
    Dim selectedMode As String = DisplayModeDropdown.SelectedValue

    Dim mode As WebPartDisplayMode = _manager.SupportedDisplayModes(selectedMode)
    If Not (mode Is Nothing) Then
        _manager.DisplayMode = mode
    End If

End Sub 


Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) 
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name

End Sub 

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 
    runat="server"  
    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

    <!-- This user control recognizes what display modes are possible 
on a page, given the zones that are present, and enables users to 
switch among the display modes. -->
<%@ control language="C#" classname="DisplayModeMenuCS"%>

<script runat="server">

 // Use a field to reference the current WebPartManager.
  WebPartManager _manager;

  void Page_Init(object sender, EventArgs e)
  {
    Page.InitComplete += new EventHandler(InitComplete);
  }  

  void InitComplete(object sender, System.EventArgs e)
  {
    _manager = WebPartManager.GetCurrentWebPartManager(Page);

    String browseModeName = WebPartManager.BrowseDisplayMode.Name;

    // Fill the dropdown with the names of supported display modes.
    foreach (WebPartDisplayMode mode in _manager.SupportedDisplayModes)
    {
      String modeName = mode.Name;
      // Make sure a mode is enabled before adding it.
      if (mode.IsEnabled(_manager))
      {
        ListItem item = new ListItem(modeName + " Mode", modeName);
        DisplayModeDropdown.Items.Add(item);
      }
    }

  }

  // Change the page to the selected display mode.
  void DisplayModeDropdown_SelectedIndexChanged(object sender, 
    EventArgs e)
  {
    String selectedMode = DisplayModeDropdown.SelectedValue;

    WebPartDisplayMode mode = _manager.SupportedDisplayModes[selectedMode];
    if (mode != null)
      _manager.DisplayMode = mode;

  }

  void Page_PreRender(object sender, EventArgs e)
  {
    DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name;
  }

</script>
<div>
  <asp:DropDownList ID="DisplayModeDropdown" 
    runat="server"  
    AutoPostBack="true" 
    OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
</div>

  2. カスタム WebPart コントロールおよびその他のコントロールをホストする新しい ASP.NET ページを作成します。Register ディレクティブをそのページの Page ディレクティブのすぐ下に追加し、作成したユーザー コントロールを登録します。ディレクティブの内容は使用している言語に応じて異なり、次に示す例のようになります。

    [Visual Basic]

    <%@ register src="displaymodevb.ascx" tagname="displaymodevb" 
    tagprefix="uc1" %>

    [C#]

    <%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
    tagprefix="uc1" %>

  3. 次に、カスタム WebPart コントロールの Register ディレクティブを追加します。このトピックでは動的コンパイルを使用するため、ディレクティブに Assembly 属性を追加する必要はありません。このファイルの前回のディレクティブのすぐ下に別の Register ディレクティブを追加し、その tagprefix 属性に任意の文字列を割り当て、namespace 属性にカスタム コントロールの名前空間を割り当てます。ここでも、次の例に示すように使用している言語に応じて内容が異なります。

    [Visual Basic]

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

    <%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

  4. 次のコード例に示すように、ページの <form> 要素の内側に <asp:webpartmanager> 要素を追加します。WebPartManager コントロールは、Web パーツを使用するすべてのページに必要です。

    <asp:webpartmanager id="WebPartManager1" runat="server">
</asp:webpartmanager>

  5. <asp:webpartmanager> 要素の直後に、表示モードを切り替えるユーザー コントロールを宣言します。次のコード例に示すように、コントロールの宣言方法は使用している言語に応じて異なります。

    [Visual Basic]

    <uc1:displaymodevb id="Displaymodevb1" runat="server" />

    <uc1:displaymodecs id="Displaymodecs1" runat="server" />

  6. ユーザー コントロールの後に、1 つの行と 2 つの列を持つテーブルを追加し、ページ上にコントロールのレイアウトを構成します。テーブルのマークアップは、次のコード例のようになります。

    <table style="width: 80%; position: relative">
  <tr valign="top">
    <td style="width: 40%">
    </td>
    <td style="width: 40%">
    </td>
  </tr>
</table>

  7. それぞれの一連の <td> タグ内に、<asp:webpartzone> 要素を追加します。WebPartZoneBase クラスから派生するゾーンは、WebPart コントロールを格納し、それらがすべての Web パーツ機能を使用できるようにするために必要です。最初のゾーンのマークアップは、次のコード例のようになります。

    <asp:webpartzone id="WebPartZone1" runat="server" 
  style="position: relative" >
  <parttitlestyle font-size="14" font-names="Verdana" />
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

    2 番目のゾーンのマークアップは、次のようになります。

    <asp:webpartzone id="WebPartZone2" runat="server" 
  style="position: relative" >
  <zonetemplate>
  </zonetemplate>
</asp:webpartzone>

  8. 次のコード例に示すように、最初のゾーン内の <zonetemplate> タグの間にカスタムのデータ バインド WebPart コントロールを宣言します。このマークアップは、カスタム コントロールのクラス名と同様に、コントロールの Register ディレクティブ内に定義されたタグ プレフィックスを使用します。また、コントロール、ConnectionString に定義されたカスタム プロパティが、Web.config ファイルから割り当てられた接続文字列を持つ属性として記述されています。ページの開発者は、この方法を使用すると、そのコントロールに使用する接続文字列を決定できます。マークアップは、次のようになります。

    <aspSample:SmallGridWebPart id="grid1" runat="server" 
  title="Customer Phone List" width="300" 
  connectionstring="<%$ ConnectionStrings:nwind %>"   />

  9. 比較のために、2 番目のゾーン内の <zonetemplate> タグの間に、通常のカレンダー サーバー コントロールを宣言します。WebPartZone コントロール内にこのコントロールを配置しているため、実行時にこれは WebPart コントロールのように動作します。Web パーツ アプリケーションでサーバー コントロールを使用する方法の詳細については、「Web パーツ アプリケーションでの ASP.NET サーバー コントロールの使用」を参照してください。このマークアップは、次のコード例のようになります。

    <asp:calendar id="Calendar1" runat="server" 
  style="position: relative"></asp:calendar>

  10. ページを保存して閉じます。これで、ページを実行してカスタム WebPart コントロールをテストできるようになりました。このページの完全なコードは、次のコード例のようになります。

    <%@ Page Language="VB" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodevb.ascx" tagname="displaymodevb" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.VB.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:webpartmanager id="WebPartManager1" runat="server">
      </asp:webpartmanager>
      <uc1:displaymodevb id="Displaymodevb1" runat="server" />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1" runat="server" 
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1" runat="server" 
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2" runat="server" 
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1" runat="server" 
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>
<!-- Register the user control to change display modes. -->
<%@ register src="displaymodecs.ascx" tagname="displaymodecs" 
    tagprefix="uc1" %>
<!-- Register the namespace that contains the custom WebPart 
control. Note there is no assembly attribute because this example 
uses dynamic compilation, by placing the source file for the 
control in an App_Code subfolder. -->
<%@ register tagprefix="aspSample" 
    namespace="Samples.AspNet.CS.Controls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:webpartmanager id="WebPartManager1" runat="server">
      </asp:webpartmanager>
      <uc1:displaymodecs id="Displaymodecs1" runat="server" />
      <br />
      <table style="width: 80%; position: relative">
        <tr valign="top">
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone1" runat="server" 
              style="position: relative" >
              <parttitlestyle font-size="14" font-names="Verdana, Arial" />
              <zonetemplate>
                <aspSample:SmallGridWebPart id="grid1" runat="server" 
                  title="Customer Phone List" width="300" 
                  connectionstring="<%$ ConnectionStrings:nwind %>"  
                  />
              </zonetemplate>
            </asp:webpartzone>
          </td>
          <td style="width: 40%">
            <asp:webpartzone id="WebPartZone2" runat="server" 
              style="position: relative">
              <zonetemplate>
                <asp:calendar id="Calendar1" runat="server" 
                  style="position: relative"></asp:calendar>
              </zonetemplate>
            </asp:webpartzone>
          </td>
        </tr>
      </table>
    </div>
    </form>
</body>
</html>

参照

概念

データ バインド Web パーツ コントロールの作成

データ バインド Web パーツ コントロールの例