SharePoint2010沙盒解决方案基础开发——开发webpart读取绑定列表数据,并以一定的格式显示(加css样式)

SharePoint2010沙盒解决方案基础开发——开发webpart读取绑定列表数据,并以一定的格式显示(加css样式)

分类: SharePoint
 

SharePoint2010沙盒解决方案基础开发——开发webpart读取绑定列表数据,并以一定的格式显示(加css样式)

 

 

注:此实例无需添加数据控件,避免了一些繁琐的代码

 

实现效果如下:

技术分享

读取数据和图片,并以每行两列的形式显示

 

所需列表如下:

技术分享

 

1、 VS2010创建沙盒解决方案

技术分享

技术分享

2、 创建webpart

技术分享

3、在TestWebpart.cs中添加代码

技术分享

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

 

注:css样式文件已在母版页中引用,在此直接使用。

 

全部代码如下

[csharp] view plaincopy
 
  1. using System;  
  2. using System.ComponentModel;  
  3. using System.Web;  
  4. using System.Web.UI;  
  5. using System.Web.UI.WebControls;  
  6. using System.Web.UI.WebControls.WebParts;  
  7. using Microsoft.SharePoint;  
  8. using Microsoft.SharePoint.WebControls;  
  9.   
  10. using System.Xml.Serialization;  
  11. using System.Linq;  
  12. using System.Data;  
  13.   
  14. namespace TestProject.TestWebpart  
  15. {  
  16.   
  17.     [ToolboxData("<{0}:WPToolPaneTest runat=server></{0}:TestWebpart>"), XmlRoot(Namespace = "TestWebpart")]//定义Toolbox data  
  18.   
  19.     public class TestWebpart : WebPart  
  20.     {  
  21.         protected override void CreateChildControls()  
  22.         {  
  23.         }  
  24.   
  25.   
  26.         protected override void Render(HtmlTextWriter writer)  
  27.         {  
  28.             SPSite site = SPContext.Current.Site;  
  29.             SPWeb web = SPContext.Current.Web;  
  30.             SPList list = web.Lists["保险类别"];  
  31.             var query = from SPListItem item in list.Items orderby item.ID ascending select item;  
  32.             writer.Write("<div class=‘Default_left_part1_left_part1_5‘>");  
  33.             writer.Write("<div class=‘Default_left_part1_left_part1_4‘><table width=‘100%‘ cellpadding=‘0‘ cellspacing=‘0‘ border=‘0‘><tr>");  
  34.             int i = 1;  
  35.             foreach (SPListItem item in query)  
  36.             {  
  37.                 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=‘");  
  38.                 writer.Write(item["图标"] == null ? "" : item["图标"].ToString());  
  39.                 writer.Write("‘ /></td><td class=‘Default_left_part1_left_part1_4_1_2‘><div><a href=‘/Lists/List/DispForm.aspx?ID=");  
  40.                 writer.Write(item["ID"].ToString());  
  41.                 writer.Write("‘ class=‘Default_mylink1_2‘><b>");  
  42.                 writer.Write(item["标题"] == null ? "" : item["标题"].ToString());  
  43.                 writer.Write("</b></a></div><div>");  
  44.                 if (item["副标题"] != null)  
  45.                 {  
  46.                     writer.Write(item["副标题"].ToString().Length > 15 ? item["副标题"].ToString().Substring(0, 15) + "…" : item["副标题"].ToString());  
  47.                 }  
  48.                 else  
  49.                 {  
  50.                     writer.Write("");  
  51.                 }  
  52.                 writer.Write("</div></td></tr></table></div></td>");  
  53.                 if (i % 2 == 0)  
  54.                 {  
  55.                     writer.Write("</tr><tr>");  
  56.                 }  
  57.                 i++;  
  58.             }  
  59.             writer.Write("</tr></table></div>");  
  60.             writer.Write("</div>");  
  61.             base.Render(writer);  
  62.         }  
  63.     }  
  64. }  


完成代码后,在VS2010中点击测试部署沙盒解决方案,在sharepoint页面中插入webpart部件TestWebpart,查看结果。

 

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

将解决方案bin目录下的TestProject.wsp上传到sharepoint解决方案中

方法如下:

打开要部署的sharepoint网站,网站操作——网站设置——解决方案

技术分享

在解决方案选项卡中选择“上载解决方案”,并激活,在页面中插入webpart即可。

 

 

附:css样式

 

[css] view plaincopy
 
  1. .pingan_Default_left_part1_left_part1_5  
  2. {  
  3.     padding-top:2px;  
  4.     width:463px;  
  5. }  
  6. .pingan_Default_left_part1_left_part1_4  
  7. {  
  8.     width:463px;  
  9.       
  10. }  
  11. .pingan_Default_left_part1_left_part1_4_1  
  12. {  
  13.     padding-top:10px;  
  14.     vertical-align:top;  
  15.     text-align:left;  
  16. }  
  17. .pingan_Default_left_part1_left_part1_4_1_1  
  18. {  
  19.     vertical-align:top;  
  20.     text-align:left;  
  21.     width:56px;  
  22. }  
  23. .pingan_Default_left_part1_left_part1_4_1_2  
  24. {  
  25.     vertical-align:top;  
  26.     text-align:left;  
  27.     padding-left:5px;  
  28.     color:#666666;  
  29.     line-height:20px;  
  30. }  
  31. a.pingan_Default_mylink1_2:link  
  32. {  
  33.     line-height:20px;  
  34.     font-size:12px;  
  35.     COLOR: #666666;   
  36.     TEXT-DECORATION: none  
  37. }  
  38. a.pingan_Default_mylink1_2:visited  
  39. {  
  40.     line-height:20px;  
  41.     font-size:12px;  
  42.     COLOR: #666666;   
  43.     TEXT-DECORATION: none  
  44. }  
  45. a.pingan_Default_mylink1_2:hover  
  46. {  
  47.     line-height:20px;  
  48.     font-size:12px;  
  49.     COLOR: #FA8100;   
  50.     TEXT-DECORATION: underline;  
  51. }  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。