Добавление JavaScript, CSS и других в WebPart с помощью WSPBuilder

Итак, я пытаюсь сделать то, что я считал простой задачей... Но я никуда не доберусь... Все, что я хочу, - это загрузить некоторые файлы.js и.css, загруженные моим WebPart. Я использую VS2008 + WSPBuilder. Я много гуглил по этому поводу, но не смог найти достойного ответа. Что я хотел бы знать:

  • Где в структуре каталогов я должен разместить эти файлы? (например, 12/ ШАБЛОН / ДРУГОЕ? 80/wpresources/assembly_name?)

  • Как я могу добраться до этих файлов? (используя относительный путь? получить полный путь некоторым методом?)

  • И, наконец, как я могу добавить эти файлы на страницу <head>?

Заранее спасибо.. Я потерял все свое утро в этих вопросах, и я думаю о смене карьеры!;)

4 ответа

Решение

Хорошо, после двух сигарет и более эффективного поиска в Google я нашел решение.. Надеюсь, это поможет кому-то в той же беде, что и я!

  • Правильное место для этих дополнительных файлов находится в 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);

Ну, надеюсь, вы нашли это полезным!

Я знаю, что это старый пост, однако есть лучший способ сделать это. Этот способ намного лучше, потому что он хранит ваши js и CSS файлы локально для вашего проекта. Я обнаружил, что лучше всего избегать улья 12, если это вообще возможно, и с добавлением файлов CSS и js это возможно.

Во-первых, вы должны создать себе папку для размещения ваших js-файлов и CSS-файлов на верхнем уровне вашего C# Project. Поместите ваши файлы 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")]

После того, как это будет сделано, вы готовы вызывать и использовать ваш js/CSS в основном классе C# вашего проекта WSP.

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. Так я загружаю свои файлы JavaScript и CSS для всех своих веб-частей. У меня никогда не было проблем с этим. Я надеюсь, что это поможет некоторым людям, у которых есть проблемы с этим. SharePoint никогда не делает ничего легкого.:)

Ресурсы должны идти в папку wpresources.

Если администратор развертывает вашу веб-часть в каталоге 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 - Создание веб-части с помощью клиентского скрипта

У меня были некоторые проблемы с получением решения lazoDev (орфографические ошибки, пропущенные ссылки, а также ошибка кодирования), и я решил поделиться своим решением.


Шаг 1: Веб-часть называется "Календарь"

Мои стили находятся в папке "Стили" следующим образом: 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,

Другие вопросы по тегам