Net Core Environment Tag Helper 使用筆記

2022-12-07 120 words One minute

https://user-images.githubusercontent.com/6058558/206213410-2e1c7bd5-067a-4107-9765-ff171c515891.png

Contents

先前介紹ASPNETCORE_ENVIRONMENT是環境變數設定應用程式環境名稱。這篇Environment Tag Helper 支持根據不同的環境載入不同的內容。Tag 屬性有分 include,exclude。

Warning

你使用的時候沒效果，需要注意載入 TagHelpers

1

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

成功的話，滑鼠移過去可以看到提示，如下圖。

失敗的話，會是這樣。

簡單範例

1
2
3
4
5
6


<environment include="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
</environment>
<environment include="Stage,Production">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
</environment>

1
2
3


<environment exclude="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
</environment>

CDN CSS JS 連結錯誤(404)直接使用本地 CSS(神功能)

在Layout把 bootsrap 連結換掉

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


    <environment include="Development">
        <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
    </environment>

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

修改服務的環境變數，改成驗證環境

這邊你把隨便一個integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"改掉，會出現下面倒 cdn 錯誤訊息，但css會吃到本地端。(神作)
我目前看別的程式框架沒有這種解決方案，雖然用動態程式js去解決這個問題，不知道是不是好的方式。

asp-fallback-href 原理

asp-fallback-href：href失效後的備用鏈接
asp-fallback-test-class：會生成一個meta標籤，類名就是該值。必須是href所指CSS裡擁有的類
asp-fallback-test-property：必須是href所指CSS裡擁有的類的屬性
asp-fallback-test-value：必須是href所指CSS裡擁有的類的屬性的值
asp-suppress-fallback-integrity：驗證備用鏈接所指文件完整性

參考: .net core中的asp-fallback大致原理_Acsxionian的博客-CSDN博客

彩蛋

.Net Core Razor View 變數串接寫法