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

Question

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!

Kyojimaru · Accepted Answer · 2014-11-24 06:24:19Z

2

just change the href of the CSS relative to it's root not from current location,

change

<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" />

to

<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" />

/css/layout.css mean that the file layout.css is inside folder css in the root wherever you call it, for example if your page is like this

http://www.example.com/product/smartphone/blackberry

if you use

<link href="css/layout.css" rel="stylesheet" type="text/css" />

it will look for the css with this route root/product/smartphone/blackberry/css/layout.css, because there's no file in that folder or route, it can't load the CSS file which cause your CSS get disturbed.

answered Nov 24, 2014 at 6:24

Kyojimaru

2,7242 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SHEKHAR SHETE Over a year ago

hi @Kyoijimaru, i tried this too..and this too works..! so +1 :)

Amarsinh Pol · Accepted Answer · 2014-11-25 05:45:12Z

0

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.

answered Nov 25, 2014 at 5:45

Amarsinh Pol

413 bronze badges

1 Comment

SHEKHAR SHETE Over a year ago

hi @Amarsinh Pol thanks for replying this works fine! :)

Nikhil Bandivan · Accepted Answer · 2016-12-19 13:19:45Z

0

The simplest way should be add a is not a file condition:

                <conditions>
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                </conditions>

answered Dec 19, 2016 at 13:19

Nikhil Bandivan

337 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related