Adding JavaScript, CSS and others to a WebPart using WSPBuilder
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! ;)
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.jsIf 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!
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.
加载中,请稍侯......
精彩评论