demoshop

demo, trying to be the best_

Link Tag Helper Sample Code

  • 2021-05-24
  • 1318
  • 0

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

功能說明

我們先用 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"看看載入的情況

bootstrap.min.css 載入兩次  

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

調整外部網址

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

外部資源載入失敗,直接改載本地資源  

移除測試的設定

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

當沒有寫任何的 test 即使外部資源錯誤,也不會改載本地資源

 

回應討論