Adding JavaScript, CSS and others to a WebPart using WSPBuilder

StackOverflow https://stackoverflow.com/questions/2426421

Question

So, I'm trying to do what I thought was a simple task... But I'm not getting anywhere... All I want to is to get some .js and .css files loaded by my WebPart. I'm using VS2008 + WSPBuilder. I've googled a lot about this but I couldn't find a decent answer. What I would like to know:

  • Where in the directory structure should I place those files? (eg. 12/TEMPLATE/OTHER? 80/wpresources/assembly_name?)

  • How can I reach those files? (using a relative path? getting the full path by some method?)

  • And finally, how can I add those files to the page's <head>?

Thanks in advance.. I've lost all my morning in these questions and i'm considering a career change! ;)

Was it helpful?

Solution

Ok, after two cigarettes and more efficient google searches I found the solution.. Hope this helps someone in the same trouble as I was!

  • The right place to those extra files is in 12/TEMPLATE/LAYOUTS/1033/yourapp/

  • If they are in this place, the path to those files is /_layouts/1033/yourapp/yourjs.js

  • If you want to add a JavaScript file to the head of the page, place this code in the CreateChildControls() method:

    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 + "\">");

  • If you want to add a CSS file to the head of the page, place this code in the CreateChildControls() method:

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

Well, hope you found this helpfull!

OTHER TIPS

Resources should go in the wpresources folder.

If an admin deploys your web part to the BIN directory then this folder will be in something like

http://server/site/wpresources/YourWebPart/

which will be mapped to something like

C:\Inetpub\wwwroot\wss\VirtualDirectories\80\wpresources\YourWebPart

If an admin deploys to the GAC then it will be

http://server/_wpresources/WebPartStrongName/

mapped to

C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/wpresources/WebPartStrongName

To find out the path that you need at runtime you should use WebPart.ClassResourcePath

So modifying your code

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

I know this is an old post, however there is a better way to do this. This way is much better because it keeps your js and CSS files local to your project. I have found that it is best to stay out of the 12 hive if at all possible, and with adding CSS and js files, it is possible.

First, you should make yourself a folder to place your js files and CSS files in at the top level of your C# Project. Place your js/CSS files into this folder.

Next you are going to make a Constants.cs Class that will call your js or CSS files. here is the code for the class.

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";
        }

}

Notice that in the code it is refurring to the Resources folder. This is the extra folder that I made in the first step. Call it what you want.

Next part is adding your reference to you js file/CSS to the assembly.

[assembly: WebResource(Constants.JQuerymyjavascriptFileJS, "text/javascript")]
[assembly: WebResource(Constants.CSSPath, "text/css")]

After this is done, you are ready to call and use your js/CSS in the main C# class of your WSP project.

protected override void OnLoad(EventArgs e)
    {

        base.OnLoad(e);
        this.EnsureChildControls();

        Page.ClientScript.RegisterClientScriptResource(this.GetType(), Constants.JQuerymyjavascriptFileJS);
               }

CSS files are a little different

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);

I have found that this is the best and most reliable way to call js and CSS files. This is how I load my JavaScript and CSS files for all of my web parts. I have never had an issue with doing it this way. I hope this helps out some people who are having problems with this. SharePoint never makes anything easy. :)

I had some problems getting lazoDev's solution to work (spelling errors, missing references, as well as a coding error) and thought I'd share my solution.


Step 1: Webpart called "Calendar"

My styles are locating in a Styles folder like this: ProjectName/Styles/

While the scripts are located in a Scripts folder: 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);
        }
    }
}


Step 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")]


Step 3: File Properties

Go to the properties of each script and style file and change the value of Build Action to Embedded Resource.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top