开发者

How do I use an equivalent of Control.ResolveUrl to resolve relative URL's for stylesheets?

开发者 https://www.devze.com 2023-03-27 23:32 出处:网络
I am using the following style for ensuring that whatever my current page URL, the required script files are always loaded, i.e. the correct URL 开发者_如何转开发is rendered.

I am using the following style for ensuring that whatever my current page URL, the required script files are always loaded, i.e. the correct URL 开发者_如何转开发is rendered.

<script src='<%= ResolveUrl("~/Scripts/jquery-1.4.1.js")%>' type="text/javascript" />

Yet when I try a similar approach with a stylesheet, as below, the actual code is rendered.

<link href='<%=  ResolveUrl("~/Styles/Blueprint/src/reset.css") %>' rel="stylesheet" type="text/css" />

Why is this and how can I achieve what I am trying but failing to with the second example?


This could be because your head element has the runat="server" attribute applied.

I can recreate the issue with the following:

<head runat="server">
    <link href='<%=  ResolveUrl("~/Styles/Blueprint/src/reset.css") %>' rel="stylesheet" type="text/css" />
</head>

With the attribute removed it resolves the URL as expected.


Edit

It seems as though if the head element is defined to run as a server control then the elements within it are also accessible to the code behind without the need to mark them as server controls.

For example:

<link id="link1" href='<%=  ResolveUrl("~/Styles/Blueprint/src/reset.css") %>' rel="stylesheet" type="text/css" />

is accessible from the code behind as an HtmlLink control even though it is not marked with the runat="server" attribute.

This explains the code you are seeing in the href attribute, as since its a server control property it is treating it as literal text.

What is strange is that the title element behaves in the same way and is available as an HtmlTitle object in the code behind, but the script tag is not and needs to be explicitly defined as runat="server before it becomes visible in the code behind.

As far as I can tell you have two options:

1 - Set the href attribute directly:

<link rel="stylesheet" type="text/css" href="~/Styles/Blueprint/src/reset.css" />

This will have the same affect as using Page.ResolveClientUrl and will resolve the URL for the stylesheet relative to the page:

<link href="Styles/Blueprint/src/reset.css" rel="stylesheet" type="text/css" />

Or

2 - Define your link element as a server control (which it is in any case):

<link id="link1" runat="server" rel="stylesheet" type="text/css" />

And set the url in the code behind:

link1.Href = ResolveUrl("~/Styles/Blueprint/src/reset.css");

This resolves the URL link so:

<link id="link1" rel="stylesheet" type="text/css" href="/Styles/Blueprint/src/reset.css" />

Hope this helps.


I have found the following approach to work well, and in my opinion it makes for a neater <head> tag as well:

<head id="Head1" runat="server">
    <title>Lightstone AVM</title>
    <style type="text/css">
        @import '<%# ResolveUrl("~/Styles/Blueprint/src/reset.css")%>';
        @import '<%# ResolveUrl("~/Styles/Blueprint/src/grid.css")%>';
        @import '<%# ResolveUrl("~/Styles/Site.css")%>';
        @import '<%# ResolveUrl("~/Styles/Master.css")%>';
        @import '<%# ResolveUrl("~/Styles/Nav.css")%>';
    </style>
</head>

Note the databinding expressions used instead of code render blocks. This is following the advice in Milan Negovan's Code Blocks Inside Master Pages Cause Trouble article, which very nicely deals with this strange problem.

NB: This approach does require the following minimum code behind for your master page:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Parent.DataBind()
    DataBind()
End Sub
0

精彩评论

暂无评论...
验证码 换一张
取 消