SharePoint 2010 コントロールを使用して視覚的 Web パーツを作成する

SharePoint 2010 での Web 開発の概要: SharePoint コントロールと ASP.NET コントロールを使用して視覚的 Web パーツを作成する方法について解説します。

最終更新日: 2011年1月12日

適用対象: Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

この演習では、Microsoft SharePoint 2010 の視覚的 Web パーツを Microsoft Visual Studio 2010 に作成し、SharePoint ListViewByQuery コントロール、ASP.NET ラベル コントロール、SharePoint DateTime コントロールを追加します。この Web パーツは、プロジェクトのリストにあるアイテムを日付に基づいてフィルターします。このタスクを完了するには、以下の作業を実行します。

• SharePoint の視覚的 Web パーツ プロジェクトを作成する

• プロジェクト リスト Web パーツを作成する

• ソリューションをテストする

SharePoint の視覚的 Web パーツ プロジェクトを作成する

このタスクでは、視覚的 Web パーツ SharePoint 2010 プロジェクトを Microsoft Visual Studio 2010 に作成します。

プロジェクトを作成するには

1. Visual Studio 2010 を起動します。

2. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

3. [新しいプロジェクト] ダイアログ ウィンドウの [インストールされているテンプレート] セクションで、[Visual C#]、[SharePoint]、[2010] の順にクリックします。

4. プロジェクト アイテムから [視覚的 Web パーツ] をクリックします。

5. [名前] ボックスに「ProjectsListWebPart」と入力して、[OK] をクリックします。

6. SharePoint カスタマイズ ウィザードで、この演習に使用するローカル Web サイトの URL (https://localhost/SampleWebSite など) を入力します。

7. 信頼レベルとして [ファーム ソリューションとして配置する] を選択し、[完了] をクリックします。

プロジェクト リスト Web パーツを作成する

このタスクでは、SharePoint コントロールと ASP.NET コントロールを Web パーツに追加します。次に、Projects リストをクエリして、指定した日付以降のアイテムを返すコードを追加します。

Web パーツをカスタマイズするには

1. ソリューション エクスプローラーで [VisualWebPart1.webpart] をダブルクリックします。

2. VisualWebPart1.webpart ファイルの Title プロパティを [ProjectsListWebPart] に変更します。

3. 以下のコードを VisualWebPart1UserControl.ascx 内の既存のコードの終わりに追加します。このコードによって、SharePoint ListViewByQuery コントロール、ASP.NET ラベル コントロール、SharePoint DateTime コントロールが追加されます。ツールボックスから VisualWebPart1UserControl.ascx ファイル画面にコントロールをドラッグすることによっても、同様にコントロールを追加できます。ID 属性値は以下のコードの値と一致させてください。

   <SharePoint:ListViewByQuery runat="server" ID="ProjectsListView" />
   <br />
   <asp:Label ID="Label1" runat="server" Text="Items due by:" />
   <SharePoint:DateTimeControl ID="DueDate" AutoPostBack="true" OnDateChanged="OnDate_Changed"
       DateOnly="true" runat="server">
   </SharePoint:DateTimeControl>
   

4. ソリューション エクスプローラーで [VisualWebPart1UserControl.ascx] を右クリックして、[コードの表示] をクリックします。

5. 以下の using ステートメントを追加します。

   using Microsoft.SharePoint;
   using Microsoft.SharePoint.Utilities;
   using System.Web;
   

6. 以下のコードを Page_Load メソッドの本文に追加します。

   DateTime dueDate = DateTime.Now;
   
   if (!string.IsNullOrEmpty(Request.QueryString["date"]))
   {
       dueDate = DateTime.Parse(Request.QueryString["date"]);
   }
   DueDate.SelectedDate = dueDate;
   
   SPWeb home = SPContext.Current.Web;
   ProjectsListView.List = home.Lists["Projects"];
   
   SPQuery query = new SPQuery(ProjectsListView.List.DefaultView);
   query.ViewFields = "<FieldRef Name=\"Title\" /><FieldRef Name=\"Due_x0020_Date\" />";
   query.Query = string.Format(
       "<Where><Leq><FieldRef Name=\"Due_x0020_Date\" /><Value Type=\"DateTime\">{0}</Value></Leq></Where>"
       , dueDate.ToString("s"));
   
   ProjectsListView.DisableFilter = true;
   ProjectsListView.DisableSort = true;
   ProjectsListView.Query = query;
   

7. 以下のコードを Page_Load メソッドの後に追加します。

   protected void OnDate_Changed(object sender, EventArgs e)
   {
       SPUtility.Redirect(SPContext.Current.ListItem.Name
            , SPRedirectFlags.Default
            , HttpContext.Current
            , string.Format("date={0}", DueDate.SelectedDate.ToString("d")));
   }
   

8. ソリューション エクスプローラーで [ProjectsListWebPart] を右クリックして、[配置] をクリックします。

   プロジェクトが正常に配置されたら、次のセクションに進みます。

ソリューションをテストする

このタスクでは、Web パーツを指定した Web サイトのホーム ページに追加して、ソリューションをテストします。

ソリューションをテストするには

1. Web サイトを開きます。

2. ホーム ページの上部で、[編集] をクリックします。

3. リボンの [編集ツール] で、[挿入] タブをクリックします。

4. [Web パーツ] をクリックし、図 1 に示すように [カテゴリ] で [カスタム] を選択します。ProjectsListWebPart が Web パーツの一覧に表示されます。

   図 1. Web パーツ挿入画面

   

5. リボンの [保存して閉じる] をクリックします。[変更の保存] ダイアログ画面が表示された場合は、[はい] をクリックします。

   図 2 に示すように、新しい Web パーツにプロジェクトが表示されるようになりました。

   図 2. プロジェクトを表示している Web パーツ

   

6. [日時] リストをクリックし、[12/1/2009] までスクロールします。表示されるアイテムの数が 1 つ減ります。

次の手順

• SharePoint 2010 での Web 開発の概要

• 次の手順

• ff630939(v=office.14).md