objects…get oriented! Making code make sense - controls, input, range, button

Head First C#:
A Learner's Guide to Real-World Programming
with C# and .NET Core
楽天ブックス

開発環境

Head First C#: A Learner’s Guide to Real-World Programming with C# and .NET Core (Andrew Stellman(著)、Jennifer Greene(著)、O’Reilly Media)のChapter 3(objects…get oriented! Making code make sense)、p.717(Exercise)の解答を求めてみる。

コード

index.razor

@page "/"

<div class="container">
    <div class="row">
        <div class="col-8">
            <div class="row">
                How Many cards should I pick?
            </div>
            <div class="row mt-5">
                <input type="range" class="col-10 form-control-range"
                       min="1" max="15" @bind="numberOfCards" />
                <div class="col-2">@numberOfCards</div>
            </div>
            <div class="row mt-5">
                <button type="button" class="btn btn-primary"
                        @onclick="UpdateCards">Pick some cards</button>
            </div>
        </div>
        <div class="col-4">
            <ul class="list-group">
                @foreach (var card in pickedCards)
                {
                    <li class="list-group-item">@card</li>
                }
            </ul>
        </div>
    </div>
</div>

@code {
    int numberOfCards = 5;
    string[] pickedCards = new string[0];
    void UpdateCards(EventArgs e)
    {
        pickedCards = CardPicker.PickSomeCards(numberOfCards);
    }
}

PickACardBlazor