Menu
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! ;)
484
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!
58
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
22
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. :)
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
