SharePoint Web 部件

• 下载源代码 (无 EXE) - 57.6 KB
• 下载源代码 - 126 KB

目录

1. 引言
2. WebPart
3. Visual WebPart
4. WebPart 属性
5. 自定义编辑器部分
6. 可连接的 Web Parts

引言

WebPart 是 SharePoint 中最常用的组件之一。WebPart 本质上是添加到页面的控件集合。WebPart 框架最早在 ASP.NET 2.0 中引入。继承自 Webpart 类的 WebPart 在 SharePoint 中得到完全支持，并且有很多用途。WebPart 允许最终用户在浏览器内根据自己的需求个性化和设置内容。作为开发人员，可以使用定义的 WebPart 属性来开发 WebPart，最终用户可以通过这些属性来自定义页面内容，而无需任何管理员的参与或编写任何代码。

WebParts

在下面的文章中，我们将从理解基本的沙盒 WebPart 开始。我们可以通过继承命名空间“System.Web.UI.WebControl”中可用的 webpart 类来开发自己的 WebPart。

1. 转到 Visual Studio，选择 文件 => 新建 => 项目 => 空 SharePoint 项目，输入适当的名称并选择保存项目的位置
2. 右键单击解决方案资源管理器，选择 添加 => 新建项，在对话框中选择 WebPart 并输入 WebPart 的名称（例如：Hello Webpart）。
   默认生成的代码如下

   

3. 以下是可从 Webpart 基类中覆盖的方法，按其出现的顺序（调用的方法）排列。

   

4. 在 CreateChildControls() 中，我们可以添加要在 WebPart 中显示的控件。下面是用于添加简单标签控件的示例代码。

      Label lbl = new Label();
      lbl.ID = "lblHelloworld";
      lbl.Text = "Hello World";
      Controls.Add(lbl);

5. 在上面的代码中，Controls 是 WebPart 的 ControlCollection 属性，用于保存控件。
   
6. 现在生成并部署解决方案到 SharePoint 场。
   
7. 部署的 WebPart 可在 WebPart 库中使用，从中可以将其添加到 SharePoint 网站上的任何页面。

Visual WebPart

WebPart 的一个主要缺点是 UI 部分的设计变得更加复杂，因为我们没有设计文件来添加控件，并且每次我们都必须编写更多代码来在 CreateChildControls() 方法中添加控件。Visual WebPart 允许我们使用 Web 用户控件组件来设计 .ascx 文件中的 UI 和控件，这些文件可以直接添加到 WebPart 的 CreateChildControls() 方法的 ControlCollection 中。
现在我们将看到如何将 Visual Web Part 添加到我们的 SharePoint 项目并进行部署。

1. 右键单击 SharePoint 项目，在对话框中选择添加新项 => Visual Web part。
2. VisualWebPart1 已添加到我们的项目中。它包含四个文件，分别是 elements.xml、visualwebpart1.webpart、VisualWebPart1.cs 和 VisualWebPartUserControl.ascx。
3. VisualWebPartUserControl.ascx 文件是用户控件文件，我们可以在其中添加控件并为 WebPart 编写代码隐藏功能。VisualWebPart1.cs 文件是实际继承 webpart 类的 Webpart 类，并在此类中添加了用户控件。VisualWebPart1.webpart 文件包含 WebPart 的元数据和属性定义，最后 elements.xml 文件包含 WebPart 的映射 URL 和其他相关信息。
4. 现在选择 Visual WebPart 并将 Grid View 控件添加到文件中。在代码隐藏文件中编写以下代码。

   public static DataTable GetDataTable()
           {
               DataTable dt = new DataTable();
               SPSecurity.RunWithElevatedPrivileges(delegate()
               {
                   using (SPSite site = new SPSite(SPContext.Current.Site.Url))
                   {
                       using (SPWeb web = site.OpenWeb())
                       {
                    SPList lst = web.Lists[ConfigurationManager.AppSettings["listname"]];
                    dt = lst.Items.GetDataTable();
                       }
                   }
               });
               return dt;
           }
   
       protected void Page_Load(object sender, EventArgs e)
           {
               GridView1.DataSource = GetDataTable();
               GridView1.DataBind();
           }

5. 生成并部署解决方案。解决方案成功部署后，WebPart 将出现在 WebPart 库中，可以添加到页面上。
6. WebPart 显示来自指定 SharePoint 列表的数据。

Visual WebPart 属性

现在，例如，考虑一种场景，我们需要让用户能够直接在浏览器中选择列表名称来显示数据。如上文代码所示，我们之前是从 web.config 文件读取列表，或者我们可以从 WebPart 自定义属性中获取列表名称。

在下面的示例中，我们将看到如何使用 WebPart 属性。

1. 首先，在 VisualWebpart1UserControl 类中，声明以下属性

   public VisualWebPart1 vwpone { get; set; }

2. 之后，在继承 webpart 类的 VisualWebPart1 类中声明以下属性，如下所示。

   

   [WebBrowsable(true), WebDisplayName("Name"), WebDescription("List Name"),
           Personalizable(PersonalizationScope.Shared), Category("Custom Property"),
           System.ComponentModel.DefaultValue("EmployeeList")]
           public string listname { get; set; }

3. 之后，修改代码如下，将从 web.config 文件中检索列表名称的代码替换为 webpart 属性，如下所示。

   public  DataTable GetDataTable()
           {
               DataTable dt = new DataTable();
               SPSecurity.RunWithElevatedPrivileges(delegate()
               {
                   using (SPSite site = new SPSite(SPContext.Current.Site.Url))
                   {
                       using (SPWeb web = site.OpenWeb())
                       {
                           SPList lst = web.Lists[vwpone.listname];
                           dt = lst.Items.GetDataTable();
                       }
                   }
               });
               return dt;
           }

4. 现在生成并部署解决方案，在浏览器中检查自定义属性的输出。

自定义编辑器部分

现在考虑一种场景，用户希望直接在浏览器中选择要在网格视图中显示的所需字段，而无需编写任何代码。为此，我们可以将 CheckboxList 控件添加到 WebPart 编辑器中，并允许用户从复选框列表中选择字段名称，类似于我们在上一个场景中将 textbox 控件添加到 WebPart 编辑器。

在此示例中，我们将看到如何添加自定义编辑器部分。

1. 在 VisualWebpart1 类中声明以下属性

    [Personalizable (PersonalizationScope.Shared), WebBrowsable (false)]
    public List<string> GridViewColumnslst {get; set ;}  

2. 在此之后，定义一个继承 EditorPart 类的新 VisualWebPart1EditorPart 类。
3. 在此类中，我们将添加一个新的 CheckboxList 控件，并将其绑定到 WebPart 编辑器中添加的列表列。
4. 在 EditorPart 类中声明以下变量

          private CheckBoxList chkblst;
           private VisualWebPart1 vwp1;

5. 在 EditorPart 类中，有四个重要方法需要关注，我们将逐一查看它们，如下所示。
6. 首先是 OnInit 方法，我们可以在其中初始化我们的控件，在本例中是 CheckboxList 控件。

   protected override void OnInit(EventArgs e)
           {
               base.OnInit(e);
               chkblst = new CheckBoxList();
               chkblst.DataSource = VisualWebPart1UserControl.GetDataTable().Columns;
               chkblst.DataBind();
           }

7. 然后是 CreateChildControls，我们将在其中将 CheckboxList 控件绑定到 ControlCollection。

    protected override void CreateChildControls()
           {
               base.CreateChildControls();
               Controls.Add(chkblst);
           }

8. 在此之后，我们有两个重要方法，分别用于设置和获取值。ApplyChanges 方法用于将值分配给声明的属性，SyncChanges 方法用于从分配的属性或属性检索值。

   public override bool ApplyChanges()
           {
               vwp1 = this.WebPartToEdit as VisualWebPart1;            
               vwp1.GridViewColumnslst = new List<string>();
               
               foreach (ListItem itm in chkblst.Items)
               {
                   if (itm.Selected)
                   {
                       vwp1.GridViewColumnslst.Add(itm.Text);
                   }
               }
               vwp1.SaveChanges();
               return true;
           }
   
           public override void SyncChanges()
           {
               vwp1 = this.WebPartToEdit as VisualWebPart1;
               if (vwp1.GridViewColumnslst != null)
               {
                   foreach (string s in vwp1.GridViewColumnslst)
                   {
                       foreach (ListItem itm in chkblst.Items)
                       {
                           if (itm.Text.Equals(s))
                           {
                               itm.Selected = true;
                           }
                       }
                   }
               }
           }

9. 一旦我们的 EditorPart 类准备就绪，我们就需要将其绑定到 WebPart 的控件集合，我们可以通过使用 WebPart 类中可用的 CreateEditorParts 方法来实现，如下所示。

   public override EditorPartCollection CreateEditorParts() 
           {
               VisualWebPart1EditorPart edprt = new VisualWebPart1EditorPart();
               edprt.ID = this.ID + "edprt";
               edprt.Title = "Configure Grid Columns";
               edprt.TabIndex = 3;
               edprt.GroupingText = "Configure Grid Columns";
               ArrayList arrylst = new ArrayList();
               arrylst.Add(edprt);
               return new EditorPartCollection(arrylst);
           }

10. 最后，在用户控件中使用 WebPart 属性将其相应地绑定到网格视图。

      public DataTable InitializeDataTable()
            {
                DataTable dt = GetDataTable();
                DataView dv = new DataView(dt);
                DataTable customview = dv.ToTable(false, vwpone.GridViewColumnslst.ToArray());
                return customview;
            }
    protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
                if (vwpone != null)
                {
                    GridView1.DataSource = InitializeDataTable();
                    GridView1.DataBind();
                }
            }

11. 生成并部署解决方案，以查看以下输出。

可连接的 Web Parts

在 SharePoint 中，为了实现主子网格视图，Connectable Web Parts 非常方便。以下是构建 Connectable Web Part 应用程序的步骤：开发提供程序 WebPart

1. 添加一个接口并定义整数成员，如下所示。

   public interface ICities
       {
           int Cityid { get; set; }
       }

2. 之后，添加一个 Visual Web Part 并将其命名为 Connection Provider。
3. 在 Web Part 中实现接口并声明以下属性。Web Part 的完整代码如下所示。

   [ToolboxItemAttribute(false)]
       public class ConnectableWebPart : WebPart, ICities
       {
           // Visual Studio might automatically update this path 
           // when you change the Visual Web Part project item.
           private const string _ascxPath = 
           @"~/_CONTROLTEMPLATES/SharePointProject1/ConnectableWebPartProvider/ConnectableWebPartUserControl.ascx";
   
           protected override void CreateChildControls()
           {
               ConnectableWebPartUserControl vwp1uc = 
                   Page.LoadControl(_ascxPath) as ConnectableWebPartUserControl;
               vwp1uc.CWP = this;
               Controls.Add(vwp1uc);
           }
   
           [ConnectionProvider("Provider for String From TextBox", "TextBoxStringProvider")]
           public ICities CitiesStringProvider()
           {
               return this;
           }
   
           [Personalizable()]
           public int Cityid
           {
               get;
               set;
           }
       }

4. 现在，在用户控件的网格视图选定索引更改事件中，获取项 ID 并将其分配给 Web Part 中定义的属性。

   protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
           {
               if (CWP != null)
               {
                   CWP.Cityid = Convert.ToInt32(GridView1.SelectedRow.Cells[0].Text);
               }
           }

5. 现在创建一个新的 Web Part 并将其命名为 Connection Consumer，并声明一个以接口为类型的属性。

   public ICities _myProvider { get; set; }

6. 在此之后，添加以下代码，该代码有助于从 Provider Web Part 检索信息。

   [ConnectionConsumer("String Consumer", "StringConsumer")]
           public void TextBoxStringConsumer(ICities Provider)
           {
               _myProvider = Provider;
           }

7. 现在调用属性并在用户控件的 OnPreRender 方法中根据项 ID 获取数据，如下所示。

   protected override void OnPreRender(EventArgs e)
           {
               EnsureChildControls();
               if (_cnnConsumer != null)
               {
                   if (_cnnConsumer._myProvider != null && _cnnConsumer._myProvider.Cityid > 0)
                   {
                       GridView1.DataSource = Bind();
                       GridView1.DataBind();
                   }
               }
           }
   private DataTable Bind()
           {
               DataTable dt = new DataTable();
               SPSecurity.RunWithElevatedPrivileges(delegate()
               {
                   using (SPSite site = new SPSite(SPContext.Current.Site.Url))
                   {
                       using (SPWeb web = site.OpenWeb())
                       {
                           SPListItem lst = web.Lists["GridViewConfig"].GetItemById(_cnnConsumer._myProvider.Cityid);
                           dt = lst.ListItems.GetDataTable();
                       }
                   }
               });
               return dt;
           }

关注点

在以上所有场景中，在使用自定义属性时，为了将属性从 WebPart 访问到用户控件，将声明一个以用户控件为类型的属性，并在 WebPart 的 CreateChildControls 方法中为其赋值。为了检索属性值，这些值可以在用户控件的 OnPreRender 方法中获得。

示例

默认情况下，生成的代码如下所示。

    private const string _ascxPath = 
  @"~/_CONTROLTEMPLATES/SharePointProject1/VisualWebPart1/VisualWebPart1UserControl.ascx";

        protected override void CreateChildControls()
        {
            Control control = Page.LoadControl(_ascxPath);
            Controls.Add(control);
        }

应将其替换为以下代码。

protected override void CreateChildControls()
        {
            VisualWebPart1UserControl vwp1uc = Page.LoadControl(_ascxPath) as VisualWebPart1UserControl;
            vwp1uc.vwpone = this;
            Controls.Add(vwp1uc);
        }