FC2ブログ

記事一覧

ルート相対参照を用いて共通してリンクを記述する方法 | asp.net


今回は asp.net において ルート相対参照を用いてスタイルシートや Javascript を読み込んだり、ページ遷移したりする方法についてご紹介いたします。

href や src に チルダ付きのURL "~/index.aspx" や "./index.aspx" "../index.aspx" を指定しても サブフォルダがある場合やマスターページに記載する場合等、正しく動作しない場合があります。そこでどんな場合でも必ず特定の記述方法でルート相対参照のURLが実装できます。

 
 aspnet_routerelativereference_01.png



前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降



1.相対参照

まずは相対参照についておさらいしましょう。
例えば 以下のようなURLのページに次のように記載した場合の挙動を見ていきます。

【リンク設置ページ例】
http://www.xxx.co.jp/folder1/folder2/index.aspx

(1)同じディレクトリのproductフォルダの下のページに遷移
<a href="folder3/index.aspx">
    http://www.xxx.co.jp/folder1/folder2/folder3/index.aspx
</a>

(2)同じディレクトリのfolder3フォルダの下のページに遷移
<a href="./foldere3/index.aspx">
    http://www.xxx.co.jp/folder1/folder2/folder3/index.aspx
</a>

(3)1つ上のディレクトリへの相対参照
<a href="../index.aspx">
    http://www.xxx.co.jp/folder1/index.aspx
</a>

(4)2つ上のディレクトリへの相対参照
<a href="../../index.aspx">
    http://www.xxx.co.jp/index.aspx
</a>

(5)ルート相対参照(その1)
<a href="~/product/index/aspx" runat="server">
    http://www.xxx.co.jp/product/index.aspx
</a>
※runat="server"を追加するとチルダでのルート相対参照が動作します。

(6)ルート相対参照(その2)
<a href="<%= Me.ResolveClientUrl("~/product/index.aspx") %>">
    http://www.xxx.co.jp/product/index.aspx
</a>
※head タグ内での記述には注意点があります。次の「2.ルート相対参照」をご参考ください。



2.ルート相対参照

基本的に、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 に関連する記事を投稿しておりますのでよろしければご参考くださいませ。



関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。