Registering CSS and Javascript files within Sharepoint WebParts

While working on my latest Sharepoint project, Ben Padgett and I discovered that we needed an easy and reusable way to import custom stylesheets and javascript files for individual web parts. We wrote the following two static methods, which use built in ASP.Net and Sharepoint functionality to register stylesheets and javascript files within a webpart.

By default, Sharepoint master pages have a ContentPlaceHolder named “PlaceHolderAdditionalPageHead”. This ContentPlaceHolder is where you can register your own additional stylesheets. Sharepoint goes a step further and also includes a CssRegistration control for registering css files. We set the name of the CssRegistration control to the path where our style sheet is located Below is the code for registering a stylesheet:

   1: public static void RegisterCSS(string cssPath, WebPart webpart)

   2: {           

   3:     ContentPlaceHolder _Header = (ContentPlaceHolder)webpart.Page.Master.FindControl("PlaceHolderAdditionalPageHead");

   4:     if (_Header != null)

   5:     {

   6:         CssRegistration cssControls = new CssRegistration();

   7:         cssControls.Name = cssPath;

   8:         _Header.Controls.Add(cssControls);

   9:     }

  10: }

Our method for importing javascript files takes advantage of the ASP.Net ClientScriptManager. Similar to the RegisterCss method, the two required parameters are the relative path to the javascript file and the webpart which registers the javascript file. Below is the code for registering a custom javascript file:

   1: public static void RegisterScript(string scriptPath, WebPart webpart)

   2: {

   3:     string IncludeScriptFormat = @"";

   4:  

   5:     if (!webpart.Page.ClientScript.IsClientScriptBlockRegistered(scriptPath))

   6:     {

   7:         string includescript = String.Format(IncludeScriptFormat, "javascript", scriptPath);

   8:         webpart.Page.ClientScript.RegisterClientScriptBlock(webpart.GetType(), scriptPath, includescript);

   9:     }

  10: }

These methods should be called within OnInit or OnPreRender so that the stylesheet and or javascript file is included within the page head prior to loading. In order to register a style sheet located in the Layouts hive directory, you just need to pass the relative path to the style sheet file as well as the WebPart that uses the style sheet. Below is an example OnInit method within a WebPart that makes use of our static functions.

   1: protected override void OnInit(EventArgs e)

   2: {

   3:         MySharepointLibrary.RegisterCSS("/_layouts/css/MyStyleSheet.css", this);

   4:  

   5:         MySharepointLibrary.RegisterScript("/_layouts/js/MyJavascript.js", this);

   6:  

   7:         base.OnInit(e);

   8: }

Overall, these methods ultimately help create organization for stylesheets and javascript files, by allowing individual WebParts to import their own styles and scripts.

Feel free to leave any questions or concerns in the comments.

Thanks.