Blazor SQL表编辑界面故障：无法显示选中值及提交修改

问题根源 #

1. 主页面编辑按钮未传递目标Number的ID，导致编辑页无法定位要修改的数据
2. 编辑页路由未定义参数，无法接收ID值
3. 编辑页数据初始化逻辑错误，将数据加载代码放在了提交方法中，组件加载时未获取目标数据
4. 输入框占位符绑定错误，直接绑定了对象而非Number属性
5. 编辑提交逻辑混乱，数据加载与修改提交代码混杂

分步修复代码 #

1. 主页面：修改编辑链接，传递Number参数 #

将编辑按钮的href改为携带当前veh.Number的链接：

<!-- 原代码 -->
<a href='/list/edit' class="btn btn-outline-dark" role="button">Edit</a>

<!-- 修改后 -->
<a href=`/list/edit/${veh.Number}` class="btn btn-outline-dark" role="button">Edit</a>

2. 编辑页Razor：修改路由定义，添加参数 #

在@page指令中添加参数占位符，匹配传递的ID：

<!-- 原代码 -->
@page "/list/edit"

<!-- 修改后 -->
@page "/list/edit/{vehID}"

3. 编辑页Razor：修复输入框占位符绑定 #

将占位符从@veh改为@veh.Number，显示选中的数字：

<!-- 原代码 -->
<InputText class="form-control" @bind-Value="veh.Number" placeholder= "@veh" required />

<!-- 修改后 -->
<InputText class="form-control" @bind-Value="veh.Number" placeholder="@veh.Number" required />

4. 编辑页C#：修复数据初始化与提交逻辑 #

重写组件初始化方法，在组件加载时获取目标数据；拆分提交方法，只处理修改提交逻辑：

using Microsoft.AspNetCore.Components;
using Fireserver.Data;
using Fireserver.Models;
using Fireserver.Interface;

namespace Fireserver.Pages
{
    public class EditNumberModel : ComponentBase
    {
        [Inject]
        protected NumberService NumberService { get; set; } = null!;
        [Inject]
        public NavigationManager? UrlNavigationManager { get; set; }
        [Parameter]
        public string? vehID { get; set; }

        protected string Title = "Edit";
        public Number veh = new();

        // 组件加载时初始化数据
        protected override async Task OnInitializedAsync()
        {
            if (!string.IsNullOrEmpty(vehID))
            {
                veh = await NumberService.Details(vehID);
            }
        }

        // 仅处理编辑提交逻辑
        protected async Task EditNumber()
        {
            if (!string.IsNullOrEmpty(vehID) && veh != null)
            {
                NumberService.Edit(veh);
                UrlNavigationManager?.NavigateTo("/");
            }
        }

        public void Cancel()
        {
            UrlNavigationManager?.NavigateTo("/");
        }
    }
}

5. 额外修复：删除模态框变量作用域问题 #

主页面的删除模态框直接使用@veh.Number会导致变量作用域错误，需将选中的Number存入临时变量：

<!-- 主页面添加临时变量与方法 -->
@code {
    private Number? selectedNumber;

    private void DeleteConfirm(string number)
    {
        selectedNumber = vehList.FirstOrDefault(v => v.Number == number);
    }

    private async Task DeleteNumber(string number)
    {
        if(selectedNumber != null)
        {
            NumberService.Delete(selectedNumber.Number);
            // 重新加载列表逻辑（根据你的NumberDataModel实现补充）
        }
    }
}

<!-- 模态框中修改为临时变量 -->
<tr>
    <td>number</td>
    <td>@selectedNumber?.Number</td>
</tr>

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