Blazor Get Null Value Exception

Question

I already get the data from webapi. But it still show null value exception. it should be getting the data before rendering. also there is statement to check null already. it passed but still error

I already get the data from webapi. But it still show null value exception. it should be getting the data before rendering. also there is statement to check null already. it passed but still error

Razor component code

    @page "/rolepermission/{roleId}"
@inject HttpClient client
@inject IJSRuntime js

<h3>Roles</h3>
<small>Add as many role as you wish.</small>
<br />
<div class="card">
    <div id="viewAll" class="card-body table-responsive">
            <input asp-for="@permissionDto.RoleId" type="hidden" />
            <table class="table table-striped" id="permissionTable">
                <thead>
                    <tr>
                        <th>
                            Type
                        </th>
                        <th>
                            Permission
                        </th>
                        <th>
                            Status
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @if (permissionDto != null)
                    {
                        @foreach (RoleClaimsDto roleClaimsDto in permissionDto.RoleClaims)
                        {
                            <tr>
                                <td>
                                    <input @bind="roleClaimsDto.Type" type="hidden" />
                                    @roleClaimsDto.Type
                                </td>
                                <td>
                                    <input @bind="@roleClaimsDto.Value" type="hidden" />
                                    @roleClaimsDto.Value
                                </td>
                                <td>
                                    <div class="form-check m-1">
                                        <input @bind="roleClaimsDto.Selected" class="form-check-input" />
                                    </div>
                                </td>
                            </tr>
                        }

                    }
                </tbody>
            </table>
            <div class="col-sm-12" style="padding: 20px 20px 0px 0px">
                <button type="submit" id="save" class="btn btn-success">
                    <i class="fa fa-check"></i>
                    Save
                </button>
            </div>
       </div>
</div>



@code {
    [Parameter]
    public string roleId { get; set; }

    PermissionDto permissionDto = new PermissionDto();

    protected override async Task OnInitializedAsync()
    {
        permissionDto = await client.GetFromJsonAsync<PermissionDto>("api/permission/allPermission/" + roleId);
    }

    async Task AddNewRole()
    {
        //    await client.PostAsJsonAsync("api/roles", roleRequest);
        await OnInitializedAsync();
    }
}

This is my produced exception when accessing the route url.

    blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at PermissionBlazorApp.Client.Pages.User.RolePermissions.BuildRenderTree(RenderTreeBuilder __builder) in C:\Users\Chhin Sras\source\repos\PermissionBlazorApp\PermissionBlazorApp\Client\Pages\User\RolePermissions.razor:line 28
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

Answer 1

Probably your roleClaimsDto is null, so accessing it like roleClaimsDto.Type causes the null reference exceptions.

If you expect that there could be null objects in your enumerable, you could iterate through it using

@foreach (RoleClaimsDto roleClaimsDto in permissionDto.RoleClaims.Where(x => x != null))