SharePoint Online 創(chuàng)建門戶網(wǎng)站系列之圖片滾動完成圖文教程

創(chuàng)建SharePoint Online欄目我們之前已經(jīng)介紹過了，具體就是內(nèi)容編輯器方式、自帶WebPart方式和JavaScript讀取后臺數(shù)據(jù)前臺做展示的三種；

　　但是，對于復雜的展示來說，這些方式還是會比較難以實現(xiàn)，雖然對于首頁的圖片輪播來說，通過JavaScript方式已經(jīng)完全能夠勝任，但是，我還是想通過這個欄目，為大家介紹如何使用沙盒解決方案創(chuàng)建WebPart，來完成更加復雜的前臺展示。

　　下面，讓我們開始在SharePoint Online的門戶網(wǎng)站中創(chuàng)建沙盒解決方案吧 。

一、 SharePoint Online 為滾動圖片創(chuàng)建圖片庫

　　為產(chǎn)品展示創(chuàng)建一個圖片庫，用來存儲信息，如下圖：

　　創(chuàng)建一個多行文本字段，用來存儲描述，記得最好先英文，改中文，如下圖：

　　上傳幾張產(chǎn)品展示的圖片，我這里沒有什么圖片，就隨便上傳了幾張平遙古鎮(zhèn)的圖片，如下圖：

二、在Visual Studio中創(chuàng)建沙盒解決方案的WebPart

　　先創(chuàng)建一個空的SharePoint 項目，如下圖：

　　記得選擇沙盒解決方案，上面是調試站點，如下圖：

　　在項目中添加一個項目，如下圖：

　　選擇可視化WebPart，命名為VWPShow，VWP是Visual WebPart的縮寫，方便我們知道這是個可視化WebPart；如果是WebPart，我一般命名WP開頭；

　　一般，最好重命名一下Feature的名字，如果是Feature1這樣的名字，將來維護起來實在是麻煩，如下圖：

　　同時，修改Feature的Title，最好也寫一點Description，方便激活的時候認識和查找，如下圖：

　　還有一定要確定，我們添加的可視化WebPart，在Feature里面，否則部署上去，可能會發(fā)現(xiàn)激活Feature沒有部件，因為我們根本沒加進去。

　　我記得中文版VS會自動加進去，英文版不會自動添加，大家注意吧；

　　然后在可視化WebPart的前臺頁面上，添加div、腳本、樣式，如下圖：

　　然后添加一個獲取數(shù)據(jù)，組成Html的方法，在頁面加載的時候執(zhí)行一下，如下圖：

　　然后，在頭部加上Microsoft.SharePoint;的引用，因為默認沒有引用，而我們要用服務器對象模型讀取數(shù)據(jù)，如下圖：

　　編寫核心代碼，其實很簡單，如下圖：

public void GetDataHtml(){    try    {        string DataHtml = string.Empty;        string ElementDiv = "{2}";        SPSite site = SPContext.Current.Site;        SPWeb web = site.OpenWeb();        SPList list = web.Lists.TryGetList("產(chǎn)品展示");        SPListItemCollection itemcoll = list.Items;        DataHtml = "";        foreach (SPListItem item in itemcoll)        {            DataHtml += string.Format(ElementDiv, item.ID.ToString(), item.Url.ToString(), item.Title.ToString());        }        DataHtml += "";        VWPShowContent.InnerHtml = DataHtml;    }    catch { }}

　　然后在項目上右鍵，發(fā)布一下，即可：

三、上傳部署沙盒解決方案，并添加到首頁欄目中

　　可視化WebPart發(fā)布完畢，發(fā)現(xiàn)網(wǎng)站設置里，沒有解決方案這一選項了，不知道何原因，索性直接敲Url，“/_catalogs/solutions/Forms/AllItems.aspx”;

　　然后插入WebPart中，可以看到我們新添加的WebPart了，如下圖：

　　添加到頁面上，就可以看到我們添加可視化WebPart的效果，如下圖：

　　然后在頁面上刪掉原來的Html靜態(tài)內(nèi)容，添加WebPart Zone，在Ribbon菜單上插入選項卡，如下圖：

　　然后在首頁添加這個可視化WebPart，即可，預覽效果，如下圖：

總 結

　　沙盒解決方案是SharePoint Online非常有用的一項開發(fā)技能，這里我們介紹的是通過沙盒解決方案部署SPO的可視化WebPart，其實我們的功能并不復雜，完全可以用JavaScript API來完成，但是為了介紹多種方式完成類似功能，還是用了一下沙盒解決方案。