Search code examples
blazorblazor-client-side

Argument Null Exception when link pasted

I have a Blazor web assembly application with a main page and a nested component:

@page "/work/{CustomerId:guid}"

@using System.Diagnostics
@using ApplySupportTool.Client.I18nText
@using ApplySupportTool.Client.Services.Contracts
@using ApplySupportTool.Shared.Dto.Customer
@using Toolbelt.Blazor.I18nText

@inject I18nText Localization
@inject ICustomerApi CustomerApi

@attribute [Authorize]


<h3>@string.Format(localizedStrings.WorkOverviewTitle, Customer?.CustomerName)</h3>

<MatTabGroup>
    <MatTab Label="@localizedStrings.TimeTrackingLabel">
        <CascadingValue Value="@CustomerId">
            <TimeTrackingList />
        </CascadingValue>
    </MatTab>

    <MatTab Label="@localizedStrings.WorkItemsLabel">
        Work Items
    </MatTab>
</MatTabGroup>

@code {

    [Parameter]
    public Guid CustomerId { get; set; }

    public CustomerDto Customer { get; set; }
    LocalizedStrings localizedStrings = new LocalizedStrings();

    /// <inheritdoc />
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        localizedStrings = await Localization.GetTextTableAsync<LocalizedStrings>(this);
        Customer = await CustomerApi.GetCustomerByIdAsync(CustomerId);
    }
}

And the nested component:

@using ApplySupportTool.Client.I18nText
@using ApplySupportTool.Client.Components.Modals
@using ApplySupportTool.Client.Services.Contracts
@using Toolbelt.Blazor.I18nText

@inject I18nText Localization
@inject IModalService Modal
@inject ITimeTrackingApi TimeTrackingApi

@if (false)
{
    <LoadingDialog Title="@localizedStrings.LoadingLabel" IsOpen="true" />
} else
{
    <br />
    <MatButton Label="@localizedStrings.NewTimeTrackingLabel" Raised="true" OnClick="@OpenCreateTimeTrackingDialog" />

    <br />
    <br />

    ... 
    // Mat Blazor Accordion
}

@code {

    [CascadingParameter]
    public Guid CustomerId { get; set; }

    LocalizedStrings localizedStrings = new LocalizedStrings();

    public List<TimeTrackingDto> TimeTrackingDtoList = new List<TimeTrackingDto>();

    /// <inheritdoc />
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        localizedStrings = await Localization.GetTextTableAsync<LocalizedStrings>(this);

        TimeTrackingDtoList = await TimeTrackingApi.GetTimeTrackingAsync(CustomerId);
    }   
}

This works as expected when I navigate through the browser. But when I copy the link it generates and paste it again to load the page I get a lot of wasm errors:

enter image description here

I checked the pages I have a string.format but couldn't find that there is something wrong. So I assume that it might be in parsing the parameter or something like that.

Any idea how to fix this?

EDIT1: As suggested in the comments, I checked if the Guid is passed correctly. On the normal navigation it appears everywhere. But when I paste the link and navigate that way I only get it on the main page but it seems it isn't passed down to the nested component. I also tried to change replace the Guid Type with a default string parameter. But that didn't change anything. Neither did replacing the cascading parameter with a normal parameter.

Solution

  • I have the following code who shall display a dialog:

    <MatDialog @bind-IsOpen="@deleteCustomerDialogOpen" Style="z-index: 100">
    <MatDialogTitle>
        <MatIcon Icon="warning" />@localizedStrings.ConfirmDeleteTitle
    </MatDialogTitle>
    <MatDialogContent>
        @string.Format(localizedStrings.DeleteCustomerConfirmationMessage, SelectedCustomerDto?.CustomerName)
    </MatDialogContent>
    <MatDialogActions>
        <MatButton OnClick="@DeleteCustomerAsync">@localizedStrings.DeleteLabel</MatButton>
        <MatButton OnClick="@(e => { deleteCustomerDialogOpen = false; })">@localizedStrings.CancelLabel</MatButton>
    </MatDialogActions>
</MatDialog>

    And the localization is initialized as follows: LocalizedStrings localizedStrings = new LocalizedStrings();

    /// <inheritdoc />
protected override async Task OnInitializedAsync() {
    localizedStrings = await Localization.GetTextTableAsync<LocalizedStrings>(this);        
}

    The issue seems to be, that on a reload the the string.format is executed before localizedStrings was properly loaded. Therefore this caused the issues. I changed the code to the following which fixed it:

    @string.Format(localizedStrings.DeleteCustomerConfirmationMessage, SelectedCustomerDto?.CustomerName)