SharePoint Online 创建门户网站系列之图片滚动实现教程

SharePoint 2023-01-12

创建SharePoint Online栏目我们之前已经介绍过了，具体就是内容编辑器方式、自带WebPart方式和JavaScript读取后台数据前台做展示的三种；

　　但是，对于复杂的展示来说，这些方式还是会比较难以实现，虽然对于首页的图片轮播来说，通过JavaScript方式已经完全能够胜任，但是，我还是想通过这个栏目，为大家介绍如何使用沙盒解决方案创建WebPart，来完成更加复杂的前台展示。

　　下面，让我们开始在SharePoint Online的门户网站中创建沙盒解决方案吧。

一、 SharePoint Online 为滚动图片创建图片库

　　为产品展示创建一个图片库，用来存储信息，如下图：

clip_image001

　　创建一个多行文本字段，用来存储描述，记得最好先英文，改中文，如下图：

clip_image002

　　上传几张产品展示的图片，我这里没有什么图片，就随便上传了几张平遥古镇的图片，如下图：

clip_image003

二、在Visual Studio中创建沙盒解决方案的WebPart

　　先创建一个空的SharePoint 项目，如下图：

clip_image004

　　记得选择沙盒解决方案，上面是调试站点，如下图：

clip_image005

　　在项目中添加一个项目，如下图：

clip_image006

　　选择可视化WebPart，命名为VWPShow，VWP是Visual WebPart的缩写，方便我们知道这是个可视化WebPart；如果是WebPart，我一般命名WP开头；

clip_image007

　　一般，最好重命名一下Feature的名字，如果是Feature1这样的名字，将来维护起来实在是麻烦，如下图：

clip_image008

　　同时，修改Feature的Title，最好也写一点Description，方便激活的时候认识和查找，如下图：

clip_image009

　　还有一定要确定，我们添加的可视化WebPart，在Feature里面，否则部署上去，可能会发现激活Feature没有部件，因为我们根本没加进去。

　　我记得中文版VS会自动加进去，英文版不会自动添加，大家注意吧；

clip_image010

　　然后在可视化WebPart的前台页面上，添加div、脚本、样式，如下图：

clip_image011

　　然后添加一个获取数据，组成Html的方法，在页面加载的时候执行一下，如下图：

clip_image012

　　然后，在头部加上Microsoft.SharePoint;的引用，因为默认没有引用，而我们要用服务器对象模型读取数据，如下图：

clip_image013

　　编写核心代码，其实很简单，如下图：

public void GetDataHtml()
{
    try
    {
        string DataHtml = string.Empty;
        string ElementDiv = "<div id='demo_pro'><a href='/Products/Forms/DispForm.aspx?ID={0}'><img src='{1}' border='0' width='160px' height='120px' /><span>{2}</span></a></div>";
        SPSite site = SPContext.Current.Site;
        SPWeb web = site.OpenWeb();
        SPList list = web.Lists.TryGetList("产品展示");
        SPListItemCollection itemcoll = list.Items;
        DataHtml = "<div id='demo_p'><div id='indemo_p'><div id='demo1_p'>";
        foreach (SPListItem item in itemcoll)
        {
            DataHtml += string.Format(ElementDiv, item.ID.ToString(), item.Url.ToString(), item.Title.ToString());
        }
        DataHtml += "</div><div id='demo2_p'></div></div></div>";
        VWPShowContent.InnerHtml = DataHtml;
    }
    catch { }
}

　　然后在项目上右键，发布一下，即可：

clip_image014