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

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

  • Где в структуре каталогов мне разместить эти файлы? (например, 12 / TEMPLATE / OTHER? 80 / wpresources / имя_сборки?)

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

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

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


person pmmaga    schedule 11.03.2010    source источник


Ответы (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);

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

person pmmaga    schedule 11.03.2010

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

person Ryan    schedule 12.03.2010

Я знаю, что это старый пост, но есть способ лучше. Этот способ намного лучше, потому что он сохраняет ваши файлы 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")]

После этого вы готовы вызывать и использовать свой 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 никогда ничего не упрощает. :)

person lazoDev    schedule 15.07.2011

У меня были проблемы с тем, чтобы решение 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.

person MiniRagnarok    schedule 24.07.2013