ASP.NET Webform css 链接被破坏答案

【问题标题】：ASP.NET Webform css link getting mangledASP.NET Webform css 链接被破坏
【发布时间】：2009-06-12 16:06:34
【问题描述】：

由于某种原因，webforms 母版页中的 css 链接被 ASP.NET 破坏。

使用母版页的页面位于/subdir1/subdir2/page.aspx

不知道为什么会这样，但这是代码的 sn-p：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="<%= MyNamespace.Helpers.UrlHelper.CssRoot %>Site.css" rel="stylesheet" type="text/css" />
    <script src="<%= MyNamespace.Helpers.UrlHelper.JavascriptRoot %>jquery-1.3.2.min.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="cphHead" runat="server">
    </asp:ContentPlaceHolder>
</head>

正在创建的 Html 输出是：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
    Untitled Page
</title><link href="../../%3C%25=%MyNamespace.Helpers.UrlHelper.CssRoot%20%25%3ESite.css" rel="stylesheet" type="text/css" />
    <script src="/Javascript/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>

为什么这适用于脚本标签但破坏链接标签而不实际执行包含的代码。如果我将“链接”标签更改为“脚本”标签（这是错误的，但出于测试目的），它会生成我期望的正确 html。为什么 ASP.NET 弄乱了我的 Css 的链接标签而不是 javascript 的脚本标签？

链接标签有什么特别之处可以让 ASP.NET 认为它需要破坏它吗？

【问题讨论】：

标签： c# asp.net webforms

【解决方案1】：

这是一个基于方法的单独答案，可能更符合您的要求。我发现字符串修饰的原因是 HtmlLink 对象在渲染期间对 href 值进行了内部处理。使用 .NET Reflector 我发现了一个 Overrides RenderAttributes 方法。这是它的代码：

Protected Overrides Sub RenderAttributes(ByVal writer as HtmlTextWriter)
    If Not String.IsNullOrEmpty(Me.Href) Then
        MyBase.Attributes.Item("href") = MyBase.ResolveClientUrl(Me.Href)
    End If
    MyBase.RenderAttributes(writer)
End Sub

我认为正在发生的事情是在解析帮助行之前调用 RenderAttributes 方法，并对字符串“Site.css”使用 ResolveClientUrl。使用“~/” URL 字符串的解决方案不受此影响，因为 ResolveClientUrl 能够理解该符号。

在这一点上，我看到了两种解决方案。 1) 使用 Edit #2 方法，在 Page_Load 或 Page_PreRender 期间将帮助程序的 URL 字符串注入元素，或 2) 创建您自己的 HtmlLink 元素的覆盖版本，该版本不尝试使用 ResolveClientUrl。 #1 肯定是更简单的解决方案。

希望这有助于阐明这个问题。

【讨论】：

不错的侦查，也让 T4MVC 模板助手感到厌烦。不喜欢：
我遇到了同样的问题，也是因为我试图使用 T4MVC 助手。我最终编写了一个输出整个内容的 HtmlHelper。我现在可以做 public static string CssLink(this HtmlHelper helper, string cssPath) { return string.Format("", cssPath); }

【解决方案2】：

也许一种解决方案是从母版页的代码隐藏中指定您的 <link> 和 <script> 标记。

private void ConstructLinkAndScriptTags()
{

string cssTag = "<link  href='" +   MyNamespace.Helpers.UrlHelper.CssRoot + "Site.css' rel='stylesheet' type='text/css' runat='server' />";

cph.Controls.Add(new LiteralControl(cssTag));
}

【讨论】：

【解决方案3】：

你可以尝试改变

<link href="<%= MyNamespace.Helpers.UrlHelper.CssRoot %>Site.css" rel="stylesheet" type="text/css" />

到

<link href='<%= MyNamespace.Helpers.UrlHelper.CssRoot %>Site.css' rel="stylesheet" type="text/css" />

注意第二个实例的单引号

【讨论】：

将其更改为单引号没有任何作用。它产生完全相同的结果。

【解决方案4】：

在元素中尝试 runat="server" 标记

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link runat="server" href="<%= MyNamespace.Helpers.UrlHelper.CssRoot %>Site.css" rel="stylesheet" type="text/css" />
    <script runat="server" src="<%= MyNamespace.Helpers.UrlHelper.JavascriptRoot %>jquery-1.3.2.min.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="cphHead" runat="server">
    </asp:ContentPlaceHolder>
</head>

编辑：你必须使用辅助对象吗？它不仅仅是使您的链接动态化吗？设置 runat="server" 后，您有时可以使用 ~ 字符来使用动态 URL。你可以试试这个：

<head runat="server">
    <link id="SiteCssLink" runat="server" href="~/Css/Site.css" rel="Stylesheet" type="text/css" media="all" />
</head>

编辑 #2：尝试将 URL 从页面后面代码中的 Page_Load 或 Page_PreRender 事件注入到链接元素中。您需要该元素具有 runat="server" 才能使其工作。

Protected Sub Page_PreRender(ByVal sender as Object, ByVal e as System.EventArgs) Handles Me.PreRender
    SiteCssLink.Href = Page.ResolveClientUrl(String.Concat(MyNamespace.Helpers.UrlHelper.CssRoot, "Site.css"))
End Sub

【讨论】：

为什么我需要 runat 服务器标签？我不需要它作为脚本标签，那么为什么我需要它作为链接标签呢？另外，我不需要服务器上的可访问性。
对 head 标签的 ASP.NET Webform 处理充其量是愚蠢的。在处理渲染问题时，我很幸运地添加了该标签。这可能无济于事，但它是一种很好的做法。
我刚刚通过将 runat="server" 添加到链接标签来测试它。什么都不做:(
我可以使用 href="~/Css/Site.css" 但这确实不是我想要使用的解决方案。如果出于某种原因我需要移动 Css 目录，我需要编辑使用该类型链接的每个页面，而不是更改一个功能。另外，我不喜欢只能为 Css 链接这样做的事实。我的脚本链接仍然需要按照我的方式完成。
您应该也可以为您的脚本标签使用 Edit #2 选项。

【解决方案5】：

ASP.NET 团队让链接标签自动调整其 href 属性是不明智的，但我发现处理它的最佳方法是：

将链接标签动态插入到文字控件中。
从 head 标签中删除 runat="server"。

【讨论】：

【解决方案6】：

这可能有点老套，但可以解决问题，并且看起来“有点”像普通的 html。

<link <% this.Response.Write( "href=\"" + Links.Content.Site_css + "\""); %> rel="stylesheet" type="text/css" />

请注意，在此示例中，我使用的是 T4MVC。正如 Chris Porter 所发布的，问题出在 href。通过调用 Response.Write 你可以解决这个问题。享受吧！

【讨论】：