CODEWITHSUNDEEP
cssasp.neturl-rewritingimageurl
SHEKHAR SHETE
SHEKHAR SHETE

Reputation: 6066

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!

Upvotes: 1

Views: 1442

Answers (3)

Nikhil Bandivan
Nikhil Bandivan

Reputation: 33

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

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

Upvotes: 0

Amarsinh Pol
Amarsinh Pol

Reputation: 41

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.

Upvotes: 0

Kyojimaru
Kyojimaru

Reputation: 2724

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.

Upvotes: 2

Related Questions