使用 WSPBuilder 将 JavaScript、CSS 和其他内容添加到 WebPart
Posted
技术标签:
【中文标题】使用 WSPBuilder 将 JavaScript、CSS 和其他内容添加到 WebPart【英文标题】：Adding JavaScript, CSS and others to a WebPart using WSPBuilder 【发布时间】：2011-01-26 10:52:35 【问题描述】：所以，我正在尝试做我认为很简单的任务......但我没有得到任何地方...... 我只想让我的 WebPart 加载一些 .js 和 .css 文件。我正在使用 VS2008 + WSPBuilder。我已经用谷歌搜索了很多关于这个但我找不到一个像样的答案。 我想知道的：
我应该将这些文件放在目录结构的什么位置？ （例如 12/TEMPLATE/OTHER？80/wpresources/assembly_name？）
如何访问这些文件？ （使用相对路径？通过某种方法获取完整路径？）
最后，如何将这些文件添加到页面的<head>？
提前谢谢.. 我整个上午都在这些问题上迷失了方向，我正在考虑转行！ ;)
【问题讨论】：
【参考方案1】：好的，在抽了两支烟和更有效的谷歌搜索之后，我找到了解决方案。希望这可以帮助和我遇到同样麻烦的人！
这些额外文件的正确位置是12/TEMPLATE/LAYOUTS/1033/yourapp/
如果他们在这个地方，这些文件的路径是/_layouts/1033/yourapp/yourjs.js
如果您想在页面头部添加一个 javascript 文件，请将这段代码放在 CreateChildControls() 方法中：
string scriptPath = "/_layouts/1033/yourapp/yourjs.js";
if(!this.Page.ClientScript.IsClientScriptBlockRegistered(scriptPath))
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), scriptPath,
"<script language=\"javascript\" src=\"" + scriptPath + "\">");如果你想在页面头部添加一个 CSS 文件，把这段代码放在 CreateChildControls() 方法中：
CssLink cssLink = new CssLink();
cssLink.DefaultUrl = "/_layouts/1033/yourapp/yourcss.css";
this.Page.Header.Controls.Add(cssLink);嗯，希望你觉得这对你有帮助！
【讨论】：
【参考方案2】：资源应该放在 wpresources 文件夹中。
如果管理员将您的 Web 部件部署到 BIN 目录，则此文件夹将位于类似
http://server/site/wpresources/YourWebPart/
这将被映射到类似的东西
C:\Inetpub\wwwroot\wss\VirtualDirectories\80\wpresources\YourWebPart
如果管理员部署到 GAC，那么它将是
http://server/_wpresources/WebPartStrongName/
映射到
C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/wpresources/WebPartStrongName
要找出运行时所需的路径，您应该使用WebPart.ClassResourcePath
所以修改你的代码
string scriptPath = this.ClassResourcePath + "/yourjs.js";
if(!this.Page.ClientScript.IsClientScriptBlockRegistered(scriptPath))
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), scriptPath,
"<script language=\"javascript\" src=\"" + scriptPath + "\">");
MSDN - Creating a Web Part with Client-side Script
【讨论】：
【参考方案3】：我知道这是一篇旧帖子，但是有更好的方法可以做到这一点。这种方式要好得多，因为它将您的 js 和 CSS 文件保存在项目本地。我发现如果可能的话，最好远离 12 个配置单元，并且通过添加 CSS 和 js 文件，这是可能的。
首先，您应该为自己创建一个文件夹，将 js 文件和 CSS 文件放在 C# 项目的顶层。将您的 js/CSS 文件放入此文件夹。
接下来，您将创建一个 Constants.cs 类来调用您的 js 或 CSS 文件。这是该类的代码。
using System;
using System.Collections.Generic;
using System.Text;
namespace myProjectSolution
internal static class Constants
public const string JQuerymyjavascriptFileJS = "myProjectSolution.Resources.myjavascriptFile.js";
public const string CSSPath = "myProjectSolution.Resources.CSSPath.css";
请注意，在代码中它重新指向资源文件夹。这是我在第一步中创建的额外文件夹。随心所欲。
下一部分是将您对 js 文件/CSS 的引用添加到程序集中。
[assembly: WebResource(Constants.JQuerymyjavascriptFileJS, "text/javascript")]
[assembly: WebResource(Constants.CSSPath, "text/css")]
完成后，您就可以在 WSP 项目的主 C# 类中调用和使用您的 js/CSS。
protected override void OnLoad(EventArgs e)
base.OnLoad(e);
this.EnsureChildControls();
Page.ClientScript.RegisterClientScriptResource(this.GetType(), Constants.JQuerymyjavascriptFileJS);
CSS 文件有点不同
ClientScriptManager csm = Page.ClientScript();
csm.RegisterClientScriptResourse(this.GetType(), Constants.CSSPath);
htmlLink css = new HtmlLink();
css.Href = csm.GetWebResourceUrl(this.GetType(), Constants.CSSPath);
css.Attributes.Add("type", "text/css");
css.Attributes.Add("rel", "stylesheet");
Page.Header.Controls.Add(css);
我发现这是调用 js 和 CSS 文件的最好和最可靠的方法。这就是我为所有 Web 部件加载 JavaScript 和 CSS 文件的方式。我从来没有遇到过这样做的问题。我希望这可以帮助一些遇到问题的人。 SharePoint 从未让任何事情变得简单。 :)
【讨论】：
【参考方案4】：我在让 lazoDev 的解决方案正常工作时遇到了一些问题（拼写错误、缺少引用以及编码错误），我想分享我的解决方案。
第 1 步：名为“日历”的 Web 部件
我的样式位于 Styles 文件夹中，如下所示：ProjectName/Styles/
虽然脚本位于 Scripts 文件夹中：ProjectName/Scripts/
using System.Web.UI.HtmlControls;
namespace ProjectName.Calendar
internal static class Styles
public const string main = "ProjectName.Styles.main.css";
public const string calendar = "ProjectName.Styles.calendar.css";
internal static class Scripts
public const string jqueryMin = "ProjectName.Scripts.jquery.min.js";
public const string jqueryDatepicker = "ProjectName.Scripts.jquery.datepicker.js";
[ToolboxItemAttribute(false)]
public class Calendar: WebPart
protected override void CreateChildControls()
// Adding Styles (also have to add to AssemblyInfo.cs, as well as changing the Build Action property of the file to embedded resource)
HtmlLink css = new HtmlLink();
css.Attributes.Add("type", "text/css");
css.Attributes.Add("rel", "stylesheet");
css.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(), Styles.dailog);
Page.Header.Controls.Add(css);
HtmlLink css2 = new HtmlLink();
css2.Attributes.Add("type", "text/css");
css2.Attributes.Add("rel", "stylesheet");
css2.Href = Page.ClientScript.GetWebResourceUrl(this.GetType(), Styles.calendar);
Page.Header.Controls.Add(css2);
// Adding Scripts (also have to add to AssemblyInfo.cs, as well as changing the Build Action property of the file to embedded resource)
Page.ClientScript.RegisterClientScriptResource(this.GetType(), Scripts.jqueryMin);
Page.ClientScript.RegisterClientScriptResource(this.GetType(), Scripts.jqueryDatepicker);
第 2 步：AssemblyInfo.cs
using ProjectName.Calendar;
// Styling
[assembly: WebResource(Styles.main, "text/css")]
[assembly: WebResource(Styles.calendar, "text/css")]
// Scripts
[assembly: WebResource(Scripts.jqueryMin, "text/javascript")]
[assembly: WebResource(Scripts.jqueryDatepicker, "text/javascript")]
第 3 步：文件属性
转到每个脚本和样式文件的属性，将Build Action的值更改为Embedded Resource。
【讨论】：
以上是关于使用 WSPBuilder 将 JavaScript、CSS 和其他内容添加到 WebPart的主要内容，如果未能解决你的问题，请参考以下文章