Øvelse – Implementere konfigurasjonsinnstillinger i azure appkonfigurasjonsforekomst

Fullført

Et nytt krav til programmet sier nå å tillate et funksjonsflagg å kontrollere en rabatt for et produkt. Denne øvelsen viser deg hvordan du gjør det.

• Legg til en konfigurasjonsinnstilling i Azure App Configuration-forekomsten.
• Legg til kode for å bruke den nye innstillingen til rabattproduktpriser.
• Bygg og test appen.

Legg til konfigurasjonsinnstillingen i App Configuration Store

Opprett nå et nytt nøkkelverdipar i Azure App Configuration for å lagre salgsrabattprosenten. Fullfør følgende fremgangsmåte:

1. Logg på Azure-portalen i en annen nettleserfane, med samme konto og katalog som Azure CLI.
2. Bruk søkeboksen til å finne og åpne ressursprefikset for appkonfigurasjon med eshop-app-features.
3. Velg Konfigurasjonsutforskerunder Operasjoner .
4. Velg + Opprett på den øverste menyen, og velg nøkkelverdi.
5. Skriv inn eShopLite__Store__DiscountPercenti tekstboksen Key .
6. Skriv inn 0,8i tekstboksen Verdi .
7. Velg Bruk.

Legg til kode for å bruke den nye konfigurasjonsinnstillingen

Produktsiden må oppdateres for å bruke den nye konfigurasjonsinnstillingen. Fullfør følgende fremgangsmåte:

1. Åpne Store/Components/Pages/Products.razor-filen i Visual Studio Code.

2. Legg til følgende variabel i @code-delen for å lagre tilstanden til funksjonsflagget:

   private decimal discountPercentage;  
   

3. Legg til følgende kode i OnInitializedAsync metode for å hente verdien for konfigurasjonsinnstillingen:

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

   Metoden skal nå se ut som 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);
       }
   }
   

   Koden ovenfor bruker konfigurasjonsobjektet til å hente verdien for konfigurasjonsinnstillingen. Verdien lagres i discountPercentage variabelen som en desimal.

Vis rabatterte priser

Produktsiden må oppdateres for å vise rabatterte priser. Fullfør følgende fremgangsmåte:

1. Erstatt <td>@product.Price</td> med denne koden:

   <td>
     @if (saleOn) {
       <strike>@(product.Price)</strike><br>
       @((product.Price * discountPercentage).ToString("#.##"))
     } else {
       @product.Price
     }
   </td>
   

   Koden ovenfor kontrollerer om sesongsalg er aktivert. Hvis den er aktivert, vises den opprinnelige prisen med en gjennomslag, og den rabatterte prisen vises under den. Hvis sesongsalget ikke er aktivert, vises den opprinnelige prisen.

Bygg appen

1. Sørg for at du har lagret alle endringene, og er i dotnet-feature-flags katalog. Kjør følgende kommando i terminalen:

   dotnet publish /p:PublishProfile=DefaultContainer 
   

2. Kjør appen ved hjelp av docker:

   docker compose up
   

Test prisrabattfunksjonen

Hvis du vil bekrefte at funksjonsflagget fungerer som forventet i et kodeområde, gjør du følgende:

1. Bytt til fanen PORTER, og velg deretter globusikonet til høyre for den lokale adressen for Front End port. Nettleseren åpner en ny fane på hjemmesiden.
2. Velg Produkter.

Hvis du bruker Visual Studio Code lokalt, åpner du http://localhost:32000/products.

Hvis du vil teste funksjonsflagget, kontrollerer du sesongsalget, og gjør følgende:

1. Gå til azure App Configuration-ressursprefikset med eshop-app-featuresi Azure-portalen.

2. Velg Funksjonsbehandlingunder Operasjoner .

3. Velg veksleknappen SeasonalDiscount aktivert for å slå av denne funksjonen.

   

4. Gå tilbake til programmet i nettleseren.

5. Velg Hjemmeside-siden, og deretter produkter-siden.

   

Det kan ta opptil 30 sekunder før hurtigbufferen fjernes. Hvis salgsbanneret fremdeles vises, venter du noen sekunder og oppdaterer siden på nytt.