Search code examples
cssasp.neturl-rewritingimageurl

Why css & image get distorted on URL rewrite in asp.net?

I have a .aspx page which shows item list. Currently it displays www.site.com/Catalog.aspx?mid=228 which need to be www.site.com/CellPhone/blackbery/sprint/Q10.aspx. All items are displayed in DataList and on button click the Hyperlink redirect to Catalog.aspx with query string 'id' which is the device id.

Now, I have build URL for LinkButton as 'CellPhone/blackbery/sprint/228' dynamically and for other items too.

Above link redirect and URL changes but css get disturbed. & i want to dynamically rewrite all links and not to hardcode as above.

css Reference:

<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/reset_font_grid.css" rel="stylesheet" type="text/css" />
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<link href="css/inner-pages.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

Catalog.aspx

<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="/cellphone/blackberry/sprint/228.aspx">Show Cellphones asdfsdf</asp:HyperLink>

Global.asax

<%@ Application Language="C#" %>
<%@ Import Namespace="System.Web.Routing" %>
<script runat="server">
    void Application_Start(object sender, EventArgs e)
    {
        // Code that runs on application startup
        RegisterRoute(System.Web.Routing.RouteTable.Routes);
    }

    void RegisterRoute(RouteCollection routes)
    {
        //http://aspsnippets.com/Articles/How-to-hide-remove-ASPX-extension-in-URL-in-ASPNet.aspx
        routes.MapPageRoute("44", "{cat}/{carrier}/{devices}/{id}.aspx", "~/Catalog.aspx");
    }
}

All works fine but just the css on the page & images is not applied!

Solution

  • You need to use ResolveUrl

    Example : 

    <link href="<%= ResolveUrl("css/layout.css") %>" rel="stylesheet" type="text/css" />

    Please let me know if you have any issue.