MudBlazor MudCheckBox无法修改值问题排查求助

使用MudBlazor的MudCheckBox时，无法通过点击鼠标修改其值。绑定实体类属性后，保存数据时复选框选中值会被置空，返回编辑页后仍无法修改状态。同时安装MudBlazor.Templates 3.2.0时遇到错误提示：

Package 'MudBlazor.Templates 3.2.0' has a package type 'Template' that is not supported by project

以下是相关代码片段：

Edit.razor UI标记 #

<div class="mb-3">
    <label for="islicensed" class="form-label">Is Licensed:</label>
    <MudCheckBox id="islicensed" @bind-Value="VendorDataFile.IsLicensed" TriState="true" Disabled="false" />
    <ValidationMessage For="() => VendorDataFile.IsLicensed" class="text-danger" />
</div>

Edit.razor @code部分 #

@code {
    [SupplyParameterFromQuery]
    private Guid VendorId { get; set; }

    [SupplyParameterFromQuery]
    private Guid DataProfileId { get; set; }


    [SupplyParameterFromForm]
    private VendorDataFile? VendorDataFile { get; set; }

    protected override async Task OnInitializedAsync()
    {
        using var context = DbFactory.CreateDbContext();
        VendorDataFile ??= await context.VendorDataFiles.FirstOrDefaultAsync(m => m.VendorId == VendorId && m.DataProfileId == DataProfileId);

        if (VendorDataFile is null)
        {
            NavigationManager.NavigateTo("notfound");
        }
    }

    private async Task UpdateVendorDataFile()
    {
        using var context = DbFactory.CreateDbContext();
        context.Attach(VendorDataFile!).State = EntityState.Modified;

        try
        {
            await context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!VendorDataFileExists(VendorDataFile!.VendorId, VendorDataFile!.DataProfileId))
            {
                NavigationManager.NavigateTo("notfound");
            }
            else
            {
                throw;
            }
        }

        NavigationManager.NavigateTo("/vendordatafiles");
    }

    private bool VendorDataFileExists(Guid vendorid, Guid dataprofileid)
    {
        using var context = DbFactory.CreateDbContext();
        return context.VendorDataFiles.Any(e => e.VendorId == vendorid && e.DataProfileId == dataprofileid);
    }
}

MainLayout.razor #

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
        <MudThemeProvider />
        <MudPopoverProvider />

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

App.razor #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets[\"lib/bootstrap/dist/css/bootstrap.min.css\"]" />
    <link rel="stylesheet" href="@Assets[\"app.css\"]" />
    <link rel="stylesheet" href="@Assets[\"MySolution.MyApp.Web.styles.css\"]" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="@Assets[\"_content/MudBlazor/MudBlazor.min.css\"]" rel="stylesheet" />
     <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="@Assets[\"_content/MudBlazor/MudBlazor.min.js\"]"></script>
</body>

</html>

Program.cs片段 #

builder.Services.AddMudServices();

解决方案 #

1. 修复MudCheckBox绑定问题 #

• 检查属性类型：启用TriState="true"后，MudCheckBox必须绑定到可空布尔类型（bool?）。确认VendorDataFile.IsLicensed的类型是bool?而非普通bool，否则三态模式无法正常触发值变更。
• 包裹EditForm：Blazor表单控件（包括MudBlazor组件）需要在EditForm中使用，以确保双向绑定的状态更新和验证生效。将UI代码包裹在EditForm内：

  <EditForm Model="VendorDataFile" OnValidSubmit="UpdateVendorDataFile">
      <DataAnnotationsValidator />
      <div class="mb-3">
          <label for="islicensed" class="form-label">Is Licensed:</label>
          <MudCheckBox id="islicensed" @bind-Value="VendorDataFile.IsLicensed" TriState="true" Disabled="false" />
          <ValidationMessage For="() => VendorDataFile.IsLicensed" class="text-danger" />
      </div>
      <button type="submit" class="btn btn-primary">Save</button>
  </EditForm>
  

2. 修复实体状态跟踪问题 #

• 在OnInitializedAsync中使用using var context会导致上下文立即释放，实体变为detached状态。更新时建议先查询最新实体，再复制修改后的属性值，而非直接Attach标记为Modified：

  private async Task UpdateVendorDataFile()
  {
      using var context = DbFactory.CreateDbContext();
      var existingEntity = await context.VendorDataFiles.FirstOrDefaultAsync(m => m.VendorId == VendorId && m.DataProfileId == DataProfileId);
      if (existingEntity == null)
      {
          NavigationManager.NavigateTo("notfound");
          return;
      }
      existingEntity.IsLicensed = VendorDataFile!.IsLicensed;
      try
      {
          await context.SaveChangesAsync();
      }
      catch (DbUpdateConcurrencyException)
      {
          // 并发处理逻辑
      }
      NavigationManager.NavigateTo("/vendordatafiles");
  }
  

3. 解决MudBlazor.Templates安装问题 #

• 模板包需通过.NET CLI全局安装，而非直接安装到现有项目：

  dotnet new install MudBlazor.Templates
  

• 确保项目为Blazor支持的类型（如Blazor Web App、Blazor Server），模板无法安装到类库、控制台等非Blazor项目。如需更新，先卸载旧版本再安装最新版：

  dotnet new uninstall MudBlazor.Templates
  dotnet new install MudBlazor.Templates::最新版本号
  

内容的提问来源于stack exchange，提问作者tonyatl