I am working on a web part for Sharepoint 2010. I have several CSS and JS references that are declared at the top of the .ascx file. I deployed my web part and ran it in Sharepoint to find that certain styles were missing. Opening the network tab of dev Tools in Chrome showed that several CSS and JS files could not be found (HTTP 404 error).
So initially I just didn't deploy my resource files to the server. A co-worker told me to setup a "Sharepoint Layouts Mapped Folder" which I did. Added it to my project, then put the .ascx and the css/js folders in that Layouts folder. So I deploy again. This time the files are actually in the Sharepoint drive (Common Files\Microsoft Shared\Web Extensions\14\TEMPLATES\LAYOUTS\My Project (or something similar to that). Great...
Well I am very confused about how I am supposed to reference these files. It doesn't seem like I can browse to them. I really have no idea what the URL of the layouts folder is. I've tried
http://server/sitecollection/_layouts/layouts/[project name]/css/file.css and some variations. Currently my references are deployed in this format:
<link href="<%=Server.ResolveClientUrl("~/Layouts/DMR Entry Webpart/css/jquery-ui.css")%> rel="stylesheet" type="text/css" />
I've also tried
/css, and those all threw warnings saying the directory/file does not exist.
Current look at my solution structure:
Hopefully someone can help, thanks.
NOTE: The 404 NOT FOUND errors in the first screenshot were caused by my web part being referenced in multiple places. By completely retracting and removing the web part, creating a new web part in the VS solution and copying the code over, the new web part works correctly.