教學課程：在 ASP.NET Core 應用程式中使用變體功能旗標

發行項
01/07/2025

在本教學課程中，您會使用變體功能旗標來管理範例應用程式中不同使用者區段的體驗，「日引述」。您可以使用使用 Variant 功能旗標中建立的 Variant 功能旗標。在繼續之前，請確定您在應用程式組態存放區中建立名為 Greeting 的變體功能旗標。

必要條件

請確定您的電腦已安裝 .NET CLI。
請遵循使用變體功能旗標教學課程，並建立名為 Greeting 的 Variant 功能旗標。

建立 ASP.NET Core Web 應用程式

在命令提示字元中執行下列程序代碼。此命令會使用個別帳戶驗證，在 ASP.NET Core 中建立新的 Razor Pages 應用程式，並將它放在名為 QuoteOfTheDay 的輸出資料夾中。
```
dotnet new razor --auth Individual -o QuoteOfTheDay
```
流覽至 QuoteOfTheDay 目錄，然後執行下列命令，為應用程式建立用戶密碼。將<your-App-Configuration-endpoint>佔位元取代為您的應用程式組態市集端點。您可以在應用程式組態市集的 [概觀] 刀鋒視窗中，於 Azure 入口網站中找到端點。
```
dotnet user-secrets init
dotnet user-secrets set Endpoints:AppConfiguration "<your-App-Configuration-endpoint>"
```

新增必要套件的最新版本。

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

線上至應用程式組態以進行功能管理

開啟 Program.cs ，並新增下列using語句。

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

新增下列程式代碼以連線到您的應用程式組態存放區，並呼叫 UseFeatureFlags 來提取不含卷標的所有功能旗標。

您可以使用 DefaultAzureCredential 來向應用程式組態存放區進行驗證。請遵循指示，將認證指派給 應用程式組態數據讀取者角色。在執行應用程式之前，請務必允許足夠的時間來傳播許可權。

var builder = WebApplication.CreateBuilder(args); 

// Retrieve the endpoint
string endpoint = builder.Configuration.GetValue<string>("Endpoints:AppConfiguration")
    ?? throw new InvalidOperationException("The setting `Endpoints:AppConfiguration` was not found.");

// Load configuration and feature flags from Azure App Configuration
builder.Configuration
    .AddAzureAppConfiguration(options =>
    {
        options.Connect(new Uri(endpoint), new DefaultAzureCredential())
               .UseFeatureFlags();
    });

新增 Azure 應用程式組態和功能管理服務，並啟用功能管理的目標。

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

在行var app = builder.Build();底下，新增 Azure 應用程式組態中間件以進行動態設定重新整理。
```
// Use Azure App Configuration middleware for dynamic configuration refresh.
app.UseAzureAppConfiguration();
```

使用 Variant 功能旗標

開啟 QuoteOfTheDay>Pages>Index.cshtml.cs，並以下列程式代碼取代內容。

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

您可以呼叫 GetVariantAsync 來擷取目前使用者的 Greeting 功能旗標變體，並將其值指派給GreetingMessage頁面模型的屬性。

在 QuoteOfTheDay>Pages>Shared>_Layout.cshtml 中，新增下列QuoteOfTheDay.styles.css參考至 font-awesome CSS 連結庫。
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
```

開啟 index.cshtml ，並將其內容取代為下列程序代碼。

@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>

此程式代碼會顯示 Day 應用程式的 Quote of the UI，並顯示GreetingMessage來自頁面模型的。按兩下心臟按鈕時，會觸發JavaScript處理程式 heartClicked 。

建置並執行應用程式

建置並執行應用程式。
```
dotnet build
dotnet run
```
載入應用程式之後，請選取 右上方的 [註冊 ] 以註冊新的使用者。
註冊名為 usera@contoso.com 的新使用者。
在輸入使用者資訊後，選取 [按這裡以驗證電子郵件] 連結。
重複相同的步驟，以註冊名為 userb@contoso.com的第二個使用者。

注意

請務必讓本教學課程正確使用這些名稱。只要功能如預期般設定，這兩個使用者應該會看到不同的變體。
選取 右上方的 [登入 ]，以登入為 usera@contoso.com。
登入之後，您會看到的問候語訊息很長 usera@contoso.com
按兩下 [註銷 ]，然後以身分 userb@contoso.com登入，您會看到簡單的問候訊息。