Server-side Blazor page issues with parameters and OnInitialisedAsync

Question

I'm relatively new to Blazor, and I'm having issues with something that I would've thought would be rather simple - passing an integer as a route parameter. For reference, passing the parameter itself works perfectly (i.e. it appears in the address bar).

However, the issue is when I try to use that parameter on the new page - the idea is that the parent page is an accordion filled with various action items, and if you click the edit action on an item you're able to edit it in a new tab.

If I declare the page like this:

@page "/news/edit/{newsID}"

I get the associated error for converting from a string to an integer - which I expected. When I "fix" that error by declaring it like this:

@page "/news/edit/{newsID:int}"

I receive an error once the code enters the OnInitialisedAsync method - it's a null reference error on the BuildRenderTree for the page. For reference, this is my OnInitialisedAsync method:

protected override async Task OnInitializedAsync()
    {
        await Task.Delay(TimeSpan.FromSeconds(10));

        var authState = await authenticationStateTask;
        var user = authState.User;
        userName = user.Identity.Name;
        FACT_FranklinContextProcedures procedures = context.Procedures;

        categories = await procedures.spGetNewsCategoriesAsync();
        users = await procedures.spGetUsersAsync();

        List results = await procedures.spGetNewsItemAsync(newsID);
        newsItem = results.First();

        itemModel = new SaveNewsItemModel(newsItem.headline, newsItem.category, newsItem.content, newsItem.id);

        if (newsItem.requestedStartDate != null)
        {
            itemModel.RequestDates(newsItem.requestedStartDate.Value, newsItem.requestedFinishDate.Value);
        }

        if (newsItem.requester != null)
        {
            itemModel.AssignRequester(newsItem.requester.GetValueOrDefault());
        }

        var fileList = await procedures.spGetNewsItemFilesAsync(newsID);

        if (fileList.Count > 0)
        {
            foreach (var file in fileList)
            {
                itemModel.AddFile(file.fileID, file.newsItem, file.id, file.fileName, file.mimeType, context);
            }
        }

        MaxSize = 15 * 1024 * 1024;

    }

Is there any way for me to set the page up based on that parameter - or do I have to wait for the page to be drawn on the client-side before I can use the parameter?

EDIT - The Task.Delay was just me experimenting with a potential fix I'd found on my searches.

As per requests for further information:

It's this exception. I've attempted switching to OnParameterSetAsync as opposed to OnInitialisedAsync but had no luck

System.NullReferenceException
  HResult=0x80004003
  Message=Object reference not set to an instance of an object.
  Source=FIS2withSyncfusion
  StackTrace:
   at FIS2withSyncfusion.Pages.News.EditNews.BuildRenderTree(RenderTreeBuilder __builder)

The full file is:

@page "/news/edit/{newsID:int}"
@inject NavigationManager NavManager;
@inject FACT_FranklinContext context;
@inject IFileService fileService;
@inject IHttpClientFactory ClientFactory;
@inject IJSRuntime js;
@using FIS2withSyncfusion.Models;
@using FIS2withSyncfusion.Utility;
@using Syncfusion.Blazor.RichTextEditor;
@using System.Collections.Generic;
@using System.Threading.Tasks;
@using Newtonsoft.Json;


    
        Edit a News Item
    
    
        
            Title/Heading
            
                
            
        
        
            Category
            
                
                    
                
            
        
        
            On Behalf Of
            
                
                    
                
            
        
        
            
                
                    
                        
                    
                
                Suggest Dates This Should Be Active?
            
        
        @if (isChecked)
        {
            
                
                    
                        
                            Active From:
                        
                    
                    
                
            
            
                
                    
                        
                            Active Until:
                        
                    
                    
                
            
        }
        
            
                
            
        
        
            
                
                
            
        
    
    
        
            
            
        
    

@if (ShowDialog)
{
    
    
}

@code {
    [Parameter]
    public int newsID { get; set; }

    [CascadingParameter]
    Task authenticationStateTask { get; set; }

    public string userName { get; set; }

    private int MaxSize { get; set; }

    int count { get; set; }

    private bool ShowDialog { get; set; } = false;
    private string Message { get; set; } = "";
    private string OKText { get; set; } = "";
    private string CancelText { get; set; } = "";

    public DateTime activeTo { get; set; }
    public DateTime activeFrom { get; set; }

    private bool isChecked { get; set; }

    List DeniedAttributes = new List() {
        "id", "title", "style"
    };

    List uploadedFiles = new List();

    List categories = new List();

    List users = new List();

    SfDropDownList sfDropDown;

    SfDropDownList userDropDown;
    spGetNewsItemResult newsItem = new spGetNewsItemResult();

    SaveNewsItemModel itemModel;

    List Files = new List();
    SfUploader uploader;
    List files = new List();

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(TimeSpan.FromSeconds(10));

        var authState = await authenticationStateTask;
        var user = authState.User;
        userName = user.Identity.Name;
        FACT_FranklinContextProcedures procedures = context.Procedures;

        categories = await procedures.spGetNewsCategoriesAsync();
        users = await procedures.spGetUsersAsync();

        List results = await procedures.spGetNewsItemAsync(newsID);
        newsItem = results.First();

        itemModel = new SaveNewsItemModel(newsItem.headline, newsItem.category, newsItem.content, newsItem.id);

        if (newsItem.requestedStartDate != null)
        {
            itemModel.RequestDates(newsItem.requestedStartDate.Value, newsItem.requestedFinishDate.Value);
        }

        if (newsItem.requester != null)
        {
            itemModel.AssignRequester(newsItem.requester.GetValueOrDefault());
        }

        var fileList = await procedures.spGetNewsItemFilesAsync(newsID);

        if (fileList.Count > 0)
        {
            foreach (var file in fileList)
            {
                itemModel.AddFile(file.fileID, file.newsItem, file.id, file.fileName, file.mimeType, context);
            }
        }

        MaxSize = 15 * 1024 * 1024;

    }

    private List Tools = new List() {
        new ToolbarItemModel()
        {
            Command = ToolbarCommand.Bold
        },
        new ToolbarItemModel()
        {
            Command = ToolbarCommand.Italic
        },
        new ToolbarItemModel()
        {
            Command= ToolbarCommand.Underline
        },
        new ToolbarItemModel()
        {
            Command= ToolbarCommand.Separator
        },
        new ToolbarItemModel()
        {
            Command = ToolbarCommand.Undo
        },
        new ToolbarItemModel()
        {
            Command = ToolbarCommand.Redo
        },
        new ToolbarItemModel()
        {
            Command= ToolbarCommand.Separator
        },
        new ToolbarItemModel()
        {
            Command = ToolbarCommand.OrderedList
        },
        new ToolbarItemModel()
        {
            Command = ToolbarCommand.UnorderedList
        }
    };

    private async Task OnFileUpload(UploadChangeEventArgs args)
    {
        foreach (var file in args.Files)
        {
            var fileName = file.FileInfo.Name;
            using (var ms = file.Stream)
            {
                System.IO.FileInfo fileInfo = new System.IO.FileInfo(fileName);
                files.Add(fileInfo);
                var bytes = ms.ToArray();
                await fileService.SaveFileToTempAsync(bytes, fileName);
                itemModel.AddFile(fileName, fileInfo.Extension, context);
            }
        }
    }

    private async Task OnClearFiles(ClearingEventArgs args)
    {
        foreach (var file in args.FilesData)
        {
            var fileName = file.Name;
            System.IO.FileInfo fileInfo = new System.IO.FileInfo(fileName);
            itemModel.RemoveFile(fileName, fileInfo.Extension, context);
            fileService.DeleteTempFile(fileName);
        }
    }

    private async Task OnFileRemove(RemovingEventArgs args)
    {
        foreach (var file in args.FilesData)
        {
            var fileName = file.Name;
            System.IO.FileInfo fileInfo = new System.IO.FileInfo(fileName);
            itemModel.RemoveFile(fileName, fileInfo.Extension, context);
            fileService.DeleteTempFile(fileName);
        }
    }

    private async Task OnSave()
    {

        if (isChecked)
        {
            itemModel.RequestDates(activeFrom, activeTo);
        }
        else
        {
            itemModel.RevokeDates();
        }

        var procedures = context.Procedures;

        var addedFiles = await procedures.spEditNewsItemAsync(JsonConvert.SerializeObject(itemModel), userName);

        if (addedFiles.Count > 0)
        {
            foreach (var file in addedFiles)
            {
                await fileService.MoveTempToNewsAsync(file.fileName, file.newsID, file.fileID);
            }
        }

        Message = "This has been successfully saved and is now pending review; pressing OK will refresh the page.";
        OKText = "OK";
        ShowDialog = true;
    }

    private async Task OnDialogClose(bool r)
    {
        ShowDialog = false;
        NavManager.NavigateTo(NavManager.Uri, true);
    }
}

If push comes to shove I could just render this up as a dialog box, but I'd still like to get it sorted as a page so that I know how to get it working for future reference.

Further Edit:

As per Nicola's suggestion, I altered the OnInitialisedAsync method to the following:

   protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var authState = await authenticationStateTask;
            var user = authState.User;
            userName = user.Identity.Name;
            FACT_FranklinContextProcedures procedures = context.Procedures;

            categories = await procedures.spGetNewsCategoriesAsync();
            users = await procedures.spGetUsersAsync();

            List results = await procedures.spGetNewsItemAsync(newsID);
            newsItem = results.First();

            itemModel = new SaveNewsItemModel(newsItem.headline, newsItem.category, newsItem.content, newsItem.id);

            if (newsItem.requestedStartDate != null)
            {
                itemModel.RequestDates(newsItem.requestedStartDate.Value, newsItem.requestedFinishDate.Value);
            }

            if (newsItem.requester != null)
            {
                itemModel.AssignRequester(newsItem.requester.GetValueOrDefault());
            }

            var fileList = await procedures.spGetNewsItemFilesAsync(newsID);

            if (fileList.Count > 0)
            {
                foreach (var file in fileList)
                {
                    itemModel.AddFile(file.fileID, file.newsItem, file.id, file.fileName, file.mimeType, context);
                }
            }

            MaxSize = 15 * 1024 * 1024;

            StateHasChanged();
        }
    }

This has now worked provided protection around the HTML block against the correct variable.

To provide further context; here is the code for the accordion component that calls this page - essentially, the idea is for the user to be able to edit an accordion item, I'd figured doing the edit in a new tab would be better than blocking off the page with a large dialog box:

@page "/news/approvals"
@inject NavigationManager NavManager;
@inject FACT_FranklinContext context;
@inject IFileService fileService;
@inject IHttpClientFactory ClientFactory;
@inject IJSRuntime js;
@using FIS2withSyncfusion.Models;
@using FIS2withSyncfusion.Utility;
@using Syncfusion.Blazor.RichTextEditor;
@using System.Collections.Generic;
@using System.Threading.Tasks;
@using Newtonsoft.Json;


    
        News Items Pending Approval
    
    
        
            
                @foreach (var category in categories)
                {
                    
                        
                            @(category)
                        
                        
                            
                                
                                    @foreach (var item in newsResults.Where(x => x.category == category))
                                    {
                                        
                                            
                                                @(item.headline) -- Created by @(item.createdBy)
                                            
                                            
                                                
                                                    @((MarkupString)item.content)
                                                
                                                @if (item.files != null && item.files > 0)
                                                {
                                                    Files:
                                                    
                                                        @foreach (var file in newsFiles)
                                                        {
                                                            if (file.newsItem == item.id)
                                                            {
                                                                
                                                                    @(file.fileName)
                                                                
                                                            }
                                                        }
                                                    
                                                }
                                                
                                                    
                                                    
                                                    
                                                
                                            
                                        
                                    }
                                
                            
                        
                    
                }
            
        
    


@if (showDateDlg)
{
    
    
}

@if (showDeleteDlg)
{
    
    
}

@code {

    [CascadingParameter]
    Task authenticationStateTask { get; set; }

    public string userName { get; set; }
    private bool showDateDlg { get; set; } = false;
    private bool showDeleteDlg { get; set; } = false;
    private int selectedNewsID { get; set; }

    List newsResults = new List();
    List categories = new List();
    List expandedIndices = new List();
    int[] expandedIndicesArray;
    List newsFiles = new List();

    private string Message { get; set; } = "Are you sure you wish to delete this news item? Once deleted the page will refresh.";
    private string OKText { get; set; } = "OK";
    private string CancelText { get; set; } = "Cancel";

    private string GetIDForFile(int newsItem, Guid FileID)
    {
        return $"{newsItem}-{FileID}";
    }

    private void OpenApproveDialog(MouseEventArgs eventArgs, int newsID)
    {
        showDateDlg = true;
        selectedNewsID = newsID;
    }

    private async Task OnEditClick(MouseEventArgs eventArgs, int newsID)
    {
        await js.InvokeAsync

Nicola Biada · Accepted Answer

I think the problem is the itemModel (and hypothetically other properties/variables) that aren't declared when you try to access it.

You can protect you code with a check like this:

@if (itemModel == null)
{
    loading data...
}
else
{

...
}

Hint: remember that is a good practice to load the data only once.
If you load the data inside the OnInitialized method the calls to the backend will be done twice.
The first time for the prerendering (you can disable it, but it's the standard in Blazor), the second for the final rendering.

So is better to add a

protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await LoadDataAsync();
                StateHasChanged();
            }
        }

and create a method named LoadDataAsync with all the methods call.

Server-side Blazor page issues with parameters and OnInitialisedAsync

Answers (2)

Related Questions