ASP.NET Core やWebフォームで、関数やデザインが変更されたとき、スタイルシートやJavascriptなどの静的コンテンツはキャッシュが効いていると追加・修正された関数やデザインの変更などがすぐに反映されないことがあります。
そんな時は、以下の方法でブラウザーのキャッシュを無効化することで即時反映させることができます。
ASP.NET Core
CSSやJavascriptのリンクタグの属性にasp-append-version を追加して、クエリ文字列としてファイルのハッシュを付けると、 ファイルの内容が変わったときにはハッシュが変わるので、キャッシュが無効になります。
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />共通レイアウトである_Lauout.cshtmlに適用した例を以下に示します。
■Views/Shared/_Lauout.cshtml
<!DOCTYPE html>
<html lang="ja" style="height:100%">
@{
var pageName = @ViewData["Title"];
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Test</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
・・・省略
<script src="~/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-append-version="true"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
ASP.NET Webフォーム
Webフォームの場合、クエリーストリングに時間などをコードブロックに記載することでファイルハッシュが変わるので、ブラウザーのキャッシュが無効化されます。
<link href="site.css?ver=<%=Now().ToString("yyyyMMddHHmmss") %>" rel="stylesheet" type="text/css" />マスターページに適用した例を以下に示します。
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.Master.vb" Inherits="TEST.Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="Shortcut Icon" href="~/UI/Theme/Default/favicon.ico"/>
<title>【テスト】</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="js/jquery-ui-1.12.1/jquery-ui.css?ver=<%=Now().ToString("yyyyMMddHHmmss") %>" rel="stylesheet" type="text/css" />
<link href="site.css?ver=<%=Now().ToString("yyyyMMddHHmmss") %>" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" autocomplete="on">
<script type="text/javascript"
src='<% =VirtualPathUtility.ToAbsolute("~/js/Common.js?var=" & Now().ToString("yyyyMMddHHmmss")) %>'>
</script>
<script type="text/javascript"
src='<% =VirtualPathUtility.ToAbsolute("~/js/jquery-3.5.1.min.js?var=" & Now().ToString("yyyyMMddHHmmss")) %>'>
</script>
<div id="Wrapper">
<div id="Header">
</div>
<div id="Container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
</div>
</div>
</form>
</body>
</html>
コメント