Avatar of Dermofit
 asked on

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

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" 

... 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?

Avatar of undefined
Last Comment

8/22/2022 - Mon

You can use the path starting with '/' so your CSS and JS will load.


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


Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

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.

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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes

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