分享最近在 Coding4Fun Razor Pages 專案學到的新東西。

沿用昨天的 AJAX 呼叫範例做示範,我將 JavaScript 部分拆成獨立檔案 index.js,Index.cshtml 改寫成:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
    <form method="post">
        <div id="dvMsg">@Model.Message</div>
        <button type="submit" asp-page-handler="Refresh">NewGuid (Postback)</button>
        <button type="button" id="btnAjaxGet">NewGuid (Ajax GET)</button>
        <button type="button" id="btnAjaxPost">NewGuid (Ajax POST)</button>
    </form>

@section scripts {
    <script src="~/js/index.js"></script>
}

測試時發現一件事,ASP.NET Core 專案自己的 site.js 後方有一串 ?v=dLGP40S... 參數,我的 index.js 後面沒有:

依據之前研究 ScriptBundle 的經驗, v 參數應為檔案內容的 Hash 值,檔案變動時會改變,讓瀏覽器不致錯到 Cache 中的舊版。

檢查發現 Pages/Shared/_Layout.cshtml 裡 site.js 的引用方法跟 index.js 有一點差異:

    <script src="~/js/site.js" asp-append-version="true"></script>

多出的 asp-append-version 是所謂的 Tag Helper, 先前出現過的 asp-page-handler 也是 Tag Helper 的一種,可在 cshtml 轉成 HTML 的過程中為元素加料。以 asp-page-handler="Refresh" 為例, 效果是在 <button> 加上 formaction="/?handler=Refresh" Attribute,成為 POST 的額外參數。

至於 asp-append-version, 則可用於圖檔、CSS、JS 等 /wwwroot 下的靜態檔案,若檔案存在,檔案 URL 後方會自動加上「?v=檔案內容雜湊值」, 當檔案更新,雜湊值會改變造成 URL 不同,對瀏覽器而言是全新內容,避開用到 Cache 舊版的惱人問題。

引用 index.js 部分改成<script src="~/js/index.js" asp-append-version="true"></script>後, index.js 就也有 v 參數囉~ 酷!

Introduction of ASP.NET Core asp-append-version tag helper.


Comments

# by ByTIM

您好,我想問下,下面要加上 asp-append-version="true" ,怎麼加? 利用 RenderFormat ? 還是要照您的寫法? @section Styles { @Styles.Render("~/Content/dataPicker") } @section Scripts { @Scripts.Render("~/dataPicker") }

# by Jeffrey

to ByTIM, ScriptBundle本來就有類似的asp-append-version的機制,參考:https://blog.darkthread.net/blog/inside-scriptbundle-cache/ 但Debug模式展開時沒有。如果想轉用 asp-append-version 也是OK的,可參考這篇:https://dotblogs.com.tw/supershowwei/2017/07/26/164153

# by ByTIM

TO Jeffrey: _Layout.cshtml上: @Scripts.RenderFormat("<script src='{0}' asp-append-version='true'></script>", "~/XXXScript") 本機網頁上: <script src="/Scripts/XXX_Function.js" asp-append-version="true"></script> 我這樣寫,好像沒有V參數,晚點繼續研究好了。

# by Jeffrey

to ByTIM,你可以參考 https://blog.darkthread.net/blog/inside-scriptbundle-cache/ 這篇,Scripts.Render() 產生的結果本身就會帶有 v 參數了(如:/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1 ),不需要靠 asp-append-version。asp-append-version 是 Tag Helper 機制直接作用在 cshtml 裡的 Tag,RenderFormat() 時插不上手所以沒效果。

Post a comment