Include Javascript and CSS files in your SharePoint 2010 visual Web Part

Andrea 19 June 2014 Comments

Add the Layout mapped folder in your SharePoint project (you can see here to have a guide to do it).

Add a folder with your project name (e.g. “netgloo”) inside the Layout folder (e.g. “Layout\netgloo”).

For Javascript files create the js folder and use the SharePoint:ScriptLink tag inside the ascx file:

<SharePoint:ScriptLink id="ScriptLink1" runat="server" Localizable="false" Name="netgloo/js/main.js" />

For CSS files create the css folder and use the SharePoint:CssRegistration tag:

<SharePoint:CssRegistration ID="CssRegistration1" runat="server" Name="/_layouts/netgloo/css/style.css" />

You can also reference images, inside the img folder, using the following url:

/_layouts/netgloo/img/picture.png

If you get an error “file not found” when your web part page is loaded, like the following:

"Cannot make a cache safe URL for "/some/path/to/file.xyz", file not found. Please verify that the file exists under the layouts directory."

you should check that:

CSS references starts with “/_layouts/”.
JS references have the attribute Localizable=”false”.
From Visual Studio, in the properties of CSS and JS files, the “Build Action” should be “Content” and “Deployment Type” should be “TemplateFile”.

Note: to be sure that files will be added to your project in Visual Studio with correct properties you should use “Add new item…” or “Add existing item…” from the Layout mapped folded.