使用 SharePoint 2010 功能区用户界面

SharePoint 2010 中的 Web 开发入门：了解如何修改新的 SharePoint 2010 功能区菜单。

上次修改时间： 2011年1月12日

适用范围： Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

本文内容
创建空白 SharePoint 2010 项目
将按钮代码添加到项目
部署并测试解决方案
删除按钮
后续步骤

在本练习中，您将扩展 Microsoft SharePoint 2010 功能区，方法是添加执行服务器端代码的自定义按钮。可以使用此方法来添加或替换按钮、组、选项卡或整个功能区。您还可以从功能区删除自定义按钮。若要完成此任务，您必须执行以下操作：

• 创建空白 SharePoint 2010 项目

• 将按钮代码添加到项目

• 部署并测试解决方案

• 删除按钮

创建空白 SharePoint 2010 项目

在该任务中，您将在 Microsoft Visual Studio 2010 中创建空白 SharePoint 2010 项目。

创建 SharePoint 项目

1. 若要启动 Visual Studio 2010，请依次单击"开始"菜单、"所有程序"、"Microsoft Visual Studio 2010"和"Microsoft Visual Studio 2010"。

2. 在"文件"菜单上，指向"新建"，然后单击"项目"。

3. 在"新建项目"对话框窗口中的"已安装的模板"部分，依次单击"Visual C#"、"SharePoint"和"2010"。

4. 从项目项中单击"空白 SharePoint 项目"。

5. 在"名称"框中，键入 RibbonDemo，然后单击"确定"。

6. 在 SharePoint 自定义向导中，键入要用于本练习的本地网站（例如 https://localhost/SampleWebSite）。

7. 对于信任级别，请选择"部署为场解决方案"，然后单击"完成"。

将按钮代码添加到项目

在该任务中，您将添加 XML 来创建按钮和 ECMAScript（JavaScript、JScript） 代码，从而为其提供功能。

将 XML 代码添加到项目

1. 在解决方案资源管理器中，右键单击"RibbonDemo"节点，指向"添加"，然后单击"新建项"。

2. 在"添加新项"对话框屏幕中的"已安装的模板"部分，依次单击"Visual C#"、"SharePoint"、"2010"和"空元素"项类型。

3. 将"名称"保留为"EmptyElement1"，然后单击"确定"。

4. 在解决方案资源管理器中，右键单击"EmptyElement1"节点，然后单击"查看代码"。

5. 删除 Elements.xml 文件的内容。

6. 将以下代码添加到 Elements.xml 文件。

   <?xml version="1.0" encoding="utf-8"?>
   <Elements xmlns="https://schemas.microsoft.com/sharepoint/">
   <CustomAction
     Id="DemoHelloWorldButton"
     RegistrationType="List"
     RegistrationId="101"
     Location="CommandUI.Ribbon">
       <CommandUIExtension>
         <CommandUIDefinitions>
           <CommandUIDefinition
            Location="Ribbon.Documents.New.Controls._children">
             <Button
              Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"
              Alt="Hello World Ribbon Button"
              Sequence="10"
              Image32by32="/_layouts/images/PPEOPLE.GIF"
              Command="Demo_HelloWorld"
              LabelText="Hello World Demo"
              TemplateAlias="o2"/>
           </CommandUIDefinition>
         </CommandUIDefinitions>
         <CommandUIHandlers>
           <CommandUIHandler
            Command="Demo_HelloWorld"
            CommandAction="javascript:alert('Hello World!');" />
         </CommandUIHandlers>
       </CommandUIExtension>
     </CustomAction> 
   </Elements>
   

   TemplateAlias 属性可用于定义是显示中等 (o2) 按钮还是显示大型 (o1) 按钮。CommandAction 元素包含按此按钮时运行的 ECMAScript（JavaScript、JScript） 代码。

   请注意，您可以将自定义图像添加到按钮，具体方法是右键单击"RibbonDemo"节点，指向"添加"，然后双击"SharePoint 的‘Images’映射文件夹"。然后，将 32 x 32 图像或 16 x 16 图像上载到"Images/RibbonDemo"文件夹。最后，将 Image32by32（或 Image16by16）属性更改为 _layouts/images/ribbondemo/yourimage.png。

部署并测试解决方案

在该任务中，您将部署解决方案，然后验证按钮是否已显示在功能区上。之后单击此按钮以显示对话框。

测试解决方案

1. 在解决方案资源管理器中，右键单击"RibbonDemo"节点，然后单击"部署"。

2. 启动 Internet Explorer，并浏览到之前指定的网站。

3. 在左导航窗格中，单击"共享文档"打开共享文档库。

4. 在 SharePoint 2010 功能区中，单击"文档"选项卡。

   您将看到添加到功能区的新"Hello World Demo"按钮。

5. 单击"Hello World Demo"。将显示"Hello World"JavaScript 对话框，如图 1 所示。

   图 1."Hello World"对话框

   

删除按钮

在该任务中，您将删除"Hello World Demo"按钮。

删除按钮

1. 在解决方案资源管理器中，右键单击"EmptyElement1"节点，然后单击"查看代码"。

2. 注释现有代码，具体方法是在 <CustomAction> 元素左尖括号前键入 <!--。接下来，在 </CustomAction> 元素右尖括号后键入 -->。

3. 在注释代码后，插入以下代码。

   <HideCustomAction Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Location="Ribbon.Documents.New.Controls._children">
   </HideCustomAction>
   

4. 通过执行任务 3（部署并测试解决方案）中的步骤 1 - 4，部署并测试更新的解决方案。

   您将看到"Hello World Demo"按钮不再显示在功能区上。

后续步骤

• SharePoint 2010 中的 Web 开发入门

• 后续步骤

• ff630939(v=office.14).md