URL Rewriting with ASP.NET and Handling Images and CSS

April 17, 2007 at 12:38 pm (ASP.NET)

As usually, ScottGu has an excellent post about URL rewriting with ASP.NET. No need for me to repeat what he already said

However at the end of his post, Scott has a section for dealing with CSS and Image references correctly, which has been causing problems for some including myself. The problem is with the use of the tilde (~) notation for ASP.NET controls and for the CSS you must use the absolute path meaning “/style.css” instead of just “styles.css”.

Handling CSS

Of course you can simply put an absolute path and your done. The solution I’m proposing here is an alternative and simulates the ~ notation. This solution was inspired by what Scott did with the forms control adapter.

Looking at typical page (including master pages) we have the following:

1 <head runat="server">
2    <title>My Page</title>
3    <link href="Stylesheet.css" rel="stylesheet" type="text/css" />
4 </head>

So that got me thinking that since the head is now a server it must also follow the ASP.NET rendering methods. So based on Scott’s sample you can add the following to the Form.browser file:

 1 <browsers>
 2     <browser refID="Default">
 3         <controlAdapters>
 4             <adapter controlType="System.Web.UI.HtmlControls.HtmlForm"
 5                adapterType="FormRewriterControlAdapter" />
 6             <adapter controlType="System.Web.UI.HtmlControls.HtmlLink"
 7                  adapterType="LinkRewriterControlAdapter" />
 8         </controlAdapters>
 9     </browser>
10 </browsers>

Essentially we are going to override the rendering for the HtmlLink control. The C# code to do that (LinkRewriterControlAdapter) is:

 1     public class LinkRewriterControlAdapter : System.Web.UI.Adapters.ControlAdapter
 2     {
 3         protected override void Render(HtmlTextWriter writer)
 4         {
 5             base.Render(new RewriteLinkHtmlTextWriter(writer));
 6         }
 7 
 8     }
 9 
10     public class RewriteLinkHtmlTextWriter : HtmlTextWriter
11     {
12         #region Constructors
13 
14         public RewriteLinkHtmlTextWriter(HtmlTextWriter writer) : base(writer)
15         {
16             this.InnerWriter = writer.InnerWriter;
17         }
18 
19         public RewriteLinkHtmlTextWriter(System.IO.TextWriter writer)    : base(writer)
20         {
21             this.InnerWriter = writer;
22         }
23 
24         #endregion
25 
26         public override void WriteAttribute(string name, string value, bool fEncode)
27         {
28             if (name == "href")
29             {
30                 HttpContext Context = HttpContext.Current;
31                 if (Context.Items["ActionAlreadyWritten"] == null)
32                 {
33                     string sStylesheetName = value;
34                     int iSlashPos = value.LastIndexOf('/');
35                     if (iSlashPos >= 0) sStylesheetName = value.Substring(iSlashPos);
36 
37                     value = GetBaseURL() + "/" + sStylesheetName;
38 
39                     Context.Items["ActionAlreadyWritten"] = true;
40                 }
41             }
42             base.WriteAttribute(name, value, fEncode);
43         }
44     }

This will override the rendering of the href attribute value for all <link> tags. The value coming in has already been resolved by ASP.NET, that is why there is some parsing for slash (/).

Handling Images

The tilde notation (~) works great if you are only doing one level of URL rewriting. If you want to do URL rewriting with mulitple levels ex: http://mysite.com/products/category/subcategory/subsubcategory/etc.., then (~) notation will no longer work since ASP.NET will resolve the URL relative to real ASPX page. For this case I find it simplest to use HTML elements and specify the href with inline code. Ex:

1 <a href="<% =GetBaseURL() %>/">Home</a>

Hope this helps. Please feel free to comment (go easy this is my first post :))

8 Comments

Gabriel said,

May 16, 2007 at 9:49 pm

Hi there, I’m thinking this article is going to help me… but at this point I haven’t implemented the forms.browser file. What is that all about, can I create it just for this purpose?

Thanks!
pstatho said,

May 17, 2007 at 11:28 am

The Forms.browser file is very useful for tweaking the HTML that gets outputted from ASP.NET.

In Scott’s example he used to change the ACTION attribute of the tag from ACTION=”mypage.aspx?param1=value…” to the URL rewritten value ACTION=”\products\CDs”.

Inspired from that I used a similar technique to modify the output of the tag for CSS so that I can simulate the tilde (~) functionality i.e. reference the virtual root.

Hope this helps,
Perry
Kyle Banashek said,

May 30, 2007 at 12:42 am

Where is the GetBaseURL() method code?
Rupert said,

July 13, 2007 at 1:35 pm

Hi Perry, this is great stuff! Just a couple of things that I ran into which might help others:

Your solution works fine with one css file, but if you have more than one, only the first gets rendered because of the
if (Context.Items["ActionAlreadyWritten"] == null)
line. Also this is using the same key as the formRewriter which could cause problems.

I made a change to generate the name of the Context.Items key from the value of the href and it works fine now. Here is the code:

public override void WriteAttribute(string name, string value, bool fEncode)
{
if (name == “href”
{
HttpContext Context = HttpContext.Current;
string contextItemKey = value + “HrefAlreadyWritten”;
if (Context.Items[contextItemKey] == null)
{
string sStylesheetName = value;

//I’m getting the absolute url slightly differently
//I imagine this is what you did in your GetBaseUrl() method
int iSlashPos = value.LastIndexOf(”../” + 3;
if (iSlashPos >= 0) sStylesheetName = value.Substring(iSlashPos);
value = VirtualPathUtility.ToAbsolute(”~/” + sStylesheetName);

Context.Items[contextItemKey] = true;
}
}
base.WriteAttribute(name, value, fEncode);
}

Finally The GetBaseUrl() method doesn’t exist in any of the code you’ve posted, so I’ve implemented something similar.
Thanks again for your post it was really helpful!
Rupert
Rupert said,

July 13, 2007 at 1:39 pm

Oops, slight problem with that last post, I actually meant:
public override void WriteAttribute(string name, string value, bool fEncode)
{
if (name == “href”
{
HttpContext Context = HttpContext.Current;
string contextItemKey = value + “HrefAlreadyWritten”;
if (Context.Items[contextItemKey] == null)
{
string sStylesheetName = value;

//I’m getting the absolute url slightly differently
//I imagine this is what you did in your GetBaseUrl() method
int iSlashPos = value.LastIndexOf(”../”);
if (iSlashPos >= 0) sStylesheetName = value.Substring(iSlashPos + 3);
value = VirtualPathUtility.ToAbsolute(”~/” + sStylesheetName);

Context.Items[contextItemKey] = true;
}
}
base.WriteAttribute(name, value, fEncode);
}

Cheers!
pstatho said,

July 14, 2007 at 12:27 pm

Rupert,

You are absolutely right! I did not anticipate multiple CSS files. You’re solution with the contextItemKey is exactly what I would have done as well.

My GetBaseURL(), was just an example of something that could be done. In my case I am actually loading the BaseURL from a config file.

Perry
Jay said,

December 28, 2007 at 12:34 am

You could also do something like this - <link rel=”stylesheet” href=”" type=”text/css” />
Jay said,

December 28, 2007 at 12:35 am

oops I meant - <link rel=”stylesheet” href=” ” type=”text/css” />

Perry Stathopoulos