我在这里的几个问题中建议使用 urlrewriter.net。我在显示图像和样式表时遇到了困难。
我阅读了 ScottGu 的博客(再次按照此处的推荐),最后他确实提到了这个问题并声明使用 ~/ 用于服务器控件等(文章末尾的“正确处理 CSS 和图像引用”)。
我尝试了他的解决方案,但似乎不起作用。
唯一对我有用的是写完整的路径。出于某种原因,在我看来,这不是正确的解决方案。这会给开发和调试带来严重的问题。
有谁知道问题的原因是什么?我需要在 web.config 文件中更改什么吗?
谢谢
我在这里的几个问题中建议使用 urlrewriter.net。我在显示图像和样式表时遇到了困难。
我阅读了 ScottGu 的博客(再次按照此处的推荐),最后他确实提到了这个问题并声明使用 ~/ 用于服务器控件等(文章末尾的“正确处理 CSS 和图像引用”)。
我尝试了他的解决方案,但似乎不起作用。
唯一对我有用的是写完整的路径。出于某种原因,在我看来,这不是正确的解决方案。这会给开发和调试带来严重的问题。
有谁知道问题的原因是什么?我需要在 web.config 文件中更改什么吗?
谢谢
您是否尝试过 Page.ResolveUrl?
<link href="<%=Page.ResolveUrl("~/mycss.css")%>" type="text/css" rel="stylesheet" />
以我的经验,基本标签是比它解决的问题多得多的根源
我强烈建议第一个选项,通过即在行动之前检查 .aspx扩展名来限制允许 URLrewriter 影响的内容。
~/ 仅适用于具有 runat="server" 属性的标签,因为这告诉 asp.net 呈现控件。
例如
<link href="~/mycss.css" type="text/css" rel="stylesheet" />
不会按照您的预期呈现,因为 asp.net 没有呈现控件。相反,您应该使用。
<link runat="server" href="~/mycss.css" type="text/css" rel="stylesheet" />
或者将 css 链接放在 head 标签中,例如
<head runat="server">
<link href="~/mycss.css" type="text/css" rel="stylesheet" />
</head>
我认为您需要从重写引擎中排除样式表和图像目录。我不熟悉您使用的引擎,但是如果您使用的重写规则基于非常广泛的规则进行重写,它将错误地指向您的样式表和图像,以及我相信的 javascript。
您还可以尝试使用基本标签。
<base href="http://www.w3schools.com/images/" />
尝试将其放在您的<head>, 指向您的图像文件夹。
你可以使用这个:
<a href="<% =GetBaseURL() %>/">Home</a>
public static string GetBaseURL()
{
string url =HttpContext.Current.Request.Url.Scheme + “://” + HttpContext.Current.Request.Url.Authority + HttpContext.Current.Request.ApplicationPath.TrimEnd(’/') + ‘/’;
//EPiServer’s url start with a / so remove the url if (when) it contains one
if(url.EndsWith(”/”))
return url.Remove(url.LastIndexOf(”/”));
else
return url;
}
我第二次使用基本href。尽管您确实必须对站点从域的根目录运行时的差异(即生产与 Visual Studio 服务器相比)做一些改动。
<base id="BasePath" runat="Server"/>
然后在master代码后面。
protected void SetBaseHref() {
if (Request.RawUrl != Request.Url.PathAndQuery)
{
string baseUrl = "";
if (Request.IsSecureConnection)
baseUrl += "https://";
else
baseUrl += "http://";
baseUrl += Request.Url.Host;
if (Request.Url.Port != 80)
baseUrl += ":" + Request.Url.Port.ToString();
baseUrl += Request.RawUrl;
BasePath.Attributes.Add("HREF", baseUrl);
}
}
URL 重写的一个大问题是当你使用相对路径时它会搞砸你。
例如,如果您在应用程序的根目录中有一个名为 page.aspx 的文件,该文件用于多个导航级别的页面。例如
Virtual Path => Physical Path
/ => /page.aspx?id=1
/food/banana => /page.aspx?id=2
假设您在 page.aspx 中有一个到您的 css 文件的相对路径,该文件位于 /css/main.css
<link rel="stylesheet" href="css/main.css"/>
当 page.aspx 从 /food/banana 的上下文中执行时,浏览器将尝试查找 /food/css/main.css,它不存在。
我采取的方法是禁用图像、CSS、JS 的 URL 重写,并具有指向您的样式表(以及 img src 和 JavaScript)的绝对链接。这样你就可以保证浏览器总能找到它。然后从您的样式表中,您可以使用背景图像的相对路径。
我发现这种方法维护起来最简单,因为您不需要花费数周时间尝试反向重写您的链接。
我也遇到了样式表和图像的问题。
我不想使用 Base Href 解决方案并解决了我的问题,即更新我的相对路径以以单斜杠开头。
nopCommerceStore 用于建立网上商店。
nopCommerce 使用“UrlRewritingNet.UrlRewrite”库来处理 url 重写。
nopCommerce 使用 ASP.NET 主题和皮肤来定义网上商店的外观。
在服务器端,您具有以下文件夹结构:
根
根/App_Themes/darkOrange/base.css
根/App_Themes/darkOrange/cart-checkout-order.css
根/App_Themes/darkOrange/category.css
root/App_Themes/darkOrange/css/ie6.css(这个文件最终被删除了)
根/App_Themes/darkOrange/img/transparent_image_example.png
根/css/ie6.css
根/MasterPages/Root.Master
根/Default.aspx 根/Category.aspx
当登陆默认页面(浏览器请求 http;//yourstore/default.aspx)时,您的 html 源代码将包含以下 html 代码:
<link href="App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />
...
浏览器将触发以下请求:
http;//yourstore/App_Themes/darkOrange/base.css
http;//yourstore/App_Themes/darkOrange/cart-checkout-order.css
http;//yourstore/App_Themes/darkOrange/category.css
...
当单击“书籍”类别时,浏览器会请求 http;//yourstore/Category/29-books.aspx) 您的 html 源代码将包含以下 html 代码:
<link href="../App_Themes/darkOrange/base.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/cart-checkout-order.css" type="text/css" rel="stylesheet" />
<link href="../App_Themes/darkOrange/category.css" type="text/css" rel="stylesheet" />
浏览器将触发以下请求:
http;//yourstore/Category/../App_Themes/darkOrange/base.css
http;//yourstore/Category/../App_Themes/darkOrange/cart-checkout-order.css
http;//yourstore/Category/../App_Themes/darkOrange/category.css
到目前为止,一切运行良好。为了使所有浏览器的外观一致,需要加载 IE6 特定的样式表。我学到了两个重要的东西:
不要将样式表添加到“App_Themes”文件夹中,而是将其放在单独的文件夹中。
如果引用图像,请使用以单斜杠开头的相对路径。
要将特定布局应用于在 IE6 中查看的页面,我创建了一个新样式表并将其放在“root/App_Themes/darkOrange/css”文件夹中。在“root/MasterPages/Root.Master”文件中,我添加了以下几行 html 代码:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->
当 Css 文件放置在“App_Themes”文件夹或“App_Themes”内的子文件夹中时,它将自动被引用。这会在非 IE6 浏览器中导致不良行为。IE6 布局被应用到页面并弄乱了页面的外观。
当登陆默认页面(浏览器请求 http;//yourstore/default.aspx)时,服务器将解析请求。生成的 html 源代码将包含以下 html 代码:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
<![endif]-->
但 html 也包含以下行:
<link href="App_Themes/darkOrange/css/ie6.css" type="text/css" rel="stylesheet" />
所有浏览器都会触发以下请求:
http;//yourstore/App_Themes/darkOrange/css/ie6.css
IE6 将触发一个额外的请求(文件将从 IE 缓存中检索):
http;//yourstore/App_Themes/darkOrange/css/ie6.css
这是不受欢迎的行为,因此我不得不将“ie6.css”文件替换为新文件夹。它现在放置在“root/css/ie6.css”中。
为了在 IE6 中支持透明 png 图像,ie6.css 文件包含一些 css 'filter' 属性。
例如,其中一个 div 选择器将包括以下 css 代码行:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='../App_Themes/darkOrange/img/transparent_image_example.png');
当登陆默认页面时(浏览器请求 http;//yourstore/default.aspx)IE6 会请求:
http;//yourstore/img/transparent_image_example.png
当点击“书籍”类别时,浏览器请求 http;//yourstore/Category/29-books.aspx) IE6 会请求:
http;//yourstore/img/transparent_image_example.png
两者都导致“找不到页面”(HTTP/1.1 404 Not Found)。
更换后:
'../App_Themes/darkOrange/img/transparent_image_example.png'
和:
'/App_Themes/darkOrange/img/transparent_image_example.png'
一切正常。
这是因为相对路径以单斜杠开头。浏览器将通过以下方式解释 url:
它是否以'http;//'开头?如果是,则必须是绝对路径;如果不是,它必须是相对路径。
相对路径:
它是否以单斜杠开头?如果是,它必须是“绝对路径引用”;如果不是,它必须是“相对路径引用”
注意:请参阅文档“统一资源标识符 (URI):通用语法”( http://www.ietf.org/rfc/rfc2396.txt )中的第 5 节“相对 URI 引用” 。
在 url 重写页面的情况下:
使用“相对路径引用”(例如“http;//yourstore/Category/29-books.aspx”和“../App_Themes/darkOrange/img/transparent_image_example.png”)时,浏览器将失败。
使用“绝对路径引用”(例如“http;//yourstore/Category/29-books.aspx”和“/App_Themes/darkOrange/img/transparent_image_example.png”)时,浏览器会成功。