SharePoint 2013 開發——開發並部署webpart

Justin-Liu發表於2015-06-24
Web

webpart我們就不詳細闡述了，在APP的開發中，自定義屬性設定通過APP webpart的URL查詢字串傳遞，它通過IFRAME來顯示遠端的內容。廢話不多說，我們開始實際操作。

開啟Visual Studio，新建SharePoint應用程式專案，名字我們就叫做SharePointAppPartTest。

參照上一篇完成專案的建立。 右鍵點選SharePoint專案節點，選擇新增->新建項，選擇客戶端Web部件（宿主Web），起名叫做ClientWebPartTest，點選確定並在下一個對話方塊中保留預設完成新增。

我們可以看到解決方案中是如下圖生成的：

SharePoint工程中有一個Elements.xml元素用來說明我們建立的webpart，託管Web應用程式中的Pages資料夾下生成了一個對應的ASPX頁面。開啟Elements.xml檔案可以看到如下預設生成的內容：

<ClientWebPart Name="ClientWebPartTest" Title="ClientWebPartTest 標題" Description="ClientWebPartTest 說明" DefaultWidth="300" DefaultHeight="200">

    <!-- Content 元素標識將在客戶端 Web 部件內呈現的頁面的位置
         在查詢字串上使用模式 _propertyName_ 引用了屬性
         示例: Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->
    <Content Type="html" Src="~remoteAppUrl/Pages/ClientWebPartTest.aspx?{StandardTokens}" />

    <!-- 在 Properties 元素中定義屬性。
         請記得在上述 Content 元素的 Src 特性上放置屬性名稱。 -->
    <Properties>
    </Properties>

  </ClientWebPart>

我們來新增幾個屬性，在Properties節點下，宣告如下四個屬性（string、int、bool、enum）：

<Property
      Name="myStrProp"
      Type="string"
      RequiresDesignerPermission="true"
      DefaultValue="String default value"
      WebCategory="My Test Apps"
      WebDisplayName="A property of type string.">
      </Property>
      <Property
      Name="myIntProp"
      Type="int"
      RequiresDesignerPermission="true"
      DefaultValue="0"
      WebCategory="My Test Apps"
      WebDisplayName="A property of type integer.">
      </Property>
      <Property
      Name="myBoolProp"
      Type="boolean"
      RequiresDesignerPermission="true"
      DefaultValue="false"
      WebCategory="My Test Apps"
      WebDisplayName="A property of type boolean.">
      </Property>
      <Property
      Name="myEnumProp"
      Type="enum"
      RequiresDesignerPermission="true"
      DefaultValue="1st"
      WebCategory="My Test Apps"
      WebDisplayName="A property of type enum.">
        <EnumItems>
          <EnumItem WebDisplayName="First option" Value="1st"/>
          <EnumItem WebDisplayName="Second option" Value="2nd"/>
          <EnumItem WebDisplayName="Third option" Value="3rd"/>
        </EnumItems>
      </Property>

都是我們測試中用的，所以名稱有些隨意，實際應用中請取有意義的名稱。 屬性建立完之後，如何與webpart進行關聯呢？我們需要修改Content節點的Src屬性，修改後的節點如下所示：

<Content Type="html" Src="~remoteAppUrl/Pages/ClientWebPartTest.aspx?{StandardTokens}&StrProp=_myStrProp_&IntProp=_myIntProp_&BoolProp=_myBoolProp_&EnumProp=_myEnumProp_&Editmode=_editMode_" />
藉助這種方式，APP webpart的引數通過URL的查詢字串傳遞到ASPX頁面，接下來我們到ASPX頁面去處理我們定義的引數。

開啟ClientWebPartTest.aspx頁面，在空的DIV元素內加入如下控制元件：

<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Literal ID="Literal1" runat="server" Text="Hello world from an app part！"></asp:Literal>

開啟後臺程式碼ClientWebPartTest.aspx.cs，在Page_Load方法中加入如下程式碼來獲取傳遞的引數：

var intParam = Request.QueryString["IntProp"];
            var strParam = Request.QueryString["StrProp"];
            var boolParam = Request.QueryString["BoolProp"];
            var enumParam = Request.QueryString["EnumProp"];
            var editMode = Request.QueryString["EditMode"];
            if ("true" == editMode)
            {
                Literal1.Text = "The App Part is in edit mode";
            }
            else
            {
                Literal1.Text = "myIntProp = " + intParam + "<br>" +
                "myStrProp = " + strParam + "<br>" +
                "myBoolProp = " + boolParam + "<br>" +
                "myEnumProp = " + enumParam;
            }
var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                clientContext.Load(clientContext.Web, web => web.Title);
                clientContext.ExecuteQuery();
                this.Label1.Text = "Site Title: " + clientContext.Web.Title + "<br>";
            }

程式碼中我又加了一段之前的CSOM，是想用簡單的組合來告訴大家我們其實可以在其中做很多的事情。

F5生成並部署APP，成功之後彈出瀏覽器窗體：

一樣的東西，預設會跳轉到應用程式的Default頁面，我們回到我們的開發人員網站，點選右上角的設定->編輯網頁，選擇插入選項卡，點選應用程式部件。

點選新增按鈕完成頁面中新增webpart的操作。

好了，webpart中已經顯示了我們讓它顯示的內容。

我們回到編輯狀態，編輯這個webpart，可以看到我們新增的自定義屬性。我們對屬性進行適當的修改並儲存。

以上就是開發APP webpart的大致過程。

另外一點需要說明的是，由於我們在除錯狀態下，並沒有釋出APP，所以需要Visual Studio處於除錯狀態下才可以進行訪問測試。

相關文章