C# マスターページを使用した際の相対パスの書き方（チルダの使い方）

マスターページを使用した際のスクリプトファイルやスタイルシート、href等の相対パスってどうなるんだろう？

マスターページからの相対パス？

それともWebフォームからの相対パス？

Webフォームからとなると階層の違うWebフォームがある場合、マスターページにはどのようなパスを記述したらいいんだろう？

気になったので、いろいろ調べていろいろ試してみた。

以下のフォルダ構成でテスト。

マスターページ「Site1.Master」に入れ子のマスターページ「NestedMasterPage1.master」を作成。

「NestedMasterPage1.master」をマスターページとして、「WebForm1.aspx」「WebForm2.aspx」を作成。

マスターページ内に記載された相対パスは実行時に実際のWebフォームからの相対パスに書き換えられるらしい。

相対パスを使って、script.js、Site.css、WebForm1.aspx、WebForm2.aspxへのリンクを以下のように記載してみた。

【Site1.Master】

1<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Sample.Site1" %>
2 
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head runat="server">
6    <title></title>
7    <!--Site1.master　開始-->
8    <script src="../Scripts/script.js" type="text/javascript"></script>
9    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
10    <!--Site1.master　終了-->
11    <asp:ContentPlaceHolder ID="head" runat="server">
12    </asp:ContentPlaceHolder>
13</head>
14<body>
15    <form id="form1" runat="server">
16    <div>
17        <!--Site1.master　開始-->
18        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="WebForm1.aspx">WebForm1</asp:HyperLink>
19        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="../Sample2/Sample21/WebForm2.aspx">WebForm2</asp:HyperLink>
20        <!--Site1.master　終了-->
21        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
22        </asp:ContentPlaceHolder>
23    </div>
24    </form>
25</body>
26</html>

【NestedMasterPage1.master】

1<%@ Master Language="C#" MasterPageFile="~/Sample/Site1.Master" AutoEventWireup="true"
2    CodeBehind="NestedMasterPage1.master.cs" Inherits="WebApplication1.Sample.NestedMasterPage1" %>
3 
4<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
5    <!--NestedMasterPage1.master　開始-->
6    <script src="../Scripts/script.js" type="text/javascript"></script>
7    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
8    <!--NestedMasterPage1.master　終了-->
9    <asp:ContentPlaceHolder ID="Nestedhead" runat="server"></asp:ContentPlaceHolder>
10</asp:Content>
11<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
12    <!--NestedMasterPage1.master　開始-->
13    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="WebForm1.aspx">WebForm1</asp:HyperLink>
14    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="../Sample2/Sample21/WebForm2.aspx">WebForm2</asp:HyperLink>
15    <!--NestedMasterPage1.master　終了-->
16    <asp:ContentPlaceHolder ID="NestedContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
17</asp:Content>

【WebForm1.aspx】

1<%@ Page Title="" Language="C#" MasterPageFile="~/Sample/NestedMasterPage1.master"
2    AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.Sample.WebForm1" %>
3 
4<asp:Content ID="Content1" ContentPlaceHolderID="Nestedhead" runat="server">
5    <!--WebForm1.aspx　開始-->
6    <script src="../Scripts/script.js" type="text/javascript"></script>
7    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
8    <!--WebForm1.aspx　終了-->
9</asp:Content>
10<asp:Content ID="Content2" ContentPlaceHolderID="NestedContentPlaceHolder1" runat="server">
11    <!--WebForm1.aspx　開始-->
12    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="WebForm1.aspx">WebForm1</asp:HyperLink>
13    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="../Sample2/Sample21/WebForm2.aspx">WebForm2</asp:HyperLink>
14    <!--WebForm1.aspx　終了-->
15</asp:Content>

【WebForm2.aspx】

1<%@ Page Title="" Language="C#" MasterPageFile="~/Sample/NestedMasterPage1.master"
2    AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.Sample2.Sample21.WebForm2" %>
3 
4<asp:Content ID="Content1" ContentPlaceHolderID="Nestedhead" runat="server">
5    <!--WebForm2.aspx　開始-->
6    <script src="../../Scripts/script.js" type="text/javascript"></script>
7    <link href="../../Styles/Site.css" rel="stylesheet" type="text/css" />
8    <!--WebForm2.aspx　終了-->
9</asp:Content>
10<asp:Content ID="Content2" ContentPlaceHolderID="NestedContentPlaceHolder1" runat="server">
11    <!--WebForm2.aspx　開始-->
12    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="../../Sample/WebForm1.aspx">WebForm1</asp:HyperLink>
13    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="WebForm2.aspx">WebForm2</asp:HyperLink>
14    <!--WebForm2.aspx　終了-->
15</asp:Content>

【実行したWebForm1.aspxのソース】

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head><title>
4 
5</title>
6    <!--Site1.master　開始-->
7    <script src="../Scripts/script.js" type="text/javascript"></script>
8    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
9    <!--Site1.master　終了-->
10     
11    <!--NestedMasterPage1.master　開始-->
12    <script src="../Scripts/script.js" type="text/javascript"></script>
13    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
14    <!--NestedMasterPage1.master　終了-->
15     
16    <!--WebForm1.aspx　開始-->
17    <script src="../Scripts/script.js" type="text/javascript"></script>
18    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
19    <!--WebForm1.aspx　終了-->
20 
21</head>
22<body>
23    <form method="post" action="WebForm1.aspx" id="form1">
24<div class="aspNetHidden">
25<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTg0MzMwMDU2ZGTiSw70adm3ECCVM8grLanlWwO10ZEHFD/N9RZ5WsNe5Q==" />
26</div>
27 
28    <div>
29        <!--Site1.master　開始-->
30        <a id="HyperLink1" href="WebForm1.aspx">WebForm1</a>
31        <a id="HyperLink2" href="../Sample2/Sample21/WebForm2.aspx">WebForm2</a>
32        <!--Site1.master　終了-->
33         
34    <!--NestedMasterPage1.master　開始-->
35    <a id="ContentPlaceHolder1_HyperLink1" href="WebForm1.aspx">WebForm1</a>
36    <a id="ContentPlaceHolder1_HyperLink2" href="../Sample2/Sample21/WebForm2.aspx">WebForm2</a>
37    <!--NestedMasterPage1.master　終了-->
38     
39    <!--WebForm1.aspx　開始-->
40    <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink1" href="WebForm1.aspx">WebForm1</a>
41    <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink2" href="../Sample2/Sample21/WebForm2.aspx">WebForm2</a>
42    <!--WebForm1.aspx　終了-->
43 
44 
45    </div>
46    </form>
47</body>
48</html>

WebForm1.aspxのソースに関しては、マスターページも同じ階層にあるから、記述したパスと実行時のパスも全く一緒だね。

気になるのは次のWebForm2.aspxのソース。

確認してみる。

パスが変わってるところに★マークをつけてみた。

【実行したWebForm2.aspxのソース】

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head><title>
4 
5</title>
6    <!--Site1.master　開始-->
7    <script src="../Scripts/script.js" type="text/javascript"></script>
8★  <link href="../../Styles/Site.css" rel="stylesheet" type="text/css" />
9    <!--Site1.master　終了-->
10     
11    <!--NestedMasterPage1.master　開始-->
12    <script src="../Scripts/script.js" type="text/javascript"></script>
13    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
14    <!--NestedMasterPage1.master　終了-->
15     
16    <!--WebForm2.aspx　開始-->
17    <script src="../../Scripts/script.js" type="text/javascript"></script>
18    <link href="../../Styles/Site.css" rel="stylesheet" type="text/css" />
19    <!--WebForm2.aspx　終了-->
20 
21</head>
22<body>
23    <form method="post" action="WebForm2.aspx" id="form1">
24<div class="aspNetHidden">
25<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTg0MzMwMDU2ZGTJktGqFzpg+N5piwFRa8H6tb1fbs57vBnk5tlCg/+kFg==" />
26</div>
27 
28    <div>
29        <!--Site1.master　開始-->
30★      <a id="HyperLink1" href="../../Sample/WebForm1.aspx">WebForm1</a>
31★      <a id="HyperLink2" href="WebForm2.aspx">WebForm2</a>
32        <!--Site1.master　終了-->
33         
34    <!--NestedMasterPage1.master　開始-->
35★  <a id="ContentPlaceHolder1_HyperLink1" href="../../Sample/WebForm1.aspx">WebForm1</a>
36★  <a id="ContentPlaceHolder1_HyperLink2" href="WebForm2.aspx">WebForm2</a>
37    <!--NestedMasterPage1.master　終了-->
38     
39    <!--WebForm2.aspx　開始-->
40    <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink1" href="../../Sample/WebForm1.aspx">WebForm1</a>
41    <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink2" href="WebForm2.aspx">WebForm2</a>
42    <!--WebForm2.aspx　終了-->
43 
44 
45    </div>
46    </form>
47</body>
48</html>

おぉ。

aタグのhrefに関してはマスターページからの相対パスがちゃんとWebForm2.aspxからの相対パスに変わってる！

すげー。

でも、スクリプトファイルとスタイルシートのパスがそのままの部分があるなぁ。

いろいろ調べてみると~（チルダ）というものがあるらしい。

Web アプリケーションのルートを示すものらしいので、Webフォームの場所に関係なく相対パスを生成することができるみたい。

パスの部分を以下のように修正して、さっそく実行してみる。

`1`	`<script` `src="~/Scripts/script.js"` `type="text/javascript"></script>`

`2`	`<link` `href="~/Styles/Site.css"` `rel="stylesheet"` `type="text/css"` `/>`

`1`	`<asp:HyperLink` `ID="HyperLink1"` `runat="server"` `NavigateUrl="~/Sample/WebForm1.aspx">WebForm1</asp:HyperLink>`

`2`	`<asp:HyperLink` `ID="HyperLink2"` `runat="server"` `NavigateUrl="~/Sample2/Sample21/WebForm2.aspx">WebForm2</asp:HyperLink>`

パスが変わってるところに★マークをつけてみた。

【実行したWebForm1.aspxのソース】

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head><title>
4 
5</title>
6    <!--Site1.master　開始-->
7    <script src="~/Scripts/script.js" type="text/javascript"></script>
8★  <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
9    <!--Site1.master　終了-->
10     
11    <!--NestedMasterPage1.master　開始-->
12    <script src="~/Scripts/script.js" type="text/javascript"></script>
13    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
14    <!--NestedMasterPage1.master　終了-->
15     
16    <!--WebForm1.aspx　開始-->
17    <script src="~/Scripts/script.js" type="text/javascript"></script>
18    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
19    <!--WebForm1.aspx　終了-->
20 
21</head>
22<body>
23    <form method="post" action="WebForm1.aspx" id="form1">
24<div class="aspNetHidden">
25<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTg0MzMwMDU2ZGTiSw70adm3ECCVM8grLanlWwO10ZEHFD/N9RZ5WsNe5Q==" />
26</div>
27 
28    <div>
29        <!--Site1.master　開始-->
30★      <a id="HyperLink1" href="WebForm1.aspx">WebForm1</a>
31★      <a id="HyperLink2" href="../Sample2/Sample21/WebForm2.aspx">WebForm2</a>
32        <!--Site1.master　終了-->
33         
34    <!--NestedMasterPage1.master　開始-->
35★  <a id="ContentPlaceHolder1_HyperLink1" href="WebForm1.aspx">WebForm1</a>
36★  <a id="ContentPlaceHolder1_HyperLink2" href="../Sample2/Sample21/WebForm2.aspx">WebForm2</a>
37    <!--NestedMasterPage1.master　終了-->
38     
39    <!--WebForm1.aspx　開始-->
40★  <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink1" href="WebForm1.aspx">WebForm1</a>
41★  <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink2" href="../Sample2/Sample21/WebForm2.aspx">WebForm2</a>
42    <!--WebForm1.aspx　終了-->
43 
44 
45    </div>
46    </form>
47</body>
48</html>

【実行したWebForm2.aspxのソース】

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head><title>
4 
5</title>
6    <!--Site1.master　開始-->
7    <script src="~/Scripts/script.js" type="text/javascript"></script>
8★  <link href="../../Styles/Site.css" rel="stylesheet" type="text/css" />
9    <!--Site1.master　終了-->
10     
11    <!--NestedMasterPage1.master　開始-->
12    <script src="~/Scripts/script.js" type="text/javascript"></script>
13    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
14    <!--NestedMasterPage1.master　終了-->
15     
16    <!--WebForm2.aspx　開始-->
17    <script src="~/Scripts/script.js" type="text/javascript"></script>
18    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
19    <!--WebForm2.aspx　終了-->
20 
21</head>
22<body>
23    <form method="post" action="WebForm2.aspx" id="form1">
24<div class="aspNetHidden">
25<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTg0MzMwMDU2ZGTJktGqFzpg+N5piwFRa8H6tb1fbs57vBnk5tlCg/+kFg==" />
26</div>
27 
28    <div>
29        <!--Site1.master　開始-->
30★      <a id="HyperLink1" href="../../Sample/WebForm1.aspx">WebForm1</a>
31★      <a id="HyperLink2" href="WebForm2.aspx">WebForm2</a>
32        <!--Site1.master　終了-->
33         
34    <!--NestedMasterPage1.master　開始-->
35★  <a id="ContentPlaceHolder1_HyperLink1" href="../../Sample/WebForm1.aspx">WebForm1</a>
36★  <a id="ContentPlaceHolder1_HyperLink2" href="WebForm2.aspx">WebForm2</a>
37    <!--NestedMasterPage1.master　終了-->
38     
39    <!--WebForm2.aspx　開始-->
40★  <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink1" href="../../Sample/WebForm1.aspx">WebForm1</a>
41★  <a id="ContentPlaceHolder1_NestedContentPlaceHolder1_HyperLink2" href="WebForm2.aspx">WebForm2</a>
42    <!--WebForm2.aspx　終了-->
43 
44 
45    </div>
46    </form>
47</body>
48</html>

うーん。

変わってるところと変わってないところがある。

変わってるところをピックアップすると・・・

１．マスターページ「Site1.Master」の内に記載したhref部分
２．aタグのhref部分

他は変わらないなぁ。

なんでだろう。

いろいろ調べていると以下のようなルールがあることが判明。

１．scriptタグのsrcの~（チルダ）は変換されない。
２．一番上位のマスターページの内のContentPlaceHolderの~（チルダ）は変換されない。

何か手はないだろうか。

・・・・・あった！！！

以下のように書けばいいみたい。

`1`	`<script` `src="<%= this.ResolveClientUrl("~/Scripts/script.js") %>" type="text/javascript"></script>`

変わらなかった部分を全て書き換えて実行してみた。

実行した結果・・・

全部変わったー！！！

よーし！

これで相対パスの問題は解決だー。

とりあえず~（チルダ）とthis.ResolveClientUrlを使えばなんとかなるな！

もう一つ注意点として、~（チルダ）が変換されるのはあくまでサーバーコントロール内で記載されているパスのみとのこと。

＜ａ href=”~/WebForm2.aspx”＞＜/ａ＞のようなただのHTMLコントロールでは変換されないので、気をつけよう。

C# マスターページを使用した際の相対パスの書き方（チルダの使い方）

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル