Blazor页面SessionStorage数据无法加载至RadzenGrid求助

核心错误分析 #

1. 键名不匹配：Page1将数据存入SessionStorage时用的键是inputCardData，但Page2读取时用的是sessionData，导致无法获取数据。
2. 组件未触发刷新：Blazor异步加载数据后，需要手动通知组件状态更新，否则RadzenGrid不会重新渲染。
3. 重复定义类型：两个页面各自定义FormData类，虽然结构相同，但属于不同的CLR类型，可能导致反序列化失败。

修复步骤 #

1. 统一SessionStorage键名 #

确保Page1存入和Page2读取使用同一个键inputCardData。

2. 提取共享的FormData类 #

在项目中创建共享类（比如Shared/FormData.cs），避免重复定义：

namespace Surplus.Shared
{
    public class FormData
    {
        public string CPSNumber { get; set; }
        public string Description { get; set; }
        public string ReasonDescription { get; set; }
    }
}

3. 修改Page1代码 #

添加共享类引用，其他代码保持不变：

@page "/form"
@using System.Text.Json;
@using Surplus.Shared // 添加这行
@inject IJSRuntime JSRuntime
// ... 其他注入和代码

4. 修改Page2代码 #

• 引用共享类
• 修正键名
• 加载数据后触发组件刷新
• 移除重复的FormData定义

修改后的Page2完整代码：

@page "/summary"
@using System.Text.Json;
@using Surplus.Shared
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@inject DialogService DialogService
@inject ContextMenuService ContextMenuService
@inject TooltipService TooltipService
@inject NotificationService NotificationService

<PageTitle>Summary</PageTitle>

<RadzenGrid Data="@sessionData" TItem="FormData">
    <Columns>
        <RadzenGridColumn TItem="FormData" Property="CPSNumber" Title="CPS Number" />
        <RadzenGridColumn TItem="FormData" Property="Description" Title="Item Description" />
        <RadzenGridColumn TItem="FormData" Property="ReasonDescription" Title="Reason For Surplus" />
    </Columns>
</RadzenGrid>

@code {
    private List<FormData> sessionData = new List<FormData>();

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // 使用和Page1一致的键名
            var storedDataJson = await JSRuntime.InvokeAsync<string>("sessionStorage.getItem", "inputCardData");

            if (!string.IsNullOrEmpty(storedDataJson))
            {
                sessionData = JsonSerializer.Deserialize<List<FormData>>(storedDataJson);
                // 通知组件状态更新，强制重新渲染Grid
                StateHasChanged();
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error loading from Session Storage: {ex.Message}");
        }
    }
}

额外调试建议 #

• 打开浏览器开发者工具（F12），切换到Application标签，查看SessionStorage中是否存在inputCardData键及对应的数据。
• 在Page1的SaveInputCardDataToSessionStorage方法中添加日志，确认数据是否正确序列化：

  private async Task SaveInputCardDataToSessionStorage()
  {
      try
      {
          var json = JsonSerializer.Serialize(inputCardData);
          Console.WriteLine($"Saved data: {json}"); // 添加日志
          await JSRuntime.InvokeVoidAsync("sessionStorage.setItem", "inputCardData", json);
      }
      catch (Exception ex)
      {
          Console.WriteLine($"Error saving to session storage: {ex.Message}");
      }
  }
  

• 检查Page2控制台是否有反序列化错误，若有可添加Json序列化配置确保兼容性：

  var options = new JsonSerializerOptions
  {
      PropertyNameCaseInsensitive = true,
      IgnoreNullValues = true
  };
  sessionData = JsonSerializer.Deserialize<List<FormData>>(storedDataJson, options);
  

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