使用 WSPBuilder 将 JavaScript、CSS 等添加到 WebPart

Question

所以，我试图做我认为是一项简单的任务......但我没有取得任何进展...... 我想要的只是让我的 WebPart 加载一些 .js 和 .css 文件。我正在使用 VS2008 + WSPBuilder。我在谷歌上搜索了很多关于这个问题的信息，但找不到合适的答案。 我想知道的是：

• 我应该将这些文件放置在目录结构中的哪个位置？ （例如，12/TEMPLATE/OTHER？80/wpresources/ assembly_name？）

• 如何访问这些文件？ （使用相对路径？通过某种方法获取完整路径？）

• 最后，如何将这些文件添加到页面的 ？

预先感谢..我在这些问题上浪费了整个上午的时间，我正在考虑改变职业！ ;)

Answer 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,
  "

• 如果要将 CSS 文件添加到页面的头部，请将此代码放入 CreateChildControls() 方法中：

  CssLink cssLink = new CssLink();
  cssLink.DefaultUrl = "/_layouts/1033/yourapp/yourcss.css";
  this.Page.Header.Controls.Add(cssLink);

好吧，希望您发现这很有帮助！

Answer 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 - 创建带有客户端脚本的 Web 部件

Answer 3

我知道这是一篇旧文章，但是有更好的方法来做到这一点。这种方式要好得多，因为它可以将 js 和 CSS 文件保留在项目本地。我发现如果可能的话最好远离 12 个配置单元，并且通过添加 CSS 和 js 文件，这是可能的。

首先，您应该在 C# 项目的顶层创建一个文件夹来放置 js 文件和 CSS 文件。将 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";
        }

请

注意，在代码中它重新指向 Resources 文件夹。这是我在第一步中创建的额外文件夹。你想怎么称呼它就怎么称呼它。

下一部分是将您对 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 永远不会让任何事情变得简单。 :)

Answer 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资源。