SharePoint2010沙盒解決方案基礎開發——開發webpart讀取綁定列表數據,並以一定的格式顯示(加css樣式)
注:此實例無需添加數據控件,避免了一些繁瑣的代碼
實現效果如下:
讀取數據和圖片,並以每行兩列的形式顯示
所需列表如下:
1、 VS2010創建沙盒解決方案
2、 創建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 data
public 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網站,網站操作——網站設置——解決方案
在解決方案選項卡中選擇“上載解決方案”,並激活,在頁面中插入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;
}