コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
ルート相対参照を用いて共通してリンクを記述する方法 | asp.net
- 2018/03/07
- 23:53
今回は asp.net において ルート相対参照を用いてスタイルシートや Javascript を読み込んだり、ページ遷移したりする方法についてご紹介いたします。
href や src に チルダ付きのURL "~/index.aspx" や "./index.aspx" "../index.aspx" を指定しても サブフォルダがある場合やマスターページに記載する場合等、正しく動作しない場合があります。そこでどんな場合でも必ず特定の記述方法でルート相対参照のURLが実装できます。
前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降
１．相対参照
まずは相対参照についておさらいしましょう。例えば 以下のようなURLのページに次のように記載した場合の挙動を見ていきます。
【リンク設置ページ例】
http://www.xxx.co.jp/folder1/folder2/index.aspx
（１）同じディレクトリのproductフォルダの下のページに遷移
<a href="folder3/index.aspx">
http://www.xxx.co.jp/folder1/folder2/folder3/index.aspx
</a>
（２）同じディレクトリのfolder3フォルダの下のページに遷移
<a href="./foldere3/index.aspx">
http://www.xxx.co.jp/folder1/folder2/folder3/index.aspx
</a>
（３）１つ上のディレクトリへの相対参照
<a href="../index.aspx">
http://www.xxx.co.jp/folder1/index.aspx
</a>
（４）２つ上のディレクトリへの相対参照
<a href="../../index.aspx">
http://www.xxx.co.jp/index.aspx
</a>
（５）ルート相対参照（その１）
<a href="~/product/index/aspx" runat="server">※runat="server"を追加するとチルダでのルート相対参照が動作します。
http://www.xxx.co.jp/product/index.aspx
</a>
（６）ルート相対参照（その２）
<a href="<%= Me.ResolveClientUrl("~/product/index.aspx") %>">
http://www.xxx.co.jp/product/index.aspx
</a>
※head タグ内での記述には注意点があります。次の「２．ルート相対参照」をご参考ください。２．ルート相対参照
基本的に、body タグ内では "<%= Me.ResolveClientUrl("~/index.aspx") %>" を実装し、head タグ内では runat="server" を用います。なぜならば、head タグ内はVB側でキーワードまたはディスクリプションを動的に変更したり、linkタグ（Canonical属性）を追加したりする必要がありますので、head タグをrunat="server"に設定します。その際、Headタグ内で <%=%>を用いてVBコードを記述することができなくなりますので、CSSやJSをrunat="server"に設定してチルダを用いたルート相対参照で動作するようにします。
※JSはレンダリングブロックするので、asyncに指定するかフッター近くに実装します。
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="RouteRelativeReference.Master.Site" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link runat="server" rel="stylesheet" href="~/App_Data/Styles/Style.css" />
<asp:ContentPlaceHolder ID="cphHeader" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="cphBody" runat="server">
</asp:ContentPlaceHolder>
<p>マスターページコンテンツ</p>
<a href="<%= Me.ResolveClientUrl("~/index.aspx") %>" />ルート相対参照のindex.aspxへ</a>
</div>
<div>
<script type="text/javascript" src="<%=Me.ResolveClientUrl("~/App_Data/Scripts/common.js")%>"></script>
<asp:ContentPlaceHolder ID="cphFooter" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。
- 関連記事
