使用 Blazored.LocalStorage 将填写的项目存储在本地存储中时，RadzenCard 未显示

Question

我有一个表单，允许用户填写电子剩余的多个字段。它使用 Blazored LocalStorage 存储我在 RadzenCard 中拥有的所有字段的数据，然后在摘要页面上的网格视图中从 Blazored LocalStorage 加载数据（第 2 页），在数据库中更新之前可以查看所有输入的信息。我的问题是，当我运行应用程序时，第一页上的 RadzenCard 根本没有显示。它显示了其他所有内容，但不显示 RadzenCard。这是我该页面的代码：

@page "/form"
@using System.Text.Json;
@using Blazored.LocalStorage;
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@inject DialogService DialogService
@inject ContextMenuService ContextMenuService
@inject TooltipService TooltipService
@inject NotificationService NotificationService
@inject NavigationManager NavManager
@inject Blazored.LocalStorage.ILocalStorageService oLocalStore


<PageTitle>Form</PageTitle>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="h3" style="display: block">Welcome Username!</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <RadzenDropDownDataGrid TValue="string" ValueProperty="BuildingName" TextProperty="BuildingName" Data="@buildingLists" Placeholder="School Name" Style="width: 100%" AllowSorting="false" AllowSelectAll="false" AllowFiltering="false" ShowSearch="false" PageSize="60">
                    <Columns>
                        <RadzenDropDownDataGridColumn Property="BuildingName" Title="BuildingName" />
                    </Columns>
                </RadzenDropDownDataGrid>
            </div>
        </div>
    </div>
    <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                @foreach (var inputData in inputCardData)
                {
                    <div class="col-md-12"> <!-- Add this div to control card width -->
                        <RadzenCard  Variant="Radzen.Variant.Filled">
                            <div class="form-group">
                                <RadzenAutoComplete TextProperty="CPSNumber" Data="@surplusItemsNews" @bind-Value="inputData.CPSNumber" Placeholder="CPS Number" Style="width: 100%" />
                            </div>
                            <div class="form-group">
                                <RadzenAutoComplete TextProperty="Description" Data="@surplusItemsNews" @bind-Value="inputData.Description" Placeholder="Item Description" Style="width: 100%" />
                            </div>
                            <div class="form-group">
                                <RadzenDropDownDataGrid TValue="string" ValueProperty="ReasonDescription" TextProperty="ReasonDescription" Data="@reasons" Style="width: 100%" ShowSearch="false" AllowFiltering="false" AllowSorting="false" AllowSelectAll="false" Placeholder="Reason For Surplus" PageSize="10">
                                    <Columns>
                                        <RadzenDropDownDataGridColumn Property="ReasonDescription" Title="ReasonDescription" />
                                    </Columns>
                                </RadzenDropDownDataGrid>
                            </div>
                        </RadzenCard>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
</div>


<RadzenButton Style="width: 100%; min-width: 0px; min-height: 0px; height: 40px; display: block; background-color: #005570" Text="Review" Click="FinalizeList"></RadzenButton>

@code {
    [Inject]
    protected Surplus.WASPOService WASPOService { get; set; }

    protected System.Linq.IQueryable<Surplus.Models.WASPO.SurplusItemsNew> surplusItemsNews;
    protected System.Linq.IQueryable<Surplus.Models.WASPO.BuildingList> buildingLists;
    protected System.Linq.IQueryable<Surplus.Models.WASPO.Reason> reasons;

    // Create a class to hold form data
    public class FormData
    {
        public string CPSNumber { get; set; }
        public string Description { get; set; }
        public string ReasonDescription { get; set; }
    }

    // Inject the ILocalStorageService
    [Inject]
    private ILocalStorageService localStorage { get; set; }

    // Create a list to store instances of the form data
    List<FormData> inputCardData;

    // Constructor to initialize inputCardData
    public Form()
    {
        inputCardData = new List<FormData>();
    }

    // Function to save inputCardData to local storage
    private async Task SaveInputCardDataToLocalStorage()
    {
        try
        {
            await localStorage.SetItemAsync("inputCardData", inputCardData);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error saving to local storage: {ex.Message}");
        }
    }

    // Function to load inputCardData from local storage
    private async Task LoadInputCardDataFromLocalStorage()
    {
        try
        {
            inputCardData = await localStorage.GetItemAsync<List<FormData>>("inputCardData");
            // Initialize the list if it's null
            if (inputCardData == null)
            {
                inputCardData = new List<FormData>();
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error loading from local storage: {ex.Message}");
        }
    }

    protected override async Task OnInitializedAsync()
    {
        surplusItemsNews = await WASPOService.GetSurplusItemsNews();
        buildingLists = await WASPOService.GetBuildingLists();
        reasons = await WASPOService.GetReasons();

        // Load inputCardData from local storage when the page initializes
        await LoadInputCardDataFromLocalStorage();
    }

    // Event handler for the "Finalize List" button
    private async Task FinalizeList()
    {
        // Save the input card data to local storage
        await SaveInputCardDataToLocalStorage();

        // Navigate to the summary page
        NavManager.NavigateTo("/summary");
    }
}

这是第 2 页的代码：

@page "/summary"
@using System.Text.Json;
@inject NavigationManager NavigationManager
@inject DialogService DialogService
@inject ContextMenuService ContextMenuService
@inject TooltipService TooltipService
@inject NotificationService NotificationService
@using Blazored.LocalStorage

<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 {
    // Define the FormData class if it's not already defined
    public class FormData
    {
        public string CPSNumber { get; set; }
        public string Description { get; set; }
        public string ReasonDescription { get; set; }
    }

    // Read the stored local storage data
    private List<FormData> sessionData = new List<FormData>();

    // Inject the ILocalStorageService
    [Inject]
    private ILocalStorageService localStorage { get; set; }

    protected override async Task OnInitializedAsync()
    {
        // Load the data from local storage
        try
        {
            sessionData = await localStorage.GetItemAsync<List<FormData>>("inputCardData");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error loading from local storage: {ex.Message}");
        }
    }
}

Answer 1

List<FormData> inputCardData; 
inputCardData = new List<FormData>(); 

new List<FormData>()

创建一个列表，但是该列表最初是空的，因为其中没有 FormData 实例。

@foreach (var inputData in inputCardData)
{
    <div class="col-md-12"> 
        <RadzenCard  Variant="Radzen.Variant.Filled">
        <!-- rest of your code -->
}

您的

RadzenCard

以及所有其他 HTML 元素都位于列表的

foreach

循环内。由于列表为空，这意味着甚至不会运行一次循环，因此该循环内的所有内容都将被忽略。

private async Task LoadInputCardDataFromLocalStorage()
{
    try
    {
        inputCardData = await localStorage.GetItemAsync<List<FormData>>("inputCardData");
        // Initialize the list if it's null
        if (inputCardData == null)
        {
            inputCardData = new List<FormData>();
            //Initialize list with Default instance of FormData when nothing is stored in local storage
            FormData defaultFormData = new FormData();
            inputCardData.Add(defaultFormData);

        }
    }
    catch (Exception ex)
    {
        Console.WriteLine($"Error loading from local storage: {ex.Message}");
    }
}

这就是为什么无论您在何处初始化空的 

inputCardData

列表，都需要在其中包含默认的 FormData 实例。