[翻譯]No.9354 SharePoint Pages（3）之網站頁面

建立網站頁面
　　與主版頁面相同，Visual Studio不提供網站頁面設計器，而SharePoint Designer再次協助我們製作網站頁面。在本節中，我們將使用SharePoint Designer建立SharePoint的網站頁面，開啟SharePoint Designer串連到SharePoint網站。在左側欄中選擇“網站頁面”，右側會列出所有網站頁面。10-14所示：

　　網站允許我們自己建立並定義網站首頁。我們可以通過Ribbon上面的“Web組件頁”和“頁面”按鈕來確定建立什麼類型的網站頁面，我們可以從“頁面”按鈕建立普通的aspx或html頁面，從“Web組件頁”按鈕上可以建立新的Web組件頁。在下面的例子中，我們將建立一個新的Web組件頁。10-15所示。當您單擊“建立Web組件頁”，會顯示出8個Web組件頁模板，這是由SharePoint內建提供的。

　　現在建立一個名為“CustomWebPart.aspx”並雙擊檔案，查看CustomWebPart.aspx設定頁面，10-16所示：

                 

　　現在建立一個名為“CustomWebPart.aspx”並雙擊檔案，查看CustomWebPart.aspx設定頁面，10-16所示：

　　選中要編輯的內容頁，選擇“編輯頁面”的連結，轉入編輯檢視。SharePoint Designer設計檢視與Visual Studio編輯器視圖相似。如果只是一些小的改動，可以切換至分屏視圖，這樣既方便選中要編輯的地區，也可以快速查看HTML改動後的效果。在設計檢視中點擊“Untitled_1”PlaceHolder。10-17所示，程式碼檢視中相應的HTML標記就被選中。

                      

　　選擇TitleWebPart元素，將HeaderTitle值改為“新網站頁面”。10-18所示，使用Ribbon的ASP.NET按鈕添加新的asp.net控制項和html標記。

　　　　　　

　　我們將添加一些額外的控制項並修改標題，然後點擊Ribbon上的儲存按鈕，這樣就會將修改的網站頁面儲存到內容資料庫裡面。接下來，開啟瀏覽器並導航到SharePoint網站。在左側導覽列中點擊庫，在顯示的庫列表上開啟網站頁面庫，10-19所示，我們建立的頁面已經在庫中了。

　　　　

　　點擊“CustomWebPart”開啟自訂頁面，10-20所示，新的頁面，標題是“新網站頁面”。

　　　　

　　現在我們已經瞭解了如何從SharePoint Designer中建立網站頁面，接下來我們考慮如何從Visual Studio建立一個網站頁面。我們要建立一個擁有兩個Web組件地區的網站頁面，使得使用者可以添加兩個Web組件。首先要瞭解到，我們不可以直接將網站頁面添加到Visual Studio的SharePoint項目中，所以我們就需要在預設開啟模式在選擇[檔案]>[建立]>[檔案]，然後在建立項對話方塊中選擇[Web]>[C#]>[Web表單]。點擊[開啟]就建立了一個擁有標準HTML和Web表單的ASP.NET頁面，我們要刪除整個HTML標記，然後替換成我們所需要的Web組件頁所需要的代碼。如列表10-2所示，自訂Web組件地區。

　　　　

　　在最頂部要添加一個@Page指令。需要設定MasterPageFile屬性，將其屬性設定為我們需要的主版頁面。在這個例子中我們使用了預設主版頁面，設定為“~masterurl/default.master”。我們還需要設定這個Web組件頁的繼承屬性:”Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,PublicKeyToken=71e9bce111e9429c”。

　　這是一個非常長的值，WebPartPages是Microsoft.SharePoint程式集的命名空間。版本14.0.0.0則是說明我們正在使用2010版本的Microsoft SharePoint。而在程式碼下面有綠色的波浪線，因為Visual Studio並不支援載入SharePoint主版頁面上下文，這就阻止了我們轉換至設計檢視，而只能在程式碼檢視中修改頁面原始碼。

　　接下來我們需要添加一個@Register指令來註冊SharePoint Web控制項。設定WebControls首碼為SharePoint。同樣設定Microsoft.SharePoint.Utilities，命名空間為Utilities，這其中包含字串編碼和使用者資訊相關工具，如任務等。還要包含Microsoft.Web.CommandUI，這個程式集位於GAC中，包含SharePoint Ribbon空間。最後我們註冊Web布局頁繼承對象Microsoft.SharePoint.WebPartPages首碼為WebPartPages。

　　接下來我們繼續建設網站的其他部分，在頁面的主要部分上我們添加PlaceHolderMain的預留位置標記，讓Web組件顯示在頁面的主要區域，在這個標記上方添加<h1>標記，以顯示網頁標題。然後從工具箱中拖出HTML的Table標記。在Visual Studio的設計檢視中就會出現3行3列的表格。而我們只需要一行兩列，刪除其餘部分，接下來從工具箱中拖出Web部分地區控制項—WebPartZone，10-21所示：

　　　　

　　預設Web組件地區的首碼為“asp:”由於我們的設定，則需將首碼改變為WebPartPages。否則SharePoint將無法識別這些WebPartZone控制項。現在我們將添加第二個WebPartZone控制項放置到表格的第二列。如代碼10-2中所示設定相應的WebPartZone控制項的屬性，你可以儲存為MyWebPartPage.aspx頁面。
　　接下來我們要將MyWebPartPage.aspx部署到內容資料庫中。首先建立一個新的空SharePoint項目，命名為WebPartPage，在SharePoint自訂想到中選擇部署為場解決方案（我們也可以建立沙箱化解決方案）。然後在項目WebPartPage上按右鍵在菜單中選擇“添加”>“添加項”，建立一個新的模組，然後刪除其中的Sample.txt，並在模組檔案夾上按右鍵，在菜單中選擇“添加”>“現有項”。然後在添加現有項的對話方塊中找到MyWebPartPage.aspx頁面，選中並點擊“添加”按鈕。最後依照代碼10-3所示，修改Elements.xml檔案，以保證我們的頁面被部署到網站的網頁庫中。

　　　　

　　正如我們操作主版頁面所做的那樣，我們修改預設的Elements.xml檔案，修改Module元素的Url屬性，告訴SharePoint將我們的自訂頁面部署到網頁庫中。然後，刪除File的元素屬性Url的值，以防止部署時建立WebPartPage檔案夾，添加Type屬性，設定為“GhosttableInLibrary”，以保證自訂頁面顯示在程式庫檢視中。

　　現在，在解決方案選項卡中，按右鍵項目WebPartPage，在菜單中選擇部署。然後等待Visual Studio左下角顯示部署成功，我們可以開啟瀏覽器並開啟網站首頁，在左側導覽列中點擊“庫“，選擇“網站頁面“，然後就可以找到我們剛剛部署的頁面啦。

　　在網頁上方的Ribbon的“頁面“選項卡中點擊”在瀏覽器中開啟“。為了測試，我們設定頁面為可編輯，這是在Ribbon工具列上就出現了”編輯頁面“的按鈕，點擊之後，進入編輯模式，就會出現兩個可編輯的Web組件地區。現在，使用者就可以將可用的Web組件添加這兩個Web組件地區中。10-22所示就是編輯模式下的自訂Web組件頁。