ASP.NETのプログラミングネタです。
ユーザコントロールを使っていると、そのコントロールはどこに組み込まれるかはわからないので、ユーザコントロール内で<link>を使ってスタイルシートを指定するときに、パスの扱いに困るわけです。
現在のASP.NETプロジェクトの実装を見ると、スタイルシートファイルはStylesフォルダに置くことになっているようです。しかし、<link>タグ内でパスを指定する場合、相対パスを使うのが普通です。例えば、こんな感じです。
<link href="Styles/style.css" rel="stylesheet" type="text/css" /> <link href="../Styles/style.css" rel="stylesheet" type="text/css" />
この場合、マークアップファイル（.aspx, .ascx）からStyles/style.cssを参照できれば問題ありません。
しかし、ユーザコントロールのように組み込まれる階層が一定でない場合には、ついつい絶対パスを使って参照したくなります。
<link href="/Styles/style.css" rel="stylesheet" type="text/css" />
これは常にうまくいきそうですが、残念ながらうまくいきません。ASP.NETではデバッグ環境におけるルートは「/サイト名」となり、絶対パスを使う場合には頭にサイト名をつけてやらないと見つかりません。
<link href="/Site/Styles/style.css" rel="stylesheet" type="text/css" />
しかし、デバッグ環境と本番環境でパスを書き分けるのはあまりに不便です。では、こんなふうにしたらどうでしょうか？
<link href="~/Styles/style.css" rel="stylesheet" type="text/css" />
ルートを表す「~」を使ってみましたが、残念なことにこれはサーバコントロールでしか意味がありません。
何だか手詰まり感が出てきましたが、意外と簡単に解決できました。
<link href="<% =Request.ApplicationPath %>/Styles/style.css" rel="stylesheet" type="text/css" />
このように式を入れてやれば、実行時のルートに応じて頭に適切なパスが付きますので、デバッグ環境と本番環境で書き分ける必要がなくなります。
なお、マスターページ内に<link>タグでスタイルシートを指定する場合には、ルートを表す「~」が使えます。これは、<link>タグを含む<head>タグにrunat=”server”属性が付いているからなのですね。
本来、<link>は<head>内に置くべきなのですが、ユーザコントロールではこうもいかず、苦肉の策と言えそうです。ですが、とりあえず動作しますので当面はよしとしました。
コメント
ユーザーコントロール側に外部スタイルシートのlinkタグを書いちゃうと、親ページ側からインラインでスタイルを変更するタイミングがなくなっちゃうので、このユーザーコントロールを利用するう場合はこのスタイルをリンクしてくださいとかしたほうがいいようなきも。。。
karuakunさん、はじめまして。
私の場合、ユーザコントロール側でお任せ、親ページでは何もしたくない、派なのでこんな感じですが、確かに親ページ側でスタイルシートをリンクすれば済む話ですね。そうすれば、階層に関しては親がきっちりと責任を取る、というようにできますね。参考になりました。