Link Tag Helper Sample Code

Link Tag Helper 是在 .NET Core 的 MVC 與 Razor Pages 中提供的新擴充方法，用來處理使用 CDN 載入外部資源時的例外處理，可以用很優雅的方式設定外部資源載入錯誤時的備援機制，以往在 .NET Core 2.x 的時候專案範本擁有完整的範例，但升級到 3.x 後此範例就沒了，所以這篇文章主要就是記錄官方內建的範例程式碼，也順便釐清問題。

從相依到注入-進階篇 [2024-04-21]開課共5H

功能說明

我們先用 CDN 載入 Bootstrap.css 來做示範，以下是範例程式：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
      asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
      crossorigin="anonymous"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>

上面這段載入外部 CSS 的語法多了一些 asp-* 的標籤，這些標籤就是用來給 Tag Helper 使用的，我們用白話來描述這段程式在描述什麼。

使用公開的 CDN 服務載入 bootstrap.min.css 這個資源，載入完畢後測試內容有沒有包含名稱為 sr-only 的 css class，假設有再檢查 sr-only 內有沒有包含 position 這個屬性，如果有那 position 屬性的值是否為 absolute 以上只要有任何一個不對，就直接改載入 asp-fallback-href 設定的資源路徑，藉由這樣的語法我們就可以確保載入的資源是正確的，而且當載入錯誤時還有另一個備援可以使用，避免網站基底的 css 遺失造成網頁爆版。

通常會建議`asp-fallback-href` 指定的路徑是自己伺服器內的

範例程式

使用 CDN 載入 jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
        asp-fallback-test="window.jQuery"
        crossorigin="anonymous"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>

使用 CDN 載入 Bootstrap.js

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
        asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
        crossorigin="anonymous"
        integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>

測試情境

調整 test class

將asp-fallback-test-class="sr-only"改成asp-fallback-test-class="sr-only2"看看載入的情況

載入兩次的原因是，第一次將外部資源載入後使用asp-fallback-test-class="sr-only2"驗證失敗，所以直接改載入本地資源。

調整外部網址

將外部網址亂改，讓外部資源無法載入試試看效果

移除測試的設定

我們維持錯誤的外部資源網址，但是不寫以下這些參數 asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" 來測試當外部資源已經404的情況，會不會載內部資源。

demoshop