Øvelse – Implementer konfigurationsindstillinger i Azure App Configuration-forekomsten

10 minutter

Et nyt krav til programmet siger nu, at du skal tillade et funktionsflag at styre en rabat for et produkt. I denne øvelse kan du se, hvordan du gør det.

Føj en konfigurationsindstilling til forekomsten af Azure App Configuration.
Tilføj kode for at bruge den nye indstilling til at give rabat på produktpriser.
Byg og test appen.

Føj konfigurationsindstillingen til App Configuration Store

I Azure App Configuration skal du nu oprette et nyt nøgleværdipar for at gemme salgsrabatprocenten. Udfør følgende trin:

På en anden browserfane skal du logge på Azure Portal med den samme konto og mappe som Azure CLI.
Brug søgefeltet til at finde og åbne ressourcen appkonfiguration med præfikset eshop-app-features.
Vælg Konfigurationsoversigti afsnittet handlinger i.
Vælg + Opret i den øverste menu, og vælg Nøgleværdi.
I tekstfeltet nøgle skal du skrive eShopLite__Store__DiscountPercent.
Skriv 0,8i tekstfeltet Værdi .
Vælg Anvend.

Tilføj kode for at bruge den nye konfigurationsindstilling

Produktsiden skal opdateres for at bruge den nye konfigurationsindstilling. Udfør følgende trin:

Åbn filen Store/Components/Pages/Products.razor i Visual Studio Code.
I afsnittet @code skal du tilføje følgende variabel for at gemme tilstanden for funktionsflaget:
```
private decimal discountPercentage;  
```

I metoden OnInitializedAsync skal du tilføje følgende kode for at hente værdien af konfigurationsindstillingen:

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

Metoden skal nu ligne følgende kode:

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

Ovenstående kode bruger konfigurationsobjektet til at hente værdien af konfigurationsindstillingen. Værdien gemmes i variablen discountPercentage som decimal.

Vis de diskonterede priser

Produktsiden skal opdateres for at vise de diskonterede priser. Udfør følgende trin:

Erstat <td>@product.Price</td> med denne kode:
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
Ovenstående kode kontrollerer, om sæsonsalget er aktiveret. Hvis den er aktiveret, vises den oprindelige pris med en gennemstregning, og den nedsatte pris vises under den. Hvis sæsonsalget ikke er aktiveret, vises den oprindelige pris.

Byg appen

Sørg for, at du har gemt alle dine ændringer og er i dotnet-feature-flags mappe. Kør følgende kommando i terminalen:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Kør appen ved hjælp af docker:
```
docker compose up
```

Test prisrabatfunktionen

Hvis du vil kontrollere, at funktionsflaget fungerer som forventet i et kodeområde, skal du udføre følgende trin:

Skift til fanen PORTE, og vælg derefter globusikonet til højre for den Front End port. Browseren åbner en ny fane på startsiden.
Vælg Products.

Hvis du bruger Visual Studio Code lokalt, skal du åbne http://localhost:32000/products.

Hvis du vil teste funktionsflaget, der styrer sæsonsalget, skal du udføre følgende trin:

Gå til Azure App Configuration-ressourcen med præfikset eshop-app-featurespå Azure Portal.
Vælg Funktionsstyring i afsnittet handlinger.
Vælg SeasonalDiscount aktiveret for at slå denne funktion fra.
Vend tilbage til programmet i din browser.
Vælg siden Startside og derefter siden Products.

Det kan tage op til 30 sekunder, før cachen ryddes. Hvis salgsbanneret stadig vises, skal du vente et par sekunder og opdatere siden igen.

Feedback

Var denne side nyttig?