Razor页面表格动态增删行时Tool类值重置及EF Core保存问题求助

一、点击添加行时Tool值重置的解决方法 #

这个问题的核心是回发请求时没有正确保留原有Tool实例的属性值，导致系统重新初始化了Tool对象。解决步骤如下：

1. 回发时先绑定现有数据
   在处理添加行的Post方法中，必须先将当前请求中的Tool数据绑定到现有实例，再执行新增行操作，而不是直接创建新的Tool对象。示例代码：

   public async Task<IActionResult> OnPostAddRowAsync()
   {
       // 先绑定页面提交的现有Tool数据
       await TryUpdateModelAsync(Tool, "Tool");
       // 新增一行ToolRunOptions
       Tool.ToolRunOptions.Add(new ToolRunOptions());
       return Page();
   }
   

2. 确保表单元素命名正确
   Razor页面中，Tool的属性和动态行的集合项必须使用正确的asp-for绑定，让模型绑定器能正确识别数据：

   <!-- Tool自身属性绑定 -->
   <input asp-for="Tool.Name" class="form-control" />
   <input asp-for="Tool.Description" class="form-control" />
   
   <!-- 动态行使用索引绑定 -->
   @for (int i = 0; i < Model.Tool.ToolRunOptions.Count; i++)
   {
       <tr>
           <td><input asp-for="Tool.ToolRunOptions[i].OptionName" class="form-control" /></td>
           <td><input asp-for="Tool.ToolRunOptions[i].OptionValue" class="form-control" /></td>
       </tr>
   }
   

   这里用for循环而非foreach，是因为索引能让模型绑定器正确映射集合中的每一项。

二、选项标签页变更的保存方法 #

选项标签页的变更无法保存，通常是因为非当前标签页的表单元素未被提交，或者绑定路径错误。解决要点：

1. 所有标签页内容放在同一个<form>内
   不要给每个标签页单独建表单，确保提交时所有标签页的表单数据都会被发送到服务器：

   <form method="post">
       <ul class="nav nav-tabs">
           <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#basicInfo">基本信息</a></li>
           <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#runOptions">运行选项</a></li>
       </ul>
       <div class="tab-content">
           <div class="tab-pane active" id="basicInfo">
               <!-- Tool基本信息表单元素 -->
           </div>
           <div class="tab-pane" id="runOptions">
               <!-- 动态行表格 -->
           </div>
       </div>
       <button type="submit" asp-page-handler="Save" class="btn btn-primary">保存</button>
   </form>
   

2. 完整绑定并跟踪所有实体变更
   在保存方法中，要同时处理Tool自身属性和关联的ToolRunOptions集合的增删改：

   public async Task<IActionResult> OnPostSaveAsync()
   {
       if (!ModelState.IsValid) return Page();
   
       if (Tool.Id != 0)
       {
           // 编辑现有Tool：标记为修改状态
           _context.Attach(Tool).State = EntityState.Modified;
   
           // 处理ToolRunOptions的新增和修改
           foreach (var option in Tool.ToolRunOptions)
           {
               if (option.Id == 0)
               {
                   _context.ToolRunOptions.Add(option);
               }
               else
               {
                   _context.Attach(option).State = EntityState.Modified;
               }
           }
   
           // 处理已删除的行：对比数据库原有数据，标记删除
           var existingOptions = await _context.ToolRunOptions
               .Where(o => o.ToolId == Tool.Id)
               .ToListAsync();
           foreach (var existing in existingOptions)
           {
               if (!Tool.ToolRunOptions.Any(o => o.Id == existing.Id))
               {
                   _context.ToolRunOptions.Remove(existing);
               }
           }
       }
       else
       {
           // 新增Tool：直接添加整个实体（包含关联集合）
           _context.Tools.Add(Tool);
       }
   
       await _context.SaveChangesAsync();
       return RedirectToPage("./Index");
   }
   

三、补充：动态行删除的处理 #

如果需要实现删除行功能，同样要确保回发时保留现有数据，再移除指定行：

public async Task<IActionResult> OnPostDeleteRowAsync(int index)
{
    await TryUpdateModelAsync(Tool, "Tool");
    if (index >= 0 && index < Tool.ToolRunOptions.Count)
    {
        var option = Tool.ToolRunOptions[index];
        // 已存在的记录直接标记删除，新增的记录从集合移除
        if (option.Id != 0)
        {
            _context.ToolRunOptions.Remove(option);
        }
        else
        {
            Tool.ToolRunOptions.RemoveAt(index);
        }
    }
    return Page();
}

页面上的删除按钮要传递行索引：

<button type="submit" asp-page-handler="DeleteRow" asp-route-index="@i" class="btn btn-danger">删除</button>

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