計算機科学のブログ

dive into C# - Statements, classes, and code - Controls, input tag, type, button

Head First C#: A Learner’s Guide to Real-World Programming with C# and .NET Core (Andrew Stellman(著)、Jennifer Greene(著)、O’Reilly Media)のChapter 2(dive into C# - Statements, classes, and code)、p.711(Exercise)の解答を求めてみる。

コード

index.razor

@page "/"

<div class="container">
    <div class="row">
        <h1>Experiment with controls</h1>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">
            Enter text:
        </div>
        <div class="col-sm-6">
            <input type="text" placeholder="テキストを入力(整数)" @onchange="UpdateNumericValue" />
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">
            数値(input type="range"):
        </div>
        <div class="col-sm-6">
            <input type="range" @onchange="UpdateValue"/>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">button type="button":</div>
        <div class="col-sm-6 btun-group" role="group">
            @for (int buttonNumber = 1; buttonNumber <= 6; buttonNumber++) 
            {
                string valueToDisplay = $"Button #{buttonNumber}";
                <button type="button" class="btn btn-secondary"
                        @onclick="() => ButtonClick(valueToDisplay)">
                    @buttonNumber
                </button>
            }
        </div>
    </div>
    <div class="row mt-5">
        <h2>Here's the value: <strong>@DisplayValue</strong></h2>
    </div>
</div>

@code {
    private string DisplayValue = "";
    private void UpdateNumericValue(ChangeEventArgs e)
    {
        if (int.TryParse(e.Value.ToString(), out int result))
        {
            DisplayValue = e.Value.ToString();
        }
    }
    private void UpdateValue(ChangeEventArgs e)
    {
        DisplayValue = e.Value.ToString();
    }
    private void ButtonClick(string s)
    {
        DisplayValue = s;
    }
}

Experiment With Controls