复选框值始终为空（或空）？

Question

因此，在过去几个晚上尝试了所有方法但没有任何效果之后，我现在不得不在这里寻求帮助。这应该很简单。基本上我正在尝试使用 dotnet 8 从复选框中获取值。问题是，经过大量谷歌搜索，特别是 [this]Blazor Checkbox 双向绑定和更改事件，当我单击该复选框时，根本没有任何反应。 StackOverflow 上的链接。我确实注意到 dotnet 8 有一个新的 [SupplyParameterFromForm] 属性，该属性适用于始终为 null 的其他内容，但不适用于此。

@page "/Admin/Roles/Update/{Id}"
@layout AdminLayout
@using Microsoft.AspNetCore.Http.Extensions
@using System.Text
@using PersonalWebsiteBlazor.Models
@inject UserManager<AppUser> _userManager
@inject RoleManager<IdentityRole> _roleManager

<h2 class="bg-info p-1">Update Role</h2>
<NavLink class="btn btn-secondary" href="/Admin/Roles" Match="@NavLinkMatch.All">Back</NavLink>

@Message



<EditForm Model="this" FormName="UpdateRole" OnSubmit="HandleSubmit">
    <AntiforgeryToken />
    <input type="hidden" name="roleName" value="@RoleName" />
    <input type="hidden" name="roleId" value="@RoleId" />

    <h2 class="bg-info p-1 text-white">Add To @RoleName</h2>
    <table class="table table-bordered table-sm">
        @if (NonMembers.Count() == 0)
        {
            <tr><td colspan="2">All Users Are Members</td></tr>
        }
        else
        {
            @foreach (AppUser user in NonMembers)
            {
                <tr>
                    <td>@user.UserName</td>
                    <td>
                        <input type="checkbox" value="@user.Id" checked="@IsChecked" @onchange="CheckboxChecked" />
                    </td>
                </tr>
            }
        }
    </table>

    <h2 class="bg-info p-1 text-white">Remove From @RoleName</h2>
    <table class="table table-bordered table-sm">
        @if (Members.Count() == 0)
        {
            <tr><td colspan="2">No Users Are Members</td></tr>
        }
        else
        {
            @foreach (AppUser user in Members)
            {
                @if (user is not null)
                {
                    <tr>
                        <td>@user.UserName</td>
                        <td>
                            <input type="checkbox" name="DeleteIds" value="@user.Id" />
                        </td>


                    </tr>
                }

            }
        }
    </table>
    <button type="submit" class="btn btn-primary">Save</button>
</EditForm>




@code {
    public string? Message { get; set; } = "Hello World!";

    [Parameter]
    public bool IsChecked { get; set; } = false;

    private void CheckboxChecked()
    {
        Console.WriteLine(DateTime.Now);
    }

    [Parameter]
    public string Id { get; set; } = default!;

    public string? RoleName { get; set; }
    public string? RoleId { get; set; }

    public List<string> AddIds { get; set; } = new List<string>();

    public List<string> DeleteIds { get; set; } = new List<string>();

    public List<AppUser> Members { get; set; } = new List<AppUser>();
    public List<AppUser> NonMembers { get; set; } = new List<AppUser>();
    public IdentityRole? Role { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        IdentityRole? role = await _roleManager.FindByIdAsync(Id);
        List<AppUser> members = new List<AppUser>();
        List<AppUser> nonMembers = new List<AppUser>();
        foreach (AppUser user in _userManager.Users)
        {
            var list = await _userManager.IsInRoleAsync(user, role!.Name!) ? members : nonMembers;
            list.Add(user);
        }
        Role = role;
        Members = members;
        NonMembers = nonMembers;
    }

    public async Task HandleSubmit()
    {
        StringBuilder sb = new StringBuilder();
        foreach (var item in AddIds)
        {
            sb.Append(item);
        }
        Message = sb.ToString();
        await Task.CompletedTask;
    }
}

相关代码：

 @foreach (AppUser user in NonMembers)
{
    <tr>
        <td>@user.UserName</td>
        <td>
            <input type="checkbox" value="@user.Id" checked="@IsChecked" @onchange="CheckboxChecked" />
        </td>
    </tr>
}

[Parameter]
public bool IsChecked { get; set; } = false;

private void CheckboxChecked()
{
    Console.WriteLine(DateTime.Now);
}

我现在只是尝试非常简单的事情来从复选框中获取值。 基本上我的问题是为什么它总是为空或为空，解决方案是什么？？？

谢谢你

道格拉斯

Answer 1

与.net7不同，需要指定服务器/WebAssembly交互式渲染模式才能启用交互https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0 #渲染模式。
对于 Blazor 服务器项目，您可以尝试在 Razor 组件顶部添加

@rendermode InteractiveServer

或

@rendermode @(new InteractiveServerRenderMode(false))

。或者您也可以在 app.razor 中指定全局渲染模式。
如果你没有在任何地方指定渲染模式，它将是“静态服务器端渲染”（静态SSR）。功能无法使用。