CODEWITHSUNDEEP
c#asp.nethtml
jackal
jackal

Reputation: 159

ASP.NET Linking to resources (img, css, js) from different paths

Iam new to ASP.NET and poking around my first ASP Web Application projects in .NET 4.0 I have problem, which I can't solve, and google searches does not bring any joy.

So I would kindly ask for help and/or explanation of following problem:

Assume that I have set up following project structure:

\default.aspx
\[gfx] (dir)
   \[images]
     \picture.jpg
   \[css]
     \stylesheet.css
   \[js]
     \jquery.js
\[backend]
   \main.aspx

So, in default.aspx I can link to image or css like that:

     < img src="/gfx/images/picture.jpg">
     < link rel="stylesheet" type="text/css" href="/gfx/css/stylesheet.css"/>

It works, but Iam afraid that this linking technique is not the "correct" one. Yes - it works and it links, but as I was PHP developer I was always linking to the full path of resource, for ex: < img src="gfx/images/picture.jpg" /> Which was translated to < img src="http://www.mysite.com/gfx/images/picture.jpg" />

Is there a way to achieve similar result in ASP.NET without loosing the design preview in visual studio ? It my linking technique is common one or is there another way ?

Best regards

Upvotes: 1

Views: 2453

Answers (5)

user240141
user240141

Reputation:

If you are displaying image from CSS then try to use it from there. For example. Create a style dir, inside style create an image and put all images that are going to be used in CSS.

like 

.div
{
  background-image:url('images/abc.png');
  color:#24543F;
}

For general images, create a folder images in the root and put all images inside that are to be rendered without CSS. Where you need to use those image just drag and drop the image, VS will do the rest. If you need to set it programmatically from Codebehing add runat="server" in the tag. That's all.

Upvotes: 0

Mike Mengell
Mike Mengell

Reputation: 2398

You could do a design time style sheet. This is very handy for when you are making user controls. The process has been discribed here; How to make user controls know about css classes in ASP.NET

Upvotes: 0

Kimtho6
Kimtho6

Reputation: 6184

You are already doing it the right way! and when you Publishing your site to your server the link will be the full link like in php

Upvotes: 0

Adeel
Adeel

Reputation: 19238

Mostly ~ operator is used, the asp.net automatically maps it to the root of your application.

<head runat="server">
<img src="~/gfx/images/picture.jpg">
<link rel="stylesheet" type="text/css" href="~/gfx/css/stylesheet.css"/>
</head>

you can also use application root path in variable and can use. For Example

<head>
<img src="<%=SomeClass.SITEURL%>/gfx/images/picture.jpg">
<link rel="stylesheet" type="text/css" href="~/gfx/css/stylesheet.css"/>
</head>

The use of later technique has a few advantages, as it is rendered as absolute path (little bit fast) and configurable in a sense if you want to place static content from different server.

Upvotes: 1

Muad&#39;Dib
Muad&#39;Dib

Reputation: 29226

what you are doing is the common way of doing it. you CAN use full paths, but most of the time you want to use relative paths. this way, if your URL changes, you site doesn't break.

for example, if you site is "www.mysite.net" and your images point to "www.mysite.net/images/someimage.png" and later you change your site to "www.someothersite.com" your site will break. however, if you use "/images/someimage.png" it won't break.

Upvotes: 0

Related Questions