无法在 Blazor 项目中保存用户选择的值

Question

我有一个应用程序，用户可以在其中选择我想要保存在 Json 文件中的设置。

首次渲染时，用户会获得一个包含设置名称和默认值的表。然后，用户可以更改这些值并保存更改。但在保存的文件中，我看到的是默认值，而不是更改后的值。我已经尝试了很多绑定值的变体，但它们似乎都不起作用（或者由于类型违规而引发错误）

这是 BMSetting 类的相关部分：

public class BMSetting
{
    public string Name { get; set; }
    public bool IsActive { get; set; }
    public object DefaultValue { get; set; }

    // These properties are for user-selected values
    public int IntValue
    {
        get => DefaultValue is int intValue ? intValue : 0;
        set => DefaultValue = value;
    }

    public bool BoolValue
    {
        get => DefaultValue is bool boolValue ? boolValue : false;
        set => DefaultValue = value;
    }

    public string StringValue
    {
        get => DefaultValue?.ToString() ?? string.Empty;
        set => DefaultValue = value;
    }
}


public static class BMSettingData
{
    public static List<BMSetting> GetBMSettings()
    {
    return new List<BMSetting>
    {
    new BMSetting { Name = "Section", IsActive = true,DefaultValue =1},
    new BMSetting { Name = "ShowResults", IsActive = true,DefaultValue =true},
    new BMSetting { Name = "ShowOwnResult", IsActive = true,DefaultValue =true},
    new BMSetting { Name = "RepeatResults", IsActive = true,DefaultValue =false},
    new BMSetting { Name = "MaximumResults", IsActive = true,DefaultValue =0},
    new BMSetting { Name = "ShowPercentage", IsActive = true,DefaultValue =true},
    new BMSetting { Name = "GroupSections", IsActive = true,DefaultValue =false},here
        }
        }
}

这就是我在剃刀组件中渲染它的方式

@foreach (var setting in Kernel.BMSettings.BMSettingData.GetBMSettings())
{
<div class="col-md-6">
    <label>@setting.Name</label>
</div>
<div class="col-md-6">
    @if (setting.IsActive)
    {
    @switch (setting.DefaultValue)
    {
        case int intValue:
        <input type="number" class="form-control" value="@setting.IntValue" />
        break;
    case bool boolValue:
        <input type="checkbox" class="form-check-input" checked="@setting.BoolValue" />
        break;
    default:
        <input type="text" class="form-control" value="@setting.StringValue" />
        break;
    }
    }
    else
    {
    <span>Inactive</span>
    }
</div>
}

这是我用来保存所选值的方法：

private List<Kernel.BMSettings.BMSetting> GetSelectedSettings()
{
    List<Kernel.BMSettings.BMSetting> selectedSettings = new List<Kernel.BMSettings.BMSetting>();

    foreach (var setting in Kernel.BMSettings.BMSettingData.GetBMSettings())
    {
        if (setting.IsActive)
        {
        Kernel.BMSettings.BMSetting selectedSetting = new Kernel.BMSettings.BMSetting
        {
            Name = setting.Name,
            IsActive = setting.IsActive
        };

            
        switch (setting.DefaultValue)
        {
            case int intValue:
                    
            selectedSetting.IntValue = setting.IntValue;
            break;

            case bool boolValue:
                    
            selectedSetting.BoolValue = setting.BoolValue;
            break;


            default:
                    
                selectedSetting.StringValue = setting.StringValue.ToString();
            break;
        }
            
        selectedSettings.Add(selectedSetting);
        }
    }

    return selectedSettings;
}

如有任何帮助，我们将不胜感激。谢谢

Answer 1

您的输入中没有任何设置器。

这是一个演示页面，使用

@bind

将输入绑定到值。

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

@foreach (var setting in modelData)
{
    <div class="col-md-6">
        <label>@setting.Name</label>
    </div>
    <div class="col-md-6">
        @if (setting.IsActive)
        {
            @switch (setting.DefaultValue)
            {
                case int intValue:
                    <input type="number" class="form-control" @bind="@setting.IntValue" />
                    break;
                case bool boolValue:
                    <input type="checkbox" class="form-check-input" @bind="setting.BoolValue" />
                    break;
                default:
                    <input type="text" class="form-control" @bind="@setting.StringValue" />
                    break;
            }
        }
        else
        {
            <span>Inactive</span>
        }
    </div>
}

<div class="bg-dark text-white m-2 p-2">
@foreach(var setting in modelData)
    {
        <pre>@setting.Name : @setting.DefaultValue.ToString()</pre>
    }
</div>

@code {
    private List<BMSetting> modelData = new();

    protected override async Task OnInitializedAsync()
    {
        // Fake an async call
        await Task.Delay(100);
        modelData = BMSettingData.GetBMSettings();
    }

    private async Task SaveAsync()
    {
        // Fake an async call
        await Task.Delay(100);
        // do your save

    }
}

参见 - https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0