将 Blazor 中 @bind-Value 中的字符串值转换为 int

Question

在我的 Blazor 页面中，我有这个简单的代码（ToggleButtonGroup 来自此处）。

<div class="col-lg-6">
    <label class="form-label form-field-label">Insert your value</label>
    <ToggleButtonGroup Options="@GroupOptions.Options0To10" 
        @bind-Value="@_session.InteractiveNumber" />
    <hr>
</div>

我使用的模型是这样定义的

public class Session {
    public int ActiveNumber { get; set; }
}

public Session _session = new();

ToggleButtonGroup 返回一个字符串作为值，但我想存储在数据库中，这就是为什么

Session

是这样定义的。如何将值从

string

转换为

int

？我可以使用

@(e => _session.ActiveNumber = e.ToString())

之类的东西吗？

Answer 1

作为参考，请参阅有关此主题的上一个问题的答案 - Bootstrap 单选按钮组

您需要使

ToggleButtonGroup

变得通用。 我已经修改了原始答案的代码：

@using System.Diagnostics.CodeAnalysis
@typeparam TValue
@inherits InputBase<TValue>

<div class="btn-group mt-1 me-2 mb-3" data-toggle="buttons">
    @foreach (var item in this.Options)
    {
        <button type="button" class="@this.GetButtonCSS(item.Value)" @onclick="() => ValueHasChanged(item.Value)">
            @item.Label
        </button>
    }
</div>

@code {
    [Parameter, EditorRequired] public IEnumerable<SelectOption<TValue>> Options { get; set; } = Enumerable.Empty<SelectOption<TValue>>();
    [Parameter] public string SelectedCss { get; set; } = "btn btn-primary";
    [Parameter] public string UnSelectedCss { get; set; } = "btn btn-outline-primary";

    // We must implement as it's abstract in InputBase.
    // But not used as we bypass the string conversion logic by setting CurrentValue directly
    protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage)
    {
        result = this.CurrentValue!;
        validationErrorMessage = null;
        return true;
    }

    private string GetButtonCSS(TValue value)
    {
        return value?.Equals(this.Value) ?? false
            ? this.SelectedCss
            : this.UnSelectedCss;
    }

    private void ValueHasChanged(TValue value)
    {
        // Bypass all the string conversion stuff as we have the value
        // Set CurrentValue directly instead of CurrentValueAsString and using the built in string to TValue conversion logic
        this.CurrentValue = value;
    }
}

public readonly record struct SelectOption<TValue>(TValue Value, string Label);

以及演示页面：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<EditForm Model="_model">
    <ToggleButtonGroup Options="_options" @bind-Value="_model.Value1" />
    <ToggleButtonGroup Options="_intOptions" @bind-Value="_model.Value2" />
    <ToggleButtonGroup Options="_boolOptions" @bind-Value="_model.Value3" />
</EditForm>

<div class="bg-dark text-white m-2 p-2">
    <pre>Value1: @_model.Value1</pre>
    <pre>Value2: @_model.Value2</pre>
    <pre>Value3: @_model.Value3</pre>
</div>

@code {
    private List<SelectOption<string>> _options = new() {
        new("Yes", "Yes"),
        new("No", "No"),
        new("Sometimes", "Sometimes")
    };

    private List<SelectOption<int>> _intOptions = new() {
        new(1, "Yes"),
        new(0, "No"),
        new(-1, "Sometimes")
    };

    private List<SelectOption<bool>> _boolOptions = new() {
        new(true, "On"),
        new(false, "Off")
    };

    private Model _model = new();

    public class Model
    {
        public string Value1 { get; set; } = "N";
        public int Value2 { get; set; }
        public bool Value3 { get; set; }
    }
}