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 :))

Advertisements

23 Comments

  1. Gabriel said,

    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!

  2. pstatho said,

    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

  3. Kyle Banashek said,

    Where is the GetBaseURL() method code?

  4. Rupert said,

    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

  5. Rupert said,

    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!

  6. pstatho said,

    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

  7. Jay said,

    You could also do something like this – <link rel=”stylesheet” href=”” type=”text/css” />

  8. Jay said,

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

  9. Manir said,

    Hi Perry,

    I am trying to implement Approach 1 from Scott Gu’s blog (http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx) Which is I am adding extra string to the url to perform SEO. For example insted of using http://mysite/mypage.aspx?id=10 I am using http://mysite/mypage.aspx/id_10-general-books. In my site I am also using ASP.NET themes, Skins… When there is strings like “/id_10-general-books” – it cannot resolve the image paths in one level down in the directory structue like http://mysite/user/mypage.aspx/id_10-general-books — If I take out “/id_10-general-books” – it works fine. Please help me how to resolve these issues?

    I appreciate your response.

    Thanks,
    Manir

  10. Rama said,

    Where is the GetBaseURL() method code?

  11. kenneth das said,

    i found this article very useful………i would like to add how to find out base url ie GetbaseURL……
    public static string GetBaseURL()
    {

    string url =HttpContext.Current.Request.Url.Scheme + “://” + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath.TrimEnd(‘/’) + ‘/’;

    //EPiServer’s url start with a / so remove the url if (when) it contains one
    if(url.EndsWith(“/”))
    return url.Remove(url.LastIndexOf(“/”));
    else
    return url;
    }

    • Jinesh said,

      i hv read “http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx” article…nd i hv done url rewrite…bt i m getting problem of css..
      i hv read this article also…nd i m new in .net
      i dont know where to write GetBaseURL() function ?
      can you please explain me actully what to do to apply css and images.
      I am using master page and also Usercontrol. and i have also backoffice system which comes under “root/backoffice/login.aspx”

      Looking for reply.
      Thanx

      • pstatho said,

        You can put the function in the Global.asax.cs file and then call it as Global.GetBaseURL()

  12. mani said,

    hi , i have problem on using CSS and images i have one master pages that has been used it for other pages..

    i have used the images like ./images/logo.jpg this working on ,when i run it on master page as a start page but if i click any other link the image and css has not working.

    Why ??? how to solve this …???

  13. pstatho said,

    @mani

    It looks like you problem is related to the fact you have image sources that start with “./images”. This tells the browser to look for a sub-folder in the current folder location. So naturally this work for pages in root, but not for any pages in a what looks like a sub-folder.

    If you do not need you application to be in a virtual directory then you can simple do “/images/…”.

    If you need to support virtual directories, then you need to come up with a way to programatically determine the base URL, hence why I created function called GetBaseURL(). This could either be config or using the VirtualPathUtility
    http://msdn.microsoft.com/en-us/library/system.web.virtualpathutility.aspx

    • Hans said,

      Folks

      The problem with using themes in ASP.NET apps and using URL rewriting can also be solved by adding a rule to the web.config file. I solved my problem like this.

      This will resolve your css and image linking issues.

      tks H

  14. Jinesh said,

    Hay pstatho

    thanx for reply…i have include all css but still i didnt get images ..i dont want to include all path like “vitualdirectory/images/a.jpg”. i want to include like “images/a.jpg”. i

    So how to control images just like css ?

    Thanx for reply once again.

    • Jinesh said,

      Also when i am using AJAX Control toolkit 2.0 than i am getting
      error like

      ‘~//mympa/WebResource.axd?d=Jx6zFgfbeO7rXdGiLSLbzZCK4cpFhcJS3JjWlCtxm0b4q9uVfWnzeCSu7SjmfoXuLI8SS9W4-jdF69BQKn6eNg2&t=633976124039843750’ is not a valid virtual path

      If you have any kind of solution where project includes in dot net
      Master Page,
      UserControl,
      Multiple css from css folder,
      Javascript from js folder,
      AJAX Control Toolkit,
      Images from image folder,
      admin folder for backoffice which not require seo url.

      Any reply is appreciated,

      Thanx a lot.

  15. Davidov said,

    Hello, i am trying this solution, but without any success.

    <a href="/”>Home
    I got an error “The name ‘Global’ does not exist in the current context”.

  16. Davidov said,

    is the function

  17. Davidov said,

    % =GetBaseURL() %
    I am sorry about the spam

  18. campster said,

    Davidov, what “global” is? a control?

  19. http://coalition.media-spine.com/members/williamal said,

    hello there and thank you for your information – I have definitely picked up something new
    from right here. I did however expertise some technical issues using this web site, since I experienced to reload the website
    lots of times previous to I could get it to load properly.
    I had been wondering if your web hosting is OK?
    Not that I’m complaining, but slow loading instances times will often affect your placement in google and could damage your high-quality score if advertising and marketing with Adwords. Well I’m adding this RSS to my e-mail and can look out for a lot more of your respective exciting content.

    Ensure that you update this again very soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: