Unhandled exception rendering component: '<' is an invalid start of a value

Question

Hi, I used blazor wasm and I just want rendering a datagrid via the controller.

Below you will find the detail of the code .

Have you an idea how I can fix this problem?

Thanks in advance

---

Data is located in LocalDb

 "ConnectionStrings": {
    "DefaultConnection": "Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=C:\\App\\sbd\\ServiceDT\\DataTable\\DataTable.mdf;Trusted_Connection=True;MultipleActiveResultSets=true"
  },

Api

    public class EtudeController : ControllerBase
    {

        private readonly ApplicationDbContext _context;
        public EtudeController(ApplicationDbContext context)
        {
            this._context = context;
        }

        [HttpGet]
        public async Task<IActionResult> Get()
        {
            var devs = await _context.SuiviBEs.ToListAsync();
            return Ok(devs);
        }

Razor page I call the api as below

SuiviBE[]? developers { get; set; }


   protected override async Task OnInitializedAsync()
   {
       developers = await client.GetFromJsonAsync<SuiviBE[]>("api/etude");
         
   }

I received the message :

blazor.webassembly.js:1 
        
       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
System.Text.Json.JsonException: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
 ---> System.Text.Json.JsonReaderException: '<' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 0.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
   at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first)
   at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
   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.Etude.OnInitializedAsync() in C:\App\sbd\ServiceDT\ServiceDT\Client\Pages\Etude.razor:line 62
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Answer 1

Hi @sblb ,

If you are using the Asp.Net Core Host template, in addition to what Michael Taylor said, you need to note that: Please make sure you are running server side, otherwise the return value you receive when calling the api is your error page. You can open the browser's developer tools to view the corresponding response results.

When running the server, you can see that calling the api returns the corresponding json data:

When running the client, you can see a piece of HTML error page returned:

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,

Chen Li

Answer 2

The API is returning back HTML and the client is expecting JSON and hence it reports the error. Given just the code you posted I'm guessing that your API is return HTML instead of JSON but that doesn't fit with what the default would be. So I wonder whether the route you're calling is actually correct. Try placing that api/etude URL directly in the browser window and see what comes back. If it is an error then that is what is causing the issue since it is returning an HTML error instead of JSON. You'll need to fix your path. On the controller side ensure that your controller is actually listening on api/etude. Unless you're not showing us some code then it appears that the URL is actually just etude. Add a Route attribute to the controller to resolve that.

Answer 3

the return value may be the html error page. use the browser's debugging tools to view.