注：此實例無需添加數(shù)據(jù)控件，避免了一些繁瑣的代碼

?

實現(xiàn)效果如下：

讀取數(shù)據(jù)和圖片，并以每行兩列的形式顯示

?

所需列表如下：

?

1、 VS2010創(chuàng)建沙盒解決方案

2、 創(chuàng)建webpart

3、在TestWebpart.cs中添加代碼

添加 protected override void Render(HtmlTextWriter writer)方法

?

注：css樣式文件已在母版頁中引用，在此直接使用。

?

全部代碼如下

using System; using System.ComponentModel; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using Microsoft.SharePoint.WebControls;using System.Xml.Serialization; using System.Linq; using System.Data;namespace TestProject.TestWebpart {[ToolboxData("<{0}:WPToolPaneTest runat=server></{0}:TestWebpart>"), XmlRoot(Namespace = "TestWebpart")]//定義Toolbox datapublic class TestWebpart : WebPart{protected override void CreateChildControls(){}protected override void Render(HtmlTextWriter writer){SPSite site = SPContext.Current.Site;SPWeb web = SPContext.Current.Web;SPList list = web.Lists["保險類別"];var query = from SPListItem item in list.Items orderby item.ID ascending select item;writer.Write("<div class='Default_left_part1_left_part1_5'>");writer.Write("<div class='Default_left_part1_left_part1_4'><table width='100%' cellpadding='0' cellspacing='0' border='0'><tr>");int i = 1;foreach (SPListItem item in query){writer.Write("<td class='Default_left_part1_left_part1_4_1'><div><table width='100%' cellpadding='0' cellspacing='0' border='0'><tr><td class='Default_left_part1_left_part1_4_1_1'><img alt='' src='");writer.Write(item["圖標"] == null ? "" : item["圖標"].ToString());writer.Write("' /></td><td class='Default_left_part1_left_part1_4_1_2'><div><a href='/Lists/List/DispForm.aspx?ID=");writer.Write(item["ID"].ToString());writer.Write("' class='Default_mylink1_2'><b>");writer.Write(item["標題"] == null ? "" : item["標題"].ToString());writer.Write("</b></a></div><div>");if (item["副標題"] != null){writer.Write(item["副標題"].ToString().Length > 15 ? item["副標題"].ToString().Substring(0, 15) + "…" : item["副標題"].ToString());}else{writer.Write("");}writer.Write("</div></td></tr></table></div></td>");if (i % 2 == 0){writer.Write("</tr><tr>");}i++;}writer.Write("</tr></table></div>");writer.Write("</div>");base.Render(writer);}} }

完成代碼后，在VS2010中點擊測試部署沙盒解決方案，在sharepoint頁面中插入webpart部件TestWebpart，查看結果。

?

4、 在Sharepoint　Online中部署沙盒解決方案

將解決方案bin目錄下的TestProject.wsp上傳到sharepoint解決方案中

方法如下：

打開要部署的sharepoint網(wǎng)站，網(wǎng)站操作——網(wǎng)站設置——解決方案

在解決方案選項卡中選擇“上載解決方案”，并激活，在頁面中插入webpart即可。

?

?

附：css樣式

.pingan_Default_left_part1_left_part1_5 {padding-top:2px;width:463px; } .pingan_Default_left_part1_left_part1_4 {width:463px;} .pingan_Default_left_part1_left_part1_4_1 {padding-top:10px;vertical-align:top;text-align:left; } .pingan_Default_left_part1_left_part1_4_1_1 {vertical-align:top;text-align:left;width:56px; } .pingan_Default_left_part1_left_part1_4_1_2 {vertical-align:top;text-align:left;padding-left:5px;color:#666666;line-height:20px; } a.pingan_Default_mylink1_2:link {line-height:20px;font-size:12px;COLOR: #666666; TEXT-DECORATION: none } a.pingan_Default_mylink1_2:visited {line-height:20px;font-size:12px;COLOR: #666666; TEXT-DECORATION: none } a.pingan_Default_mylink1_2:hover {line-height:20px;font-size:12px;COLOR: #FA8100; TEXT-DECORATION: underline; }

?

?

?

轉載于:https://www.cnblogs.com/ningang/p/4390685.html

總結

以上是生活随笔為你收集整理的SharePoint2010沙盒解决方案基础开发——开发webpart读取绑定列表数据，并以一定的格式显示（加css样式）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。