css - 为什么 css 和图像在 asp.net 中重写 URL 时会失真？

Question

我有一个显示元素列表的 .aspx 页面。目前它显示 www.site.com/Catalog.aspx?mid=228 需要 www.site.com/CellPhone/blackbery/sprint/Q10.aspx。所有元素都显示在 DataList 中，在按钮上单击超链接重定向到 Catalog.aspx，查询字符串“id”是设备 ID。

现在，我已将 LinkBut​​ton 的 URL 动态构建为 'CellPhone/blackbery/sprint/228' 以及其他元素。

以上链接重定向和 URL 更改但 css 受到干扰。 & 我想动态重写所有链接，而不是像上面那样硬编码。

css 引用:

<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'>

目录.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");
    }
}

一切正常，只是页面和图片上的 css 没有应用!

Answer 1

只需更改 CSS 的 href 相对于它的 root 而不是当前位置，

改变

<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="/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 表示文件 layout.css 位于 root 文件夹 css 中> 无论你在哪里调用它，例如，如果你的页面是这样的

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

如果你使用

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

它会寻找路径为 root/product/smartphone/blackberry/css/layout.css 的 css，因为该文件夹或路径中没有文件，它无法加载 CSS 文件，这会导致您的 CSS 受到干扰。