asp.net - 如何在 asp.net Blazor 页面中使用单选按钮和复选框

Question

我发现在 asp.net Blazor(服务器端)页面中动态创建和使用单选按钮和复选框非常困难，主要是因为:

• 我不知道如何绑定(bind) <input type="radio">字段
• 我发现了EditForm有点晚了
• 我没有找到任何示例
• 必须使用循环局部变量来避免闭包(和索引越界错误)
• <InputCheckbox>似乎无法绑定(bind)到 List<bool>并且需要复杂对象的列表并抛出 ArgumentException: The provided expression contains a InstanceMethodCallExpression1 which is not supported. FieldIdentifier only supports simple member accessors (fields, properties) of an object.错误。

所以我发布这个问题并同时用一个可行的解决方案来回答它。下面的代码首先演示了正则 <input> 的使用字段，稍后使用 EditForm成分。据我所知，后一种是首选解决方案。

我还有一个问题:如何使用 List<bool>而不是复杂对象的列表？必须使用单独的类来封装单个属性感觉不太对。如果 formModel 也会使事情变得复杂使用 EF Core 进行持久化。在类似的背景下讨论了同一问题，例如here .

Answer 1

我认为你的回答使这个问题变得复杂化。

下面的代码演示了基本设置(它是演示代码，而不是生产代码)。

它将 EditForm 与模型结合使用。有链接到模型的单选按钮和复选框可以正确更新。 Selected 有一个 setter，因此您可以在其中放置一个断点，看看谁正在更新。

@page "/"
@using Blazor.Starter.Data

<EditForm EditContext="this.editContext">

    @foreach (var model in models)
    {
        <h3>@model.Value</h3>

        <h5>Check boxes</h5>
        foreach (var option in model.Options)
        {
            <div>
                <InputCheckbox @bind-Value="option.Selected" />@option.Value
            </div>
        }
        <h5>Option Select</h5>
        <div>
            <InputRadioGroup @bind-Value="model.Selected">
                @foreach (var option in model.Options)
                    {
                    <div>
                        <InputRadio Value="option.Value" /> @option.Value
                    </div>
                    }
            </InputRadioGroup>
            <div>
                Selected: @model.Selected
            </div>
        </div>
    }
</EditForm>
<button class="btn btn-dark" @onclick="OnClick">Check</button>

@code {

    private EditContext editContext;

    private List<Model> models;

    protected override Task OnInitializedAsync()
    {
        models = Models;
        editContext = new EditContext(models);
        return Task.CompletedTask;
    }

    public void OnClick(MouseEventArgs e)
    {
        var x = true;
    }

    public List<Model> Models => new List<Model>()
    {
        new Model() { Value = "Fred"},
        new Model() { Value = "Jon"},
     };


    public class ModelOptions
    {
        public string Value { get; set; }
        public bool Selected
        {
            get => _Selected;
            set
            {
                _Selected = value;
            }
        }
        public bool _Selected;
    }

    public class Model
    {
        public string Value { get; set; }
        public string Selected { get; set; }
        public List<ModelOptions> Options { get; set; } = new List<ModelOptions>()
        {
            new ModelOptions() {Value="Tea", Selected=true},
            new ModelOptions() {Value="Coffee", Selected=false},
            new ModelOptions() {Value="Water", Selected=false},

        };
    }
}

它看起来像这样: