練習 - 在 Azure 應用程式組態實例中實作組態設定

10 分鐘

應用程式的新需求現在表示允許功能旗標控制產品的折扣。這個練習會告訴你如何做到這一點。

將組態設定新增至 Azure 應用程式組態實例。
新增程式代碼以使用新的設定來折扣產品價格。
建置及測試應用程式。

將組態設定新增至應用程式組態存放區

在 Azure 應用程式組態中，現在建立新的索引鍵/值組來儲存銷售折扣百分比。完成下列步驟：

在另一個瀏覽器索引標籤中，使用與 Azure CLI 相同的帳戶和目錄登入 Azure 入口網站。
使用搜尋方塊來尋找並開啟前面加上 eshop-app-features的應用程式組態資源。
在 [ 作業] 區段中，選取 [ 組態總管]。
在頂端功能表中，選取 + 建立，然後選取鍵值。
在 [ 金鑰 ] 文字框中，輸入 eShopLite__Store__DiscountPercent。
在 [ 值] 文本框中，輸入 0.8。
選擇套用。

新增程式代碼以使用新的組態設定

必須更新產品頁面，才能使用新的組態設定。完成下列步驟：

在 Visual Studio Code 中，開啟 Store/Components/Pages/Products.razor 檔案。
在區 @code 段中，新增下列變數來儲存功能旗標的狀態：
```
private decimal discountPercentage;  
```

在方法中 OnInitializedAsync ，新增下列程式代碼以擷取組態設定的值：

if (saleOn) {
  discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
}

方法現在看起來應該像下列程式代碼：

protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();

    if (saleOn) {
      discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
    }
}

上述程式代碼會使用 Configuration 物件來擷取組態設定的值。值會以十進位形式儲存在變數中 discountPercentage 。

顯示折扣價格

必須更新產品頁面，才能顯示折扣價格。完成下列步驟：

將 <td>@product.Price</td> 替換成此程式碼：
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
上述程式代碼會檢查季節性銷售是否已啟用。若已啟用，原價顯示時帶有刪除線，而折扣價格會顯示在其下方。如果未啟用季節性銷售，則會顯示原始價格。

建置應用程式

請確定您已儲存所有變更，且位於 dotnet-feature-flags 目錄中。在終端機中，執行下列命令：
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
使用 docker 執行應用程式：
```
docker compose up
```

測試價格折扣功能

若要確認功能旗標在程式代碼空間中如預期般運作，請完成下列步驟：

切換至 [埠] 索引標籤，然後在前端埠的本機地址右側，選取地球圖示。瀏覽器會在首頁開啟新的索引標籤。
選取產品。

如果您在本機使用 Visual Studio Code，請開啟 http://localhost:32000/products。

若要測試功能標誌是否控制季節性銷售，請完成下列步驟：

在 Azure 入口網站中，流覽至前面加上 eshop-app-features的 Azure 應用程式組態資源。
在 [ 作業] 區段中，選取 [ 功能管理員]。
選取已啟用 SeasonalDiscount 的切換，以關閉此功能。
在瀏覽器中，返回應用程式。
選取 [首頁 ]，然後選取 [ 產品] 頁面。

快取最多可能需要 30 秒的時間才能清除。如果仍然顯示銷售橫幅，請稍候幾秒鐘，然後再次重新整理頁面。

意見反應

此頁面對您有幫助嗎？