SharePoint Designer 2010-上传Web部件

SharePoint Designer 2010 has tools and commands to do everything that can be done with web parts in the browser, and then some – except uploading a web part straight into a page that is edited in SPD. So, can it be done?

SharePoint Designer 2010具有工具和命令来完成浏览器中Web部件可以完成的所有工作，然后再执行某些操作-除了将Web部件直接上载到在SPD中编辑的页面外。 那么，可以做到吗？

情境 (Scenario)

对于最近的项目，我创建了一个内容查询Web部件（CQWP）。 为了微调数据表示，我使用了定制的XSL模板。 优良作法建议不要将这些模板存储在默认的ItemStyle.xsl和ContentQueryMain.xsl中，而应存储在单独的文件中。 我这样做了，然后导出了Web部件并编辑了.webpart文件以链接到自定义XSL文件。 然后，我通过浏览器界面将.webpart文件上传到Web部件页面以进行测试。 到目前为止一切都很好。

As a next step I wanted to integrate this customised web part into a Page Layout, so that new pages created with that layout would always include the customised CQWP. I did not want to use a web part page, for the following reasons:

下一步，我想将此定制的Web部件集成到“页面布局”中，以便使用该布局创建的新页面将始终包含定制的CQWP。 由于以下原因，我不想使用Web部件页：

Users with edit rights would be able to accidentally delete the web part from the page

具有编辑权限的用户将能够从页面中意外删除Web部件。

I wanted the ability to quickly create new pages with the same layout and CQWP, without having to manually upload it into every new page

我希望能够快速创建具有相同布局和CQWP的新页面，而不必手动将其上传到每个新页面中

I did not want to store custom scripts calling CSS and jQuery functions in a Content Editor Web Part, but integrate them in the page header instead.

我不想在Content Editor Web部件中存储调用CSS和jQuery函数的自定义脚本，而是将它们集成在页面标题中。

So, off we go: fire up SharePoint Designer 2010. Create a new Page Layout, create a structure with editable web part zones where users can add their own content. Finally, import the customised CQWP into the page.

因此，我们开始：启动SharePoint Designer2010。创建新的页面布局，创建具有可编辑Web部件区域的结构，用户可以在其中添加自己的内容。 最后，将自定义的CQWP导入页面。

But where is the command for that? The Insert ribbon has a command for web parts, but it only lists the standard out of the box web parts. A command to import or upload a web part is nowhere to be found. Searching the web yields no results, either.

但是命令在哪里呢？ 插入功能区有一个用于Web部件的命令，但它仅列出现成的Web部件标准。 在哪里找不到导入或上传Web部件的命令。 搜索网络也没有结果。

I can add a new CQWP, but in order to customise its underlying XML I have to edit the .webpart file. Which can only be done if the webpart is exported. And then I can’t import the customised .webpart file into SPD. Catch 22?

我可以添加一个新的CQWP，但是为了自定义其基础XML，我必须编辑.webpart文件。 仅当导出Webpart时才能这样做。 然后，我无法将自定义的.webpart文件导入SPD。 赶上22？

Here is how it can be done:

这是

In the SharePoint browser interface, create a web part page and import the customised CQWP. Save the web part page.

在SharePoint浏览器界面中，创建一个Web部件页并导入自定义的CQWP。 保存Web部件页面。

In SharePoint Designer 2010 create a new CQWP in the new Page Layout. Don’t bother with configuring the query or the presentation. Switch to code view.

在SharePoint Designer 2010中，在新的页面布局中创建一个新的CQWP。 不要理会配置查询或演示文稿。 切换到代码视图。

In another SharePoint Designer 2010 tab, open the web part page and locate the customised CQWP. Switch to code view.

在另一个SharePoint Designer 2010选项卡中，打开Web部件页并找到自定义的CQWP。 切换到代码视图。

Let’s have a look at the code for the two web parts. The brand new CQWP starts with this ASP control all in one looooong line (I've added line breaks to the code so you can view it without scrolling the code snippet):

让我们看一下两个Web部件的代码。 全新的CQWP始于此ooooong行中的ASP控件（我在代码中添加了换行符，因此您无需滚动代码段即可查看它）：

<PublishingWebControls:ContentByQueryWebPart runat="server" DataSourceID="" HelpMode="Modeless" ChromeType="TitleOnly" SuppressWebPartChrome="False" 
ListUrl="" MissingAssembly="Cannot import this Web Part." PageSize="-1" IsIncludedFilter="" ViewContentTypeId="" IsVisible="True" Title="Content Query" 
ZoneID="" AutoRefresh="False" […] ><DataFields> […]

The customised CQWP on the web part page starts with a different control:

Web部件页面上的自定义CQWP以不同的控件开头：

<WpNs0:ContentByQueryWebPart runat="server" DataSourceID="" HelpMode="Modeless" FilterDisplayValue1="1" ChromeType="None" FilterField1="Featured" 
SuppressWebPartChrome="False" MissingAssembly="Cannot import this Web Part." PageSize="-1" IsIncludedFilter="" ViewContentTypeId="" IsVisible="True" 
Title="My Custom CQWP" ZoneID="wpz" AutoRefresh="False" FrameType="None" […] ><DataFields> […]

Apart from the opening (and closing) control tags, the two web parts look identical.

除了打开（和关闭）控制标签外，这两个Web部件看起来相同。

Comparing the two opening control tags, it soon becomes obvious that only a few modifications are required to make the new CQWP act like the customised one. The new CQWP needs to keep a few crucial settings in the opening control tag; all other parameters in the control tag can be copied from the imported CQWP. The customised CQWP has a few more parameters than the new one, but that’s understandable, since it has been customised and contains data for query and presentation.

比较两个打开的控制标签，很快就很明显，只需要进行一些修改就可以使新的CQWP像定制的CQWP一样起作用。 新的CQWP需要在开始控制标签中保留一些关键设置； 可以从导入的CQWP复制控制标签中的所有其他参数。 定制的CQWP比新的具有更多的参数，但这是可以理解的，因为它已被定制并包含用于查询和表示的数据。

Keep these settings from the control tag of the new CQWP:

将这些设置保留在新CQWP的control标签中：

The opening tag, i.e. <PublishingWebControls:Con

tentByQuer yWebPart

开头标记，即<PublishingWebControls：Con

帐篷 yWebPart

ZoneID=""

ZoneID =“”

__WebPartId="{xxxxxxxx-xxx

x-xxxx-xxx x-xxxxxxxx xxxx}"

__WebPartId =“ {xxxxxxxx-xxx

x-xxxx-xxx x-xxxxxxxx xxxx}”

The __WebPartId is found near the end of the opening control tag. It is a unique ID and should not be messed with.

__WebPartId位于打开控件标记的结尾附近。 这是唯一的ID，不应将其弄乱。

All other parameters of the opening control tag from the customised CQWP can be copied and pasted into the new CQWP.

可以将来自自定义CQWP的打开控制标签的所有其他参数复制并粘贴到新的CQWP中。

I found it helpful to copy the two opening tags underneath each other so I could paste the parameters from the customised CQWP to the new web part one by one.

我发现将两个开始标签互相复制很有帮助，这样我就可以将自定义CQWP中的参数一张一张地粘贴到新的Web部件上。

If the web part requires script to load custom CSS or call jQuery or other JavaScript, this can be embedded in the page header. Add this control at the top of the page, above the control for the page title:

如果Web部件需要脚本来加载自定义CSS或调用jQuery或其他JavaScript，则可以将其嵌入页面标题中。 在页面顶部控件上方的页面顶部添加此控件：

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
// your script goes here
</asp:Content>

Save the Page Layout and publish it. If this is a new Page Layout, make sure that you publish a major version, otherwise you won’t be able to use it.

保存页面布局并发布 。 如果这是新的页面布局，请确保您发布了主要版本 ，否则将无法使用它。

In the browser interface, create a page based on the new page layout and see the Content Query Web Part in all its glory. The user cannot edit, delete, or otherwise manipulate the CQWP and all scripts required by the web part are safely tucked away in the page header.

在浏览器界面中，基于新的页面布局创建一个页面，并在其所有功能中查看Content Query Web Part。 用户无法编辑，删除或以其他方式操作CQWP，并且Web部件所需的所有脚本都被安全地隐藏在页面标题中。

Enjoy.

请享用。

PS: The technique described in this article has been tested with SharePoint Designer 2010. The same principles should apply to SharePoint Designer 2007, though.

PS：本文中介绍的技术已通过SharePoint Designer 2010进行了测试。但是，相同的原理也应适用于SharePoint Designer 2007。

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

=-=-=-=-=-=-=-=-=-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=

If you liked this article and want to see more from this author,  please click here.

如果您喜欢本文，并希望从该作者那里获得更多信息， 请单击此处 。

If you found this article helpful, please click the Yes button at the top of the page

如果您认为本文有帮助 ，请单击页面顶部的

near the label:

标签附近：

      Was this article helpful?

本文是否有帮助？

 Thanks!

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

=-=-=-=-=-=-=-=-=-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=-=-=- =-=-=

翻译自: https://www.experts-exchange.com/articles/8490/SharePoint-Designer-2010-Upload-a-Web-Part.html