Attempting to load a record into a page using NavigateTo won't show controls inside the RadzenTemplateForm, what am I doing wrong?

Good afternoon! I am using Radzen Blazor Studio 1.56.2 to create a web app that will allow a person to enter a new record across five pages, as a record has a lot of fields and I am trying to split this up amongst several pages to keep a clean layout. My goal is to create the initial record with contact information, save the record, pass the recordID to the next page, add in new fields to update the record with, pass it to page 3, etc, etc, until completed.

The first page correctly saves the new record per the fields in its , then the NavigateTo method is then called to get to page 2 with the newly made record number passed through.

Page 1’s C# codebehind: (this navigation takes place after the save is completed in the FormSubmit function)

NavigationManager.NavigateTo($"/add-accident2/{redirectInt}");

Page 2 then loads up:

@page "/add-accident2/{RecordId:int}"

OnInitializedAsync is immediately called and should be getting the newly made record. However, none of the control fields inside is appearing.

The html’s header (which appears above the RadzenTemplateForm does show the new record number: ( Record Details for Record @RecordId ) so that’s passing through.

Using IntelliTrace in Visual Studio confirms the accident record is being loaded in memory in page 2’s .CS codebehind file. So I’m not sure why the page appears without the items inside the RadzenTemplateForm, yet header and content below the RadzenTemplateForm do. Per partial screencap, this is what I see when running a run/debug test:

The Radzen Blazor Studio workspace (see partial screencap below) recognizes all items and there are no red squiggles or other error conditions in the source code pane:

Why would this be happening, when no errors are encountered and the compile completes, but I end up with nothing in the RadzenTemplateForm when executing?

Thanks!

Hi @david.cole,

Could you paste the complete code of the AddAccident2 page? There could be invalid markup or a runtime exception happening which could prevent the page from rendering.

Will do. I’d sent a copy via email earlier, not sure if you got it.

Do you need the Razor page, .CS page, or both?

Thanks much!

Here’s the Razor frontend page:

@page "/add-accident2/{RecordId:int}"

@using System.Text.Json;

@using System.Text.RegularExpressions;

@inject NavigationManager Navigation

@attribute \[Authorize\]



<PageTitle>Add New Accident/Injury - Page 2 (Incident Info)</PageTitle>

<RadzenRow>

<h3>Record Details for Record @RecordId</h3>

</RadzenRow>

<RadzenRow>

    <RadzenColumn Size="12">

        <RadzenText Text="Incident Information" TextStyle="TextStyle.H3" TagName="TagName.H1" />

    </RadzenColumn>

</RadzenRow>

<RadzenAlert Shade="Shade.Lighter" Variant="Variant.Flat" Size="AlertSize.Small" AlertStyle="AlertStyle.Danger" Visible="@errorVisible">Unable to update record, please try again</RadzenAlert>

<RadzenTemplateForm 

    TItem="HRClaims.Models.ClaimsDB.Accident" 

    Data="@(accident)"

    Visible="true" 

    Submit="@FormSubmit">



   <RadzenRow style="margin-bottom: 1rem">

        <RadzenColumn SizeMD="12">

            <RadzenLabel Text="Date of Incident:" style="font-weight: bold; display: block; float: left; min-height: 40px; width: 58px; text-align: right; font-size: 12px; padding-right: 4px" />

            &nbsp;

            <RadzenDatePicker TValue="string" Style="width: 104px; float: left" ShowTime="false" @bind-Value="@dateInput"></RadzenDatePicker>

            &nbsp;&nbsp;

            <RadzenLabel Text="Time of Incident:" style="font-weight: bold; float: left; display: block; min-height: 40px; text-align: right; width: 60px; font-size: 12px; padding-right: 4px" />

            &nbsp;

            <RadzenDatePicker AllowClear="false" DateFormat="hh:mm tt" HourFormat="12" 

            PopupRenderMode="PopupRenderMode.Initial" 

            ShowTime="true" ShowTimeOkButton="true" style="width: 94px; float: left" TimeOnly="true" 

            Name="Datepicker2" class="my-timeonly-datepicker"

            @bind-Value="@timeOfDayInput" > 

            </RadzenDatePicker>

            &nbsp;&nbsp;

            <RadzenLabel Text="Day of Week:" style="font-weight: bold; width: 48px; min-height: 40px; display: block; float: left; text-align: right; font-size: 12px; padding-right: 4px" />

            &nbsp;

            <RadzenDropDown Name="DropDownDayOfWeek" 

                TValue="int?" AllowClear="true" 

                style="width: 114px; display: block; float: left;" 

                TextProperty="dowDayWeekName" 

                ValueProperty="dowDayWeekID"

                Data=@dayOfWeekList /> 

        </RadzenColumn>

   </RadzenRow>



<RadzenRow>

            <RadzenColumn SizeMD=7>

                <RadzenLabel Text="Building Information:" style="width: 98%; font-weight: bold; text-decoration: underline;" />

                <br />

                <RadzenLabel Text="Building where incident occurred:" style="float: left;" /> &nbsp;&nbsp;

                <RadzenDropDown Name="DropDownBuildingsList" 

                TValue="string" AllowClear="true" 

                style="width: 114px; display: block; float: left;" 

                Placeholder="Where incident occurred"

                TextProperty="BcoBuildingName" 

                ValueProperty="BcoBuildingId"

                Data=@buildingsList />

                <br /><br />

                <RadzenLabel Class="boldInfoNeededTextColors" Text="(Note: Selecting building will update address automatically)" style="width: 98%; text-align: right; font-style: italic; font-size: 7pt;" /><br />

                <RadzenLabel Text="Location of incident (e.g. 'Parking Lot B'):" />&nbsp;<RadzenTextBox Text="Text" @bind-Value="@accident.AccLocation"></RadzenTextBox><br />

                <RadzenLabel Text="Address" Component="Address" />

                <RadzenTextBox Style="width: 150px;" @bind-Value="@(accident.AccAddressLoss)" Name="AddressLoss" MaxLength="20" />

                <RadzenLabel Text="Township" Component="Township" />

                <RadzenTextBox Style="width: 150px;" @bind-Value="@(accident.AccTownship)" Name="Township" MaxLength="20" />

                <br />

                <RadzenLabel Text="City" Component="City" />

                <RadzenTextBox Style="width: 150px;" @bind-Value="@(accident.AccCity)" Name="City" MaxLength="20" />

                <RadzenLabel Text="State" Component="State" />

                <RadzenTextBox Style="width: 75px;" @bind-Value="@(accident.AccState)" Name="State" MaxLength="20" />

                <br />

                <RadzenLabel Text="Zip" Component="Zip" />

                <RadzenTextBox Style="width: 100px;" @bind-Value="@(accident.AccZip)" Name="State" MaxLength="20" />

            </RadzenColumn>

            <RadzenColumn SizeMD=5>

            <RadzenLabel Text="Description of Incident (Required):" style="width: 98%; font-weight: bold; text-decoration: underline;" />

            <br />

            <RadzenTextArea Placeholder="(required)" Name="descOfIncident" Style="width: 100%; height: 120px"></RadzenTextArea>

            <RadzenRequiredValidator Component="descOfIncident" Text="Description of incident is required" Style="position: relative;" />

            </RadzenColumn>

        </RadzenRow>



   <RadzenRow>

        <RadzenColumn>

                <br />

                <RadzenStack  Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End" Gap="0.5rem">

                <RadzenButton ButtonStyle="ButtonStyle.Light" Text="Reset Fields" Variant="Variant.Flat" Click="@CancelButtonClick"  />

                <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Icon="save" Text="Save and Continue" Variant="Variant.Flat" />

                <br />

                </RadzenStack>

            </RadzenColumn>

        </RadzenRow>



</RadzenTemplateForm>

Codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;

namespace HRClaims.Components.Pages
{
public partial class AddAccident2
{
    [Inject]
    protected IJSRuntime JSRuntime { get; set; }

    [Inject]
    protected NavigationManager NavigationManager { get; set; }

    [Inject]
    protected DialogService DialogService { get; set; }

    [Inject]
    protected TooltipService TooltipService { get; set; }

    [Inject]
    protected ContextMenuService ContextMenuService { get; set; }

    [Inject]
    protected NotificationService NotificationService { get; set; }

    // dpc added
    [Inject]
    protected NavigationManager navigationManager {get; set; }

    [Parameter]
    public int RecordId { get; set; }
    public string RecordName { get; set; }

    [Inject]
    protected SecurityService Security { get; set; }

    [Inject]
    public ClaimsDBService ClaimsDBService { get; set; }

    protected bool errorVisible;

    protected HRClaims.Models.ClaimsDB.Accident accident;

    protected IEnumerable<HRClaims.Models.ClaimsDB.ApprovedDeniedCode> approvedDeniedCodesForAccApprovedDeniedId;

    protected IEnumerable<HRClaims.Models.ClaimsDB.DaysOfWeek> daysOfWeeksForAccDayWeekId;

    protected IEnumerable<HRClaims.Models.ClaimsDB.IncidentTypeCode> incidentTypeCodesForAccIncidentTypeId;

    protected IEnumerable<HRClaims.Models.ClaimsDB.PolicyCode> policyCodesForAccPolicyCodeId;

    protected IEnumerable<HRClaims.Models.ClaimsDB.PreventOptionCode> preventOptionCodesForAccPreventOptionsId;

    protected IEnumerable<HRClaims.Models.ClaimsDB.SourceLossCode> sourceLossCodesForAccSourceLossId;

    protected IEnumerable<HRClaims.Models.ClaimsDB.WeatherCode> weatherCodesForAccWeatherCondition;

    protected IEnumerable<HRClaims.Models.ClaimsDB.Department> departments;

    protected IEnumerable<HRClaims.Models.ClaimsDB.BuildingCode> buildingsList;

    public HRClaims.Models.ClaimsDB.Accident myAccidentRecord { get; set;} 

    protected IEnumerable<HRClaims.Models.ClaimsDB.DaysOfWeek> dayOfWeekList;

    public string dateInput;
    public string timeOfDayInput;

    public IEnumerable<HRClaims.Models.ClaimsDB.TimeOfDay> timeOfDayList;

    protected override async Task OnInitializedAsync() // global function call failed as "protected override" is required
    {
        await LoadDropDowns2();

        accident = await ClaimsDBService.GetAccidentByAccRecId(RecordId);
    }

    public async Task LoadDropDowns2()
    {
        daysOfWeeksForAccDayWeekId = await ClaimsDBService.GetDaysOfWeeks();
        incidentTypeCodesForAccIncidentTypeId = await ClaimsDBService.GetIncidentTypeCodes();
        sourceLossCodesForAccSourceLossId = await ClaimsDBService.GetSourceLossCodes();
        dayOfWeekList = await ClaimsDBService.GetDaysOfWeeks();
        departments = await ClaimsDBService.GetDepartments();
        buildingsList = await ClaimsDBService.GetBuildingCodes();
    }

    protected async Task FormSubmit()
    {
        try
        {
            myAccidentRecord = await ClaimsDBService.GetAccidentByAccRecId(RecordId);
            
            await ClaimsDBService.UpdateAccident(RecordId, myAccidentRecord); 
            
            DialogService.Close(myAccidentRecord);

            if (ClaimsDBService.CreateAccident(accident).IsCompletedSuccessfully)
            {
                DialogService.Close(accident);

                // Now Navigate to the next page *after* the save is done
                NavigationManager.NavigateTo($"/add-accident3/{accident.AccRecId}", forceLoad: true);
            }
            else
            {
                DialogService.Close(accident);
                // Handle save failure (show message, stay on page)
                // await DialogService.Alert("Save Failed!");

            }
        }
        catch (Exception ex)
        {
            errorVisible = true;
        }



    }

    protected async Task CancelButtonClick(MouseEventArgs args)
    {
        DialogService.Close(null);
    }

    
}

}

Unfortunately we didn't get any email from you. Make sure to zip files before sending them as our email server is very strict. It would also discard attachments that contain binary files (.dll, .exe, et. al.).

I suspect this is the problem: accident is null initially and is initialized asynchronously. As a result using it before it is initialized would lead to a NullReferenceException e.g. in:

<RadzenTextBox @bind-Value="@(accident.AccTownship)" />

The solution is to hide the form until data is available:

<RadzenTemplateForm TItem="HRClaims.Models.ClaimsDB.Accident" 
    Data="@(accident)" 
    Visible="@(accident != null)" <!-- only render when accident is not null --!>
>

Thanks! I will try that and let you know later today if that fixes this issue. I will email via zip attachments in the future too.

Woohoo, that worked - thank you much! The page fully loads now.