Övning – Implementera konfigurationsinställningar i Azure App Configuration-instansen

10 minuter

Ett nytt krav för programmet säger nu att en funktionsflagga ska kunna styra en rabatt för en produkt. Den här övningen visar hur du gör det.

Lägg till en konfigurationsinställning i Azure App Configuration-instansen.
Lägg till kod för att använda den nya inställningen för att rabattera produktpriser.
Skapa och testa appen.

Lägg till konfigurationsinställningen i App Configuration Store

I Azure App Configuration skapar du nu ett nytt nyckel/värde-par för att lagra försäljningsrabattprocenten. Slutför följande steg:

På en annan webbläsarflik loggar du in på Azure-portalen med samma konto och katalog som Azure CLI.
Använd sökrutan för att hitta och öppna appkonfigurationsresursen med prefixet eshop-app-features.
I avsnittet Åtgärder väljer du Configuration Explorer.
På den översta menyn väljer du + Skapa och väljer Nyckelvärde.
Ange i textrutan KeyeShopLite__Store__DiscountPercent.
I textrutan Value ska du ange 0,8.
Välj Använd.

Lägg till kod för att använda den nya konfigurationsinställningen

Produktsidan måste uppdateras för att använda den nya konfigurationsinställningen. Slutför följande steg:

Öppna filen Store/Components/Pages/Products.razor i Visual Studio Code.
I avsnittet @code lägger du till följande variabel för att lagra tillståndet för funktionsflaggan:
```
private decimal discountPercentage;  
```

I metoden OnInitializedAsync lägger du till följande kod för att hämta värdet för konfigurationsinställningen:

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

Metoden bör nu se ut som följande kod:

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);
    }
}

Koden ovan använder konfigurationsobjektet för att hämta värdet för konfigurationsinställningen. Värdet lagras i variabeln discountPercentage som decimal.

Visa rabatterade priser

Produktsidan måste uppdateras för att visa rabatterade priser. Slutför följande steg:

Ersätt <td>@product.Price</td> med den här koden:
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
Koden ovan kontrollerar om säsongsförsäljningen är aktiverad. Om det är aktiverat visas det ursprungliga priset med en genomslagspunkt och det rabatterade priset visas under det. Om säsongsförsäljningen inte är aktiverad visas det ursprungliga priset.

Skapa appen

Kontrollera att du har sparat alla ändringar och finns i katalogen dotnet-feature-flags. Kör följande kommando i terminalen:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Kör appen med docker:
```
docker compose up
```

Testa prisrabattfunktionen

Kontrollera att funktionsflaggan fungerar som förväntat i ett kodområde genom att utföra följande steg:

Växla till fliken PORTS och välj sedan ikonen för jordglob till höger om den lokala adressen för Frontend-porten. Webbläsaren öppnar en ny flik på startsidan.
Välj Produkter.

Om du använder Visual Studio Code lokalt öppnar du http://localhost:32000/products.

Utför följande steg för att testa funktionsflaggan som styr säsongsförsäljningen:

I Azure-portalen navigerar du till Azure App Configuration-resursen med prefixet eshop-app-features.
I avsnittet Åtgärder väljer du Funktionshanteraren.
Välj omkopplaren SeasonalDiscount som är aktiverad för att stänga av den här funktionen.
Gå tillbaka till programmet i webbläsaren.
Välj sidan Start och sedan sidan Produkter.

Det kan ta upp till 30 sekunder innan cacheminnet rensas. Om försäljningsbanderollen fortfarande visas väntar du några sekunder och uppdaterar sidan igen.