Blazor页面导航未保存变更仍显示问题及数据重载方案咨询

核心问题根源 #

你遇到的问题本质是引用类型的内存共享：你的CustomerService返回的Customer对象是同一个内存引用。当你在编辑页修改customer属性时，其实是直接修改了内存中的对象实例，而主页客户列表里的对应项也是这个实例的引用——哪怕没保存到数据库，主页也会显示修改后的内容，因为数据是在内存里共享的，不是每次都从数据库拉取新的独立副本。

具体解决方案 #

1. 确保服务返回独立的数据副本

修改CustomerService中的数据获取方法，每次返回新的Customer对象副本，而不是直接返回数据库查询得到的实例：

// 示例：GetCustomerByIdAsync返回副本
public async Task<Customer> GetCustomerByIdAsync(int id)
{
    var dbCustomer = await _dbContext.Customers.FindAsync(id);
    // 手动创建新对象复制属性（或用AutoMapper简化）
    return new Customer 
    {
        Id = dbCustomer.Id,
        Name = dbCustomer.Name,
        Email = dbCustomer.Email,
        // 复制其他需要的属性
    };
}

// GetAllCustomersAsync同理
public async Task<List<Customer>> GetAllCustomersAsync()
{
    var dbCustomers = await _dbContext.Customers.ToListAsync();
    return dbCustomers.Select(c => new Customer 
    {
        Id = c.Id,
        Name = c.Name,
        Email = c.Email,
        // 复制其他属性
    }).ToList();
}

2. 修复主页代码错误并优化加载逻辑

主页当前存在拼写错误和重复加载问题，修正后确保只在初始化和导航返回时加载数据：

@page "/Customers"
@inject CustomerService customerService
@inject NavigationManager NavigationManager
@implements IDisposable

Customer List

@code {
    private List<Customer> customers;

    protected override async Task OnInitializedAsync()
    {
        await JS.InvokeVoidAsync("startProgressBar");
        await LoadDataAsync();
        // 订阅导航事件，确保返回主页时重新加载
        NavigationManager.LocationChanged += OnLocationChanged;
    }

    private async Task LoadDataAsync()
    {
        customers = await customerService.GetAllCustomersAsync();
    }

    // 监听导航事件，回到主页时重新加载
    private async void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        if (e.Location.EndsWith("/Customers"))
        {
            await LoadDataAsync();
            StateHasChanged();
        }
    }

    // 销毁时取消订阅
    public void Dispose()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}

3. 编辑页使用独立副本隔离修改

在编辑页加载原始数据的副本，修改副本而非原始实例，彻底避免未保存修改影响其他页面：

@page "/EditCustomer/{id:int}"
@inject CustomerService customerService
@inject NavigationManager NavigationManager

<PageTitle>Edit Customer</PageTitle>

@code {
    [Parameter] public int Id { get; set; }
    private Customer originalCustomer; // 保存原始数据
    private Customer editCustomer; // 用于编辑的副本

    protected override async Task OnParametersSetAsync()
    {
        originalCustomer = await customerService.GetCustomerByIdAsync(Id);
        // 创建编辑用的独立副本
        editCustomer = new Customer 
        {
            Id = originalCustomer.Id,
            Name = originalCustomer.Name,
            Email = originalCustomer.Email,
            // 复制其他属性
        };
    }

    private async Task SaveChanges()
    {
        await customerService.UpdateCustomerAsync(editCustomer);
        NavigationManager.NavigateTo($"/CustomerDetails/{editCustomer.Id}");
    }
}

关键总结 #

• 避免内存中共享引用类型实例是核心，通过返回数据副本或编辑时使用独立副本隔离修改。
• 监听NavigationManager的LocationChanged事件，确保每次导航回页面时都重新从数据库加载数据。

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