为什么 css 和图像在 asp.net 中的 URL 重写时失真？答案

【问题标题】：Why css & image get distorted on URL rewrite in asp.net?为什么 css 和图像在 asp.net 中的 URL 重写时失真？
【发布时间】：2015-01-21 19:25:29
【问题描述】：

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

现在，我已经动态地将 LinkButton 的 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 没有应用！

【问题讨论】：

标签： css asp.net url-rewriting imageurl

【解决方案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 受到干扰。

【讨论】：

嗨@Kyoijimaru，我也试过这个..这也有效..！所以+1 :)

【解决方案2】：

你需要使用ResolveUrl

示例：

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

如果您有任何问题，请告诉我。

【讨论】：

嗨@Amarsinh Pol 感谢您回复此工作正常！ :)

【解决方案3】：

最简单的方法应该是添加一个不是文件条件：

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

【讨论】：