How to use JavaScript and CSS in a web part?

Question

I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am using publishing portal template. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. And I want to develop a WebPart, which refers css and javascript (.js) files. My question is (1) how to deploy css/javascript files and (2) how to write reference path (e.g. ../../themes from my code below) from webpart to refer to related css/javascript files?

BTW: the existing code of css/javascript/Webpart is from existing aspx code and I am migrating aspx code to a Webpart. The code works in aspx.

Currently my code looks like this,

<link type="text/css" href="../../themes/test.css" rel="stylesheet" />
<script type="text/javascript" src="../../test.js"></script>

Answer 1

The best way to add javascript (inline or external) is using the ScriptManager to add it. That way you know you only add it once (you might add the web part multiple times on a page).

For inline code use the static method ScriptManager.RegisterClientScriptBlock() For js file use the static method ScriptManager.RegisterClientScriptInclude() You can even reference a script embedded in an assembly ScriptManager.RegisterClientScriptResource().

The javascript should be provisioned like any other artifact: through solutions. It could be added to a document library or _LAYOUTS folder.

Example of web parts using script manager: Sample: Say Hello Web Part Code Walkthrough: Creating a Basic ASP.NET AJAX-enabled Web Part

hth Anders Rask

Answer 2

Will this css and js file only apply to the one web part, or is it something that will be used across many customizations?

The easiest way to deploy it (not correct way) would be to add it to the layouts directory so that it can be referenced on any site in the farm.

If it is going to be reused by many customizations, I would wrap it into a solution package separate from the custom web part. That way the "core" solution can be installed and maintained separately from the various implementations of it.

If it is not reused, then those files can be included in the same solution. Any scripts, styles, images, etc can be added this way.

Answer 3

Take a look at this blog post: Register External JavaScript and CSS Files On SharePoint 2007 WebPart.

Registering Javascript

using Microsoft.SharePoint.WebControls;
ScriptLink.Register(this.Page, <JS_FILE_NAME>, true);

Registering CSS

using Microsoft.SharePoint.WebControls;
CssRegistration.Register(CSS_FILE_NAME);

I hope this helps!