Link CSS, js and other files using relative paths ASP.NET

Dermofit
Dermofit used Ask the Experts™
on
I have developed a User Control for my asp.net application. It references a css file and a js file. I want it to be self-contained, that way if I want to include it in a page I would just write the reference to it, like this:

<%@ Register TagPrefix="mc" TagName="MyControl" 
   Src="Controls/Path/MyControl.ascx" %>

Open in new window


Right now, the way I'm handling it is by assuming that all the pages are located at root level, so this is how my User Control code looks like:

<%@ Control Language="C#" AutoEventWireup="true" 
   CodeFile="MyControl.ascx.cs" Inherits="Controls_Path_MyControl" %>
<link href="Controls/Path/MyControl.css" 
   rel="stylesheet" type="text/css" />
<script src="Controls/Path/MyControl.js" 
   type="text/javascript"></script>

... content ...

Open in new window


And that works if I place the component in a page located at root dir. But I'm wondering if there's a more elegant way to do it.


I tried using the runat="server" so I could use paths relative to the Control but when I do it, all of the sudden I get 21 errors on my javascript. Errors that were not there when using the full reference. I stripped down my java script all the way to the following code, and I still get a "identifier expected" error.

function OnMouseOver(e) {alert("Hello");}

Open in new window


Any ideas?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,
You can use the path starting with '/' so your CSS and JS will load.

But,

When you add a JS or CSS in you user control it is rendered in between the page which is not correct according to W3C standard.

I would suggest add the JS and CSS in Master page.
Some reference
http://stackoverflow.com/questions/34390/how-to-make-user-controls-know-about-css-classes-in-asp-net

http://stackoverflow.com/questions/3128074/can-a-web-user-control-ascx-use-a-css-file-for-styling
Try this

Create the path to from code and add it in the below script
Page.ClientScript.RegisterClientScriptInclude("key", "Pathto/MyControl.js");

The script will be added in the body.

Workaround for adding that in head is
http://www.codeproject.com/Articles/5811/An-improvement-to-RegisterClientScriptBlock

Author

Commented:
Adding "/" to the begining of the path would not accomplish what I want, because that would mean that it will always look for it in that exact path. I want to be able to copy the folder with the User Control (including its CSS and js) and copy it into another project, in any folder within.

I have tried the option of referencing the CSS and js from the webpage, rather than from the User Control code. It works but that means I have to add 3 lines in order to link the control. I've always thought that whenever there are a group of lines that must be called together (and it is useless to call any on them by itself)  then those lines should be somehow grouped.

The option of registering into to the page sounds nice. I don't care a lot if the scripts gets rendered in the body section instead of the head. I want my source code to be as readable as possible, but the generated html can be dirty.

What would be the best place to put that code? I'm thinking about putting it inside the Page_Load function behind a condition that check that IsPostBack is false, since loading the code just once would be enough.
Hi,
Yes, The best place is in Page_load but NOT in a condition of page.ispostback. If you will put that in condition than on postback the scripts wont be registered and your script wont run.

Author

Commented:
Thank you very much! Very straight fordwasrd and to the point!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial