【原创】SharePoint2010 ASPX页面设置自定义功能区（Ribbon）

最新推荐文章于 2024-06-23 17:00:51 发布

转载最新推荐文章于 2024-06-23 17:00:51 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LeeWenjie/archive/2011/11/18/2253636.html

文章标签：

#ui #c# #javascript #ViewUI

本文深入解析了SharePoint 2010中页面风格的革新，引入了类似Office的视图——功能区（Ribbon）视图。详细介绍了服务器功能区的体系结构、组件图标注、使用页面组件实现服务器功能区命令的方法，以及如何创建服务器功能区组件自定义项。提供了从部署到Feature功能安装和激活的完整流程，并附上了关键代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SharePoint2010 ASPX页面设置自定义功能区（Ribbon）

SharePoint2010的页面风格发生了很大的改变，其页面风格类似于Office的视图，这种视图被称为功能区（Ribbon）视图。

一、服务器功能区的体系结构

SharePoint 2010

Microsoft SharePoint Foundation 2010 中的服务器功能区可创建一致的用户界面来处理 SharePoint 对象。您可以使用服务器功能区 XML 和简单的 ECMAScript（JavaScript、JScript）以声明方式扩展功能区，也可以针对更高级的情形使用功能区 XML 和页面组件。

服务器功能区中的基本对象

功能区中的首要元素就是选项卡。选项卡显示在 SharePoint 网站页面的顶部。每个选项卡都包含多个组。这些组又包含多组控件。每个组可以包含多个控件，并具有一个标签来标识该组。组内的控件包括按钮、下拉菜单、复选框、组合框、拆分按钮和库。其中每个控件都绑定到一个唯一的命令。

服务器功能区是使用服务器功能区 XML 在功能清单文件或用户自定义操作中定义的。功能区 XML 用于定义各个选项卡、组和控件。Tab 元素包含一个Groups 元素。每个 Groups 元素又有多个 Group 元素。Group 元素内是一个 Controls 元素，该元素又包含多种类型的控件。服务器功能区中的控件部分列出了可用的控件类型。有关功能区 XML 的详细说明，请参阅服务器功能区 XML。

服务器功能区通信

功能区使用多个对象与页面的其余部分进行交互。它必须知道启用了哪些控件、控件的状态以及何时进行刷新。服务器功能区使用CommandDispatcher、PageManager、PageComponent 等对象进行通信。其中每个对象在与功能区的交互中都扮演着重要角色。

PageManager 可初始化所有控件并向功能区注册 PageComponent 对象。PageManager 的一个实例位于该页面上。

CommandDispatcher 负责处理所有 PageComponent 对象以及这些对象可以处理的命令。在页面上收到命令后，CommandDispatcher 会接收该命令并将其传递给正确的 PageComponent。

PageComponent 在 ECMAScript（JavaScript、JScript）中创建并处理由 CommandDispatcher 传递的命令。将 PageComponent 添加到页面中后，您可以使用 JavaScript 创建 PageComponent 的实例，并将其注册到 PageManager 中。然后，PageComponent 即可响应您在功能区 XML 中定义的命令。

服务器功能区中的控件

服务器功能区包含许多类型的控件。其中包括复选框、按钮和组合框等简单控件，还包括拆分按钮或飞出位置等更高级的控件。

二、 SharePoint 2010 Server 功能区组件

图中的标注号指向以下特定组件：

选项卡
组
控件
上下文选项卡组

三、使用页面组件实现服务器功能区命令

除了使用命令 UI 处理程序外，还可以使用页面组件。页面组件是一个在外部脚本库 (.js) 文件中定义的 JavaScript 对象。该对象实现了几个属性和方法，它们将告知服务器功能区命令基础结构如何初始化该对象、该对象可处理哪些命令以及某个特定命令是否可用，并可在页面组件接收焦点或失去焦点时做出响应。

必须将此脚本文件添加到显示功能区自定义项的同一页面中。可通过多种方法来实现这一点。第一种方法是，使用 SharePoint 2010 中的新 <CustomAction ScriptSrc="" /> 功能，根据功能的范围将库添加到网站、网站集、Web 应用程序或服务器场中的所有页面。另一种方法是，从自定义应用程序或网站页面 (.aspx)、自定义用户控件 (.ascx) 或自定义服务器控件内的托管代码添加脚本。以下代码示例将向 Web 部件内的页面添加页面组件文件。

本例在自定义ASPX页面中实现：

ASPX

注意：1、继承母版：DynamicMasterPageFile="~masterurl/default.master"

2、如果没有继承母版页，需自定义Sharepoint Ribbon控件

1 <%@ Import Namespace= " Microsoft.SharePoint.ApplicationPages " %>
2 <%@ Register Tagprefix= " SharePoint " Namespace= " Microsoft.SharePoint.WebControls " Assembly= " Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c " %>
3 <%@ Register Tagprefix= " Utilities " Namespace= " Microsoft.SharePoint.Utilities " Assembly= " Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c " %>
4 <%@ Register Tagprefix= " asp " Namespace= " System.Web.UI " Assembly= " System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35 " %>
5 <%@ Import Namespace= " Microsoft.SharePoint " %>
6 <%@ Assembly Name= " Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c " %>
7 <%@ Page Language= " C# " AutoEventWireup= " true " CodeBehind= " ApplicationPage1.aspx.cs " Inherits= " SpRibbon2.ApplicationPage1 " DynamicMasterPageFile= " ~masterurl/default.master " %>
8
9 <asp:Content ID= " PageHead " ContentPlaceHolderID= " PlaceHolderAdditionalPageHead " runat= " server ">
10
11 </asp:Content>
12
13
14 <asp:Content ID= " Main " ContentPlaceHolderID= " PlaceHolderMain " runat= " server ">
15  asdhkasjhfsadf sdfsdalfjaklsjdfklasjdfklasjdfo;
16     <asp:Label ID= " Label1 " runat= " server " Text= " Label "></asp:Label>
17 </asp:Content>
18
19 <asp:Content ID= " PageTitle " ContentPlaceHolderID= " PlaceHolderPageTitle " runat= " server ">
20 应用程序页sdfsaf
21 </asp:Content>
22
23 <asp:Content ID= " PageTitleInTitleArea " ContentPlaceHolderID= " PlaceHolderPageTitleInTitleArea " runat= " server " >
24 我的应用程序页asdfasd asdf
25 </asp:Content>
26
27
28
29 <asp:Content ContentPlaceHolderID= " PlaceHolderPageImage " runat= " server ">
30 </asp:Content>
31
32 <asp:Content  runat= " server " ContentPlaceHolderID= " PlaceHolderPageDescription ">
33 </asp:Content>
34
35
36 <asp:Content ContentPlaceHolderID= " PlaceHolderLeftNavBar " runat= " server ">
37  xvzxcv asdfasdf asdfa dfasfdsadfsadfsafas

38 </asp:Content>

sharePoint Ribbon控件代码（本例未使用，可参考MSDN）

1、继承：LayoutsPageBase

2、重写：

override void OnPreRender(EventArgs e)

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 namespace SpRibbon2
11 {
12      public partial class ApplicationPage1 : LayoutsPageBase
13     {
14          protected void Page_Load( object sender, EventArgs e)
15         {
16         }
17
18          protected override void  OnPreRender(EventArgs e)
19         {
20              try
21             {
22                 SPRibbon ribbon = SPRibbon.GetCurrent( this);
23                  if (ribbon != null)
24                 {
25                     ScriptLink.RegisterScriptAfterUI( this, " SP.Ribbon.js ", false, true);
26                     ribbon.CommandUIVisible = true;
27                     ribbon.MakeTabAvailable( " Ribbon.Read ");
28                      // 加载及激活自定义上下文Tab页。
29                     ribbon.MakeTabAvailable( " Ribbon.PropertyChangerTab ");
30                     ribbon.MakeContextualGroupInitiallyVisible( " Ribbon.WebPartContextualTabGroup ", string.Empty);
31                 }
32                  base.OnPreLoad(e);
33             }
34              catch (Exception ex)
35             {
36                  throw ex;
37             }
38         }
39     }
40 }

四、创建服务器功能区组件自定义项

创建一个上下文选项卡组，一个带两个组的选项卡和几个控件。详细结构可参考：Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML。

feature.xml

1 <?xml version="1.0" encoding="utf-8" ?>

2 < Feature Title ="SPRibbon2 Feature"
3          Scope ="Web"
4          Id ="94269D73-8DF2-4515-B501-4C2111FF9DAF"
5          xmlns ="http://schemas.microsoft.com/sharepoint/" >
6    < ElementManifests >
7      < ElementManifest Location ="element.xml" />
8    </ ElementManifests >
9 </ Feature >

Element.xml

1 <? xml version="1.0" encoding="utf-8" ?>
2 < Elements xmlns ="http://schemas.microsoft.com/sharepoint/" >
3    < CustomAction Id ="WebPartContextualTabs"
4                 Location ="CommandUI.Ribbon" >
5      < CommandUIExtension >
6        < CommandUIDefinitions >
7          < CommandUIDefinition Location ="Ribbon.ContextualTabs._children" >
8            < ContextualGroup Id ="Ribbon.WebPartContextualTabGroup"
9                            ContextualGroupId ="WebPartContextualTab"
10                            Title ="Ribbonized Web Part Tools"
11                            Sequence ="150"
12                            Color ="Green"
13                            Command ="WebPartContextualTab.OnEnableContextualTab" >
14              < Tab Id ="Ribbon.PropertyChangerTab"
15                 Title ="Tools"
16                 Sequence ="501" >
17                < Scaling Id ="Ribbon.PropertyChangerTab.Scaling" >
18                  < MaxSize Id ="Ribbon.PropertyChangerTab.MaxSize"
19                           GroupId ="Ribbon.PropertyChangerTab.PropertyGroup"
20                           Size ="LargeLarge" />
21                  < MaxSize Id ="Ribbon.PropertyChangerTab.MaxSize"
22                           GroupId ="Ribbon.PropertyChangerTab.PostBackGroup"
23                           Size ="LargeLarge" />
24                </ Scaling >
25                < Groups Id ="Ribbon.PropertyChangerTab.Groups" >
26                  < Group Id ="Ribbon.PropertyChangerTab.PropertyGroup"
27                        Title ="Edit"
28                        Description ="General Web Part properties."
29                        Sequence ="15"
30                        Template ="Ribbon.Templates.Flexible2" >
31                    < Controls Id ="Ribbon.PropertyChangerTab.PropertyGroup.Controls" >
32                      < Button Id ="Ribbon.PropertyChangerTab.PropertyGroup.GeneralDialogButton"
33                             LabelText ="General Properties"
34                             TemplateAlias ="o1"
35                             Sequence ="15"
36                             Image16by16 ="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
37                             Image32by32 ="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
38                      < Button Id ="Ribbon.PropertyChangerTab.PropertyGroup.UXDialogButton"
39                             LabelText ="Display Properties"
40                             TemplateAlias ="o2"
41                             Sequence ="17"
42                             Image16by16 ="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
43                             Image32by32 ="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
44                    </ Controls >
45                  </ Group >
46                  < Group Id ="Ribbon.PropertyChangerTab.PostBackGroup"
47                        Title ="PostBack"
48                        Sequence ="25"
49                        Template ="Ribbon.Templates.Flexible2" >
50                    < Controls Id ="Ribbon.PropertyChangerTab.PropertyGroup.Controls" >
51                      < Button Id ="Ribbon.PropertyChangerTab.PropertyGroup.GeneralDialogButton"
52                             LabelText ="Write to Web Part"
53                             Command ="WebPartContextualTabs.OnPostback"
54                             TemplateAlias ="o1"
55                             Sequence ="15"
56                             Image16by16 ="/_layouts/Images/WebPartRibbonContextualTab/16x16Placeholder.png"
57                             Image32by32 ="/_layouts/Images/WebPartRibbonContextualTab/32x32Placeholder.png" />
58                    </ Controls >
59                  </ Group >
60                </ Groups >
61              </ Tab >
62            </ ContextualGroup >
63          </ CommandUIDefinition >
64        </ CommandUIDefinitions >
65
66        < CommandUIHandlers >
67          < CommandUIHandler Command ="WebPartContextualTab.OnEnableContextualTab"
68                           CommandAction =""
69                           EnabledScript ="return true;" />
70          < CommandUIHandler Command ="WebPartContextualTabs.OnPostback"
71                           CommandAction ="javascript:__doPostBack('RibbonizedWebPartPostback','');" />
72        </ CommandUIHandlers >
73
74      </ CommandUIExtension >
75    </ CustomAction >

76 </Elements>