Unhandled exception rendering component: The input does not contain any JSON tokens.

Question

Hi,

I received the message in picture below when I want to rendering the datagrid in sidepanel.

I can't display the Action table. The first table is the classe SuiviBE.cs et la seconde table is ActionItem. FYI I use FK It's seems is well define.

I run my application Myapp.server

You will find below the extract of the code. How I can fix this problem? Thanks in advance

---

SuiviBE.cs

public class SuiviBE
    {
        [Key]
        public int SuiviBEId { get; set; }
        public string? Metier { get; set; }
        public string? ECR { get; set; }
        public string? ECO { get; set; }
        public string? FEE { get; set; }
        public string? Nadt { get; set; }
        public string? Prio { get; set; }
        public string? NivComplexe { get; set; }
        public DateTime? DfinP { get; set; }   // Deadline
        public DateTime? DfinR { get; set; }   // Achievement Date
        public DateTime? DValidFee { get; set; }
        public DateTime? Date { get; set; } //Initial Date
        public DateTime? DatePush { get; set; } // Push Date 
        [NotMapped]
        public string? CloseOn { get; private set; }
        public string? Statut {

            get
            {
                if (DatePush ==null)
                {
                    string var1;
                    var1 = "Open";
                    return var1;
                }
                else if (DatePush != null)
                {
                    string var2;
                    var2 = "Close";
                    return var2;
                }
                return CloseOn;
            }

            private set { }

        }
        public string? CodePrio { get; set; }
        public string? Description { get; set; }
      
        public List<ActionItem>? ActionItems { get; set; }
    }
      
    public class Ressource
    {

    }
    public class ActionItem
    {

        public int ActionItemId { get; set; }
        public string? Tilte { get; set; }
        public string? DescriptionA { get; set; }
        public string? State { get; set; }
        public DateTime? OpenDate { get; set; }
        public DateTime? PlanDate { get; set; }
        public DateTime? CloseDate { get; set; }

        public int SuiviBEId { get; set; }
        public SuiviBE SuiviBE { get; set; }
    }

In Etude.razor page I've put

       
         <SidepanelComponent @ref="createSidepanel" Title="Create" SubTitle="Actions">
            <FormCreateSidePanel act="@act" />
        </SidepanelComponent>
      
        <button @onclick="OpenCreateForm">Open Create Form</button>      
             

        <hr />
@code {
 ActionItem act = new ActionItem();

 private SidepanelComponent? createSidepanel;
 private string codeblock1 => "<SidepanelComponent @ref=\"createSidepanel\" Title=\"CreateSidePanel\"    SubTitle=\"Starship\">\n    <Create/>\n</SidepanelComponent>";
       
    private void OpenCreateForm() { createSidepanel.Open(); }

}

In FormCreateSidePanel.cs

<EditForm Model="@act"  OnValidSubmit="@OnValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary /> 

    

 <RadzenDataGrid @ref="gridaction" Data="@suiviAct.ActionItems" TItem="ActionItem"  AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" >

               <Columns>
                   <RadzenDataGridColumn TItem="ActionItem" Property="ActionItemId" Title="ActionId" Width="80px"/> 
                   <RadzenDataGridColumn TItem="ActionItem" Property="SuiviBEId" Title="DeveloperId" Width="80px"/>                      
                   <RadzenDataGridColumn TItem="ActionItem" Property="ECR" Title="Title" Width="80px"/>
                   <RadzenDataGridColumn TItem="ActionItem" Property="ECO" Title="Description" Width="80px"/>
                   
                   
               </Columns>
 </RadzenDataGrid> 

 </EditForm>


@code{

    RadzenDataGrid<ActionItem>? gridaction;

    [Parameter] public ActionItem? act { get; set; }  
    [Parameter] public EventCallback OnValidSubmit { get; set; }   
    [Parameter] public string ButtonAction { get; set; } = "Save";

    [Parameter] public int suivibeId { get; set; }

    SuiviBE suiviAct = new SuiviBE();
         
     protected override async Task OnInitializedAsync()
    {      

      suiviAct = await client.GetFromJsonAsync<SuiviBE>($"api/etude/{suivibeId}");

   }   

}

Answer 1

If the Web API action is returning the expected data but the caller is unable to deserialize the JSON, then the most likely cause is case sensitivity.

The official documentation to explains case insensitive

How to enable case-insensitive property name matching with System.Text.Json

var options = new JsonSerializerOptions
{
    PropertyNameCaseInsensitive = true
};
suiviAct = await client.GetFromJsonAsync<SuiviBE>($"api/etude/{suivibeId}", options);

Answer 2

Maybe the issue has to do with passing parameters to components? Component parameters

I read the article you gave me; I understand the parameters components but I can't apply it in my case because I don't know how to get the Id from the main line.

Answer 3

Right now I received this message error

blazor.webassembly.js:1 
        
       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: The input does not contain any JSON tokens. Expected the input to start with a valid JSON token, when isFinalBlock is true. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
System.Text.Json.JsonException: The input does not contain any JSON tokens. Expected the input to start with a valid JSON token, when isFinalBlock is true. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
 ---> System.Text.Json.JsonReaderException: The input does not contain any JSON tokens. Expected the input to start with a valid JSON token, when isFinalBlock is true. LineNumber: 0 | BytePositionInLine: 0.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.Read()
   at System.Text.Json.Serialization.JsonConverter`1[[ServiceDT.Shared.Models.SuiviBE, ServiceDT.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   --- End of inner exception stack trace ---
   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
   at System.Text.Json.Serialization.JsonConverter`1[[ServiceDT.Shared.Models.SuiviBE, ServiceDT.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[SuiviBE](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[SuiviBE](JsonReaderState& readerState, Boolean isFinalBlock, ReadOnlySpan`1 buffer, JsonSerializerOptions options, ReadStack& state, JsonConverter converterBase)
   at System.Text.Json.JsonSerializer.ContinueDeserialize[SuiviBE](ReadBufferState& bufferState, JsonReaderState& jsonReaderState, ReadStack& readStack, JsonConverter converter, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.<ReadAllAsync>d__65`1[[ServiceDT.Shared.Models.SuiviBE, ServiceDT.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpContentJsonExtensions.<ReadFromJsonAsyncCore>d__4`1[[ServiceDT.Shared.Models.SuiviBE, ServiceDT.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpClientJsonExtensions.<GetFromJsonAsyncCore>d__13`1[[ServiceDT.Shared.Models.SuiviBE, ServiceDT.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at ServiceDT.Client.Pages.FormCreateSidePanel.OnInitializedAsync() in C:\App\sbd\ServiceDT - Copie\ServiceDT\Client\Pages\FormCreateSidePanel.razor:line 45
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Answer 4

The webapi call is probably returning an html error or xml message. Use the browsers debug tools to see the response.

Answer 5

Systematically troubleshoot your code!

1. Use a tool like PostMan or Swagger to verify the GET is returning JSON. If the action returns the expected results then move to the next step.
2. Your screenshot shows that the Blazor code is sending a zero id parameter. This is probably a bug. Run your code through the debugger to figure out why the id is zero.
3. Your screenshot shows a POST is returning a 404. You did not share any code that does a POST so that is a bit of a mystery.