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

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

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

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

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

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

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

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

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

　　記得選擇沙盒解決方案，上面是調(diào)試站點(diǎn)，如下圖：

　　在項(xiàng)目中添加一個(gè)項(xiàng)目，如下圖：

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

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

　　同時(shí)，修改Feature的Title，最好也寫一點(diǎn)Description，方便激活的時(shí)候認(rèn)識(shí)和查找，如下圖：

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

　　我記得中文版VS會(huì)自動(dòng)加進(jìn)去，英文版不會(huì)自動(dòng)添加，大家注意吧；

　　然后在可視化WebPart的前臺(tái)頁(yè)面上，添加div、腳本、樣式，如下圖：

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

　　然后，在頭部加上Microsoft.SharePoint;的引用，因?yàn)槟�認(rèn)沒有引用，而我們要用服務(wù)器對(duì)象模型讀取數(shù)據(jù)，如下圖：

　　編寫核心代碼，其實(shí)很簡(jiǎn)單，如下圖：

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 { }}

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

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

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

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

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

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

　　然后在首頁(yè)添加這個(gè)可視化WebPart，即可，預(yù)覽效果，如下圖：

總 結(jié)

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