Blazor页面中新增与编辑产品分类的双EditForm实现求助

我明白你现在的需求啦——在同一个Blazor页面里，既要能创建产品分类，又要点击表格里的编辑按钮后，把对应行切换成可编辑的表单，提交后保存修改对吧？看了你贴的代码，目前的编辑逻辑还有几个小细节需要调整，我来一步步帮你改好~

现有代码的问题点 #

1. 你当前在编辑行里直接绑定循环的productCategory对象，这会直接修改列表里的原始数据，一旦编辑中途取消，原始数据也会被改动，体验不好
2. 定义的modifyProductCategory模型没有真正派上用场，编辑状态的表单绑定逻辑不对
3. 编辑按钮的触发逻辑还没完善，需要明确标记当前正在编辑的分类ID

修改后的完整代码 #

下面是调整后的完整页面代码，包含表单逻辑和@code块的业务处理：

@page "/categorie"
@using MyOnlineShop.Components.Controls
@using MyOnlineShop.Controllers
@using MyOnlineShop.Models
@inject IProductCategoriesController CategoriesController
@inject NavigationManager NavigationManager

<h2 class="text-center">Categorie</h2>

<div class="container">
    <div class="row">
        <div class="col-3">
            @if (createFields)
            {
                <button type="button" class="btn btn-secondary my-3" @onclick="ShowCreateFields">Nascondi</button>
            }
            else
            {
                <button type="button" class="btn btn-success my-3" @onclick="ShowCreateFields">Crea</button>
            }
        </div>
    </div>
</div>

@if (createFields)
{
    <div class="container">
        <h3>Aggiungi categoria</h3>
        <div class="row my-3">
            <EditForm Model="createProductCategory" OnValidSubmit="CreateProductCategory" FormName="CreateProductCategoriesForm">
                <DataAnnotationsValidator />
                <ValidationSummary />
                <div class="row g-3">
                    <div class="col-2">
                        <label class="col-form-label">Categoria:</label>
                    </div>
                    <div class="col-4">
                        <InputText @bind-Value="createProductCategory.ProductCategoryName" class="form-control" />
                        <ValidationMessage For="() => createProductCategory.ProductCategoryName" />
                    </div>
                    <div class="col-2">
                        <label class="col-form-label">Descrizione categoria:</label>
                    </div>
                    <div class="col-4">
                        <InputText @bind-Value="createProductCategory.ProductCategoryDescription" class="form-control" />
                        <ValidationMessage For="() => createProductCategory.ProductCategoryDescription" />
                    </div>
                    <div class="col-2">
                        <label class="col-form-label">Note:</label>
                    </div>
                    <div class="col-10">
                        <InputText @bind-Value="createProductCategory.ProductCategoryNote" class="form-control" />
                        <ValidationMessage For="() => createProductCategory.ProductCategoryNote" />
                    </div>
                </div>
                <button class="btn btn-primary my-3" type="submit">Salva</button>
            </EditForm>
        </div>
    </div>
}

@if (filteredProductCategoriesList != null)
{
    <div class="container">
        <SearchComponent SearchCallback="HandleSearch"></SearchComponent>
        <p class="text-danger small">@searchMessage</p>
        <table class="table">
            <thead class="thead-light">
                <tr>
                    <th scope="col">Nome categoria</th>
                    <th scope="col">Descrizione</th>
                    <th scope="col">Note</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var productCategory in filteredProductCategoriesList)
                {
                    @if (editingId == productCategory.ProductCategoryId)
                    {
                        <!-- 编辑状态的行：绑定modifyProductCategory模型 -->
                        <tr>
                            <EditForm Model="modifyProductCategory" OnValidSubmit="SaveEdit" FormName="ModifyProductCategoriesForm">
                                <DataAnnotationsValidator />
                                <ValidationSummary />
                                <td>
                                    <InputText @bind-Value="modifyProductCategory.ProductCategoryName" class="form-control" />
                                    <ValidationMessage For="() => modifyProductCategory.ProductCategoryName" />
                                </td>
                                <td>
                                    <InputText @bind-Value="modifyProductCategory.ProductCategoryDescription" class="form-control" />
                                    <ValidationMessage For="() => modifyProductCategory.ProductCategoryDescription" />
                                </td>
                                <td>
                                    <InputText @bind-Value="modifyProductCategory.ProductCategoryNote" class="form-control" />
                                    <ValidationMessage For="() => modifyProductCategory.ProductCategoryNote" />
                                </td>
                                <td>
                                    <button type="submit" class="btn btn-primary me-2">Salva</button>
                                    <button type="button" class="btn btn-danger" @onclick="CancelEdit">Annulla</button>
                                </td>
                            </EditForm>
                        </tr>
                    }
                    else
                    {
                        <!-- 普通展示状态的行 -->
                        <tr>
                            <td scope="row" class="align-content-center">@productCategory.ProductCategoryName</td>
                            <td>@productCategory.ProductCategoryDescription</td>
                            <td>@productCategory.ProductCategoryNote</td>
                            <td>
                                <button type="button" class="btn btn-warning" @onclick="() => EditProductCategory(productCategory)">Modifica</button>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
    </div>
}

@code {
    private bool createFields = false;
    private ProductCategory createProductCategory = new ProductCategory();
    private ProductCategory modifyProductCategory = new ProductCategory();
    private List<ProductCategory> filteredProductCategoriesList = new List<ProductCategory>();
    private int? editingId = null;
    private string searchMessage = string.Empty;

    // 页面初始化时加载分类列表
    protected override async Task OnInitializedAsync()
    {
        await LoadCategories();
    }

    // 切换创建表单的显示/隐藏
    private void ShowCreateFields()
    {
        createFields = !createFields;
        // 隐藏创建表单时，重置创建模型
        if (!createFields)
        {
            createProductCategory = new ProductCategory();
        }
    }

    // 点击编辑按钮：将目标分类深拷贝到修改模型，标记编辑ID
    private void EditProductCategory(ProductCategory category)
    {
        // 深拷贝避免直接修改源数据
        modifyProductCategory = new ProductCategory
        {
            ProductCategoryId = category.ProductCategoryId,
            ProductCategoryName = category.ProductCategoryName,
            ProductCategoryDescription = category.ProductCategoryDescription,
            ProductCategoryNote = category.ProductCategoryNote
        };
        editingId = category.ProductCategoryId;
    }

    // 保存编辑
    private async Task SaveEdit()
    {
        if (modifyProductCategory != null && editingId.HasValue)
        {
            await CategoriesController.UpdateProductCategory(modifyProductCategory);
            // 更新列表中的数据
            var targetIndex = filteredProductCategoriesList.FindIndex(c => c.ProductCategoryId == editingId.Value);
            if (targetIndex != -1)
            {
                filteredProductCategoriesList[targetIndex] = modifyProductCategory;
            }
            // 结束编辑状态
            editingId = null;
            modifyProductCategory = new ProductCategory();
        }
    }

    // 取消编辑
    private void CancelEdit()
    {
        editingId = null;
        modifyProductCategory = new ProductCategory();
    }

    // 创建新分类
    private async Task CreateProductCategory()
    {
        await CategoriesController.CreateProductCategory(createProductCategory);
        // 重置创建模型+隐藏表单
        createProductCategory = new ProductCategory();
        createFields = false;
        // 重新加载分类列表
        await LoadCategories();
    }

    // 加载分类列表（可复用）
    private async Task LoadCategories()
    {
        filteredProductCategoriesList = await CategoriesController.GetProductCategories();
    }

    // 搜索回调（保留你原有的搜索逻辑）
    private void HandleSearch(string searchTerm)
    {
        // 这里实现你的搜索逻辑，示例逻辑如下：
        if (string.IsNullOrWhiteSpace(searchTerm))
        {
            _ = LoadCategories();
            searchMessage = string.Empty;
        }
        else
        {
            var filtered = filteredProductCategoriesList.Where(c => 
                c.ProductCategoryName.Contains(searchTerm, StringComparison.OrdinalIgnoreCase) ||
                c.ProductCategoryDescription.Contains(searchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
            
            searchMessage = filtered.Any() ? string.Empty : "Nessuna categoria trovata";
            filteredProductCategoriesList = filtered;
        }
    }
}

关键修改说明 #

1. 编辑状态隔离：点击编辑时，把要修改的分类深拷贝到modifyProductCategory模型，避免直接改动列表里的原始数据，取消编辑时直接清空模型即可
2. 编辑标记管理：用editingId变量标记当前正在编辑的分类ID，精准控制表格行的显示状态（展示/编辑）
3. 表单绑定修正：编辑表单绑定modifyProductCategory模型，确保数据验证和提交逻辑正常工作
4. 状态重置逻辑：隐藏创建表单、取消编辑时，都会重置对应模型，避免残留旧数据影响下一次操作

内容来源于stack exchange