Zelfstudie: Variantfunctievlagmen uit Azure-app Configuratie gebruiken in een ASP.NET-toepassing

Artikel
11/25/2024

In deze zelfstudie gebruikt u een vlag voor variantfuncties voor het beheren van ervaringen voor verschillende gebruikerssegmenten in een voorbeeldtoepassing, Quote of the Day. U gebruikt de variantfunctievlag die is gemaakt in variantfunctievlagmen gebruiken. Voordat u doorgaat, moet u ervoor zorgen dat u de variantfunctievlag Begroeting maakt in uw App Configuration-archief.

Vereisten

Zorg ervoor dat de .NET CLI op uw computer is geïnstalleerd.
Volg de zelfstudie Variantfunctievlagmen gebruiken en maak de vlag voor de variantfunctie met de naam Greeting.

Een ASP.NET Core-web-app maken

Voer de volgende code uit in een opdrachtprompt. Met deze opdracht maakt u een nieuwe Razor Pages-toepassing in ASP.NET Core, met behulp van verificatie van afzonderlijke accounts en plaatst u deze in een uitvoermap met de naam QuoteOfTheDay.
```
dotnet new razor --auth Individual -o QuoteOfTheDay
```
Maak een gebruikersgeheim voor de toepassing door naar de map QuoteOfTheDay te navigeren en voer de volgende opdracht uit. Dit geheim bevat het eindpunt voor uw app-configuratie.
```
dotnet user-secrets set Endpoints:AppConfiguration "<App Configuration Endpoint>"
```

Voeg de nieuwste versies van de vereiste pakketten toe.

dotnet add package Azure.Identity
dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration
dotnet add package Microsoft.FeatureManagement.AspNetCore

Verbinding maken met App Configuration voor functiebeheer

Voeg in Program.cs het volgende toe met behulp van instructies.

using Azure.Identity;
using Microsoft.Extensions.Configuration.AzureAppConfiguration;
using Microsoft.FeatureManagement;

Voeg in Program.cs onder de regel var builder = WebApplication.CreateBuilder(args);de App Configuration-provider toe, waarmee de configuratie wordt opgehaald uit Azure-app Configuratie wanneer de toepassing wordt gestart. Standaard worden met de UseFeatureFlags methode alle functievlagmen zonder label opgehaald.

U gebruikt de DefaultAzureCredential app om u te verifiëren bij uw App Configuration-archief. Volg de instructies om uw referenties toe te wijzen aan de rol App Configuration Data Reader . Zorg ervoor dat u voldoende tijd hebt om de machtiging door te geven voordat u de toepassing uitvoert.
```
builder.Configuration
    .AddAzureAppConfiguration(options =>
    {
        string endpoint = builder.Configuration.Get("Endpoints:AppConfiguration");
        options.Connect(new Uri(endpoint), new DefaultAzureCredential());

        options.UseFeatureFlags();
    });
```

Voeg Azure-app services voor configuratie- en functiebeheer toe en schakel targeting in voor functiebeheer.

// Add Azure App Configuration and feature management services to the container.
builder.Services.AddAzureAppConfiguration()
    .AddFeatureManagement()
    .WithTargeting();

Voeg onder de regel var app = builder.Build();Azure-app Configuration middleware toe voor dynamische configuratievernieuwing.
```
// Use Azure App Configuration middleware for dynamic configuration refresh.
app.UseAzureAppConfiguration();
```

De vlag voor variantfuncties gebruiken

Open QuoteOfTheDay>Pages>Index.cshtml.cs en vervang de inhoud door de volgende code.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.FeatureManagement;

namespace QuoteOfTheDay.Pages;

public class Quote
{
    public string Message { get; set; }

    public string Author { get; set; }
}

public class IndexModel(IVariantFeatureManagerSnapshot featureManager) : PageModel
{
    private readonly IVariantFeatureManagerSnapshot _featureManager = featureManager;

    private Quote[] _quotes = [
        new Quote()
        {
            Message = "You cannot change what you are, only what you do.",
            Author = "Philip Pullman"
        }];

    public Quote? Quote { get; set; }

    public string GreetingMessage { get; set; }

    public async void OnGet()
    {
        Quote = _quotes[new Random().Next(_quotes.Length)];

        Variant variant = await _featureManager.GetVariantAsync("Greeting", HttpContext.RequestAborted);

        if (variant != null)
        {
            GreetingMessage = variant.Configuration?.Get<string>() ?? "";
        }
        else
        {
            _logger.LogWarning("No variant given. Either the feature flag named 'Greeting' is not defined or the variants are not defined properly.");
        }
    }
}

U roept GetVariantAsync aan om de variant van de functievlag Begroeting voor de huidige gebruiker op te halen en de waarde toe te wijzen aan de GreetingMessage eigenschap van het paginamodel.

Voeg in QuoteOfTheDay>Pages>Shared>_Layout.cshtml, onder waar QuoteOfTheDay.styles.css wordt toegevoegd, de volgende verwijzing toe aan de css-bibliotheek font-awesome.
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
```

Open index.cshtml en vervang de inhoud door de volgende code.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
    ViewData["Username"] = User.Identity?.Name ?? string.Empty;
}

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #333;
    }

    .quote-container {
        background-color: #fff;
        margin: 2em auto;
        padding: 2em;
        border-radius: 8px;
        max-width: 750px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: start;
        position: relative;
    }

    .vote-container {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        gap: 0em;
    }

    .vote-container .btn {
        background-color: #ffffff; /* White background */
        border-color: #ffffff; /* Light blue border */
        color: #333
    }

    .vote-container .btn:focus {
        outline: none;
        box-shadow: none;
    }

    .vote-container .btn:hover {
        background-color: #F0F0F0; /* Light gray background */
    }

    .greeting-content {
        font-family: 'Georgia', serif; /* More artistic font */
    }

    .quote-content p.quote {
        font-size: 2em; /* Bigger font size */
        font-family: 'Georgia', serif; /* More artistic font */
        font-style: italic; /* Italic font */
        color: #4EC2F7; /* Medium-light blue color */
    }
</style>

<div class="quote-container">
    <div class="quote-content">
        <h3 class="greeting-content">@(Model.GreetingMessage)</h3>
        <br />
        <p class="quote">“@(Model.Quote?.Message ?? "< Quote not found >")”</p>
        <p>- <b>@(Model.Quote?.Author ?? "Unknown")</b></p>
    </div>

    <div class="vote-container">
        <button class="btn btn-primary" onclick="heartClicked(this)">
            <i class="far fa-heart"></i> <!-- Heart icon -->
        </button>
    </div>
</div>

<script>
    function heartClicked(button) {
        var icon = button.querySelector('i');
        icon.classList.toggle('far');
        icon.classList.toggle('fas');
    }
</script>

Met deze code wordt de gebruikersinterface van de toepassing Quote of the Day weergegeven en wordt het GreetingMessage van het paginamodel weergegeven. De JavaScript-handler heartClicked wordt geactiveerd wanneer op de hartknop wordt geklikt.

Ontwikkel de app en voer deze uit

Maak de toepassing en voer deze uit.
```
dotnet build
dotnet run
```
Zodra de toepassing is geladen, selecteert u Registreren in de rechterbovenhoek om een nieuwe gebruiker te registreren.
Registreer een nieuwe gebruiker met de naam usera@contoso.com.
Selecteer de koppeling Klik hier om e-mail te valideren nadat u gebruikersgegevens hebt ingevoerd.
Herhaal dezelfde stappen om een tweede gebruiker met de naam userb@contoso.comte registreren.

Notitie

Het is belangrijk voor deze zelfstudie om deze namen precies te gebruiken. Zolang de functie is geconfigureerd zoals verwacht, moeten de twee gebruikers verschillende varianten zien.
Selecteer Aanmelden in de rechterbovenhoek om u aan te melden als usera@contoso.com.
Nadat u bent aangemeld, ziet u een lang begroetingsbericht voor usera@contoso.com
Klik op Afmelden en aanmelden als userb@contoso.com, u ziet het eenvoudige begroetingsbericht.