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

just started with Blazor created my first app its a CRUD app with api. But i get this huge error and i can't figure out what is wrong and what it actual means? think something with the api links? I've tried the Unhandled exception rendering component: '<' is an invalid start of a value for Blazor WASM solutions but none of these seems to work for me. I'm using the blazor webassembly in visualstudio 17.2.0 with entityframework.

When i start my project i get this message at the bottom of my page :

An unhandled error has occurred. Reload

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, ReadOnlySpan1 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.JsonConverter1[[System.Collections.Generic.List1[[TreviData.Shared.Models.Ewons, TreviData.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].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.JsonConverter1[[System.Collections.Generic.List1[[TreviData.Shared.Models.Ewons, TreviData.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state) at System.Text.Json.JsonSerializer.ReadCore[List1](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state) at System.Text.Json.JsonSerializer.ReadCore[List1](JsonReaderState& readerState, Boolean isFinalBlock, ReadOnlySpan1 buffer, JsonSerializerOptions options, ReadStack& state, JsonConverter converterBase) at System.Text.Json.JsonSerializer.ContinueDeserialize[List1](ReadBufferState& bufferState, JsonReaderState& jsonReaderState, ReadStack& readStack, JsonConverter converter, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.<ReadAllAsync>d__651[[System.Collections.Generic.List1[[TreviData.Shared.Models.Ewons, TreviData.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext() at System.Net.Http.Json.HttpContentJsonExtensions.<ReadFromJsonAsyncCore>d__41[[System.Collections.Generic.List1[[TreviData.Shared.Models.Ewons, TreviData.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext() at System.Net.Http.Json.HttpClientJsonExtensions.<GetFromJsonAsyncCore>d__131[[System.Collections.Generic.List`1[[TreviData.Shared.Models.Ewons, TreviData.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext() at TreviData.Client.Pages.EwonDetails.GetUser() in C:\Users\toonw\source\repos\TreviData\TreviData\Client\Pages\EwonDetails.razor:line 73 at TreviData.Client.Pages.EwonDetails.OnInitializedAsync() in C:\Users\toonw\source\repos\TreviData\TreviData\Client\Pages\EwonDetails.razor:line 69 at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync() at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) window.Module.s.printErr @ blazor.webassembly.js:1 Fe._internal.dotNetCriticalError @ blazor.webassembly.js:1 St @ blazor.webassembly.js:1 _mono_wasm_invoke_js_blazor @ dotnet.6.0.5.wc6fu8n2ms.js:1 $func219 @ 00971e46:0x1a490 $func167 @ 00971e46:0xce5e $func166 @ 00971e46:0xbd71 $func2812 @ 00971e46:0xabf01 $func1616 @ 00971e46:0x6fcc2 $func1620 @ 00971e46:0x7032f $mono_wasm_invoke_method @ 00971e46:0x969d Module._mono_wasm_invoke_method @ dotnet.6.0.5.wc6fu8n2ms.js:1 managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17 (anonymous) @ dotnet.6.0.5.wc6fu8n2ms.js:1 Promise.then (async) _wrap_js_thenable_as_task @ dotnet.6.0.5.wc6fu8n2ms.js:1 _js_to_mono_obj @ dotnet.6.0.5.wc6fu8n2ms.js:1 _mono_wasm_invoke_js_with_args @ dotnet.6.0.5.wc6fu8n2ms.js:1 $func219 @ 00971e46:0x1a449 $func167 @ 00971e46:0xce5e $func166 @ 00971e46:0xbd71 $func2812 @ 00971e46:0xabf01 $func1616 @ 00971e46:0x6fcc2 $func1620 @ 00971e46:0x7032f $mono_wasm_invoke_method @ 00971e46:0x969d Module._mono_wasm_invoke_method @ dotnet.6.0.5.wc6fu8n2ms.js:1 managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17 (anonymous) @ dotnet.6.0.5.wc6fu8n2ms.js:1 Promise.then (async) _wrap_js_thenable_as_task @ dotnet.6.0.5.wc6fu8n2ms.js:1 _js_to_mono_obj @ dotnet.6.0.5.wc6fu8n2ms.js:1 _mono_wasm_invoke_js_with_args @ dotnet.6.0.5.wc6fu8n2ms.js:1 $func219 @ 00971e46:0x1a449 $func167 @ 00971e46:0xce5e $func166 @ 00971e46:0xbd71 $func2812 @ 00971e46:0xabf01 $func1616 @ 00971e46:0x6fcc2 $func1614 @ 00971e46:0x6fc34 $func967 @ 00971e46:0x50685 $func219 @ 00971e46:0x1a449 $func167 @ 00971e46:0xce5e $func166 @ 00971e46:0xbd71 $func2812 @ 00971e46:0xabf01 $func1616 @ 00971e46:0x6fcc2 $func1620 @ 00971e46:0x7032f $mono_wasm_invoke_method @ 00971e46:0x969d Module._mono_wasm_invoke_method @ dotnet.6.0.5.wc6fu8n2ms.js:1 managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_BeginInvokeDotNet @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_BeginInvokeDotNet:19 beginInvokeDotNetFromJS @ blazor.webassembly.js:1 b @ blazor.webassembly.js:1 e.invokeMethodAsync @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 ve @ blazor.webassembly.js:1 we @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 onGlobalEvent @ blazor.webassembly.js:1

Here is my code.

AddEwon.Razor

    @page "/ewon/add/"
    @page "/ewon/edit/{Id:int}"
    @using TreviData.Shared.Models
    @inject HttpClient Http
    @inject NavigationManager NavigationManager
    <h1>@Title Ewon</h1>
    <hr />
    <EditForm Model="@ewon" OnValidSubmit="SaveEwon">
        <DataAnnotationsValidator />
        <div class="mb-3">
            <label for="Name" class="form-label">EwonName</label>
            <div class="col-md-4">
                <InputText class="form-control" @bind-Value="ewon.EwonName" />
            </div>
            <ValidationMessage For="@(() => ewon.EwonName)" />
        </div>
        <div class="mb-3">
            <label for="Address" class="form-label">ApiKey</label>
            <div class="col-md-4">
                <InputText class="form-control" @bind-Value="ewon.ApiKey" />
            </div>
            <ValidationMessage For="@(() => ewon.ApiKey)" />
        </div>
    
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Save</button>
            <button class="btn btn-light" @onclick="Cancel">Cancel</button>
        </div>
    </EditForm>
    @code {
        [Parameter]
        public int Id { get; set; }
        protected string Title = "Add";
        protected Ewons ewon = new();
        protected override async Task OnParametersSetAsync()
        {
            if (Id != 0)
            {
                Title = "Edit";
                ewon = await Http.GetFromJsonAsync<Ewons>("api/ewon/" + Id);
            }
        }
        protected async Task SaveEwon()
        {
            if (ewon.Id != 0)
            {
                await Http.PutAsJsonAsync("api/ewon", ewon);
            }
            else
            {
                await Http.PostAsJsonAsync("api/ewon", ewon);
            }
            Cancel();
        }
        public void Cancel()
        {
            NavigationManager.NavigateTo("/fetchewondetails");
        }
    }

FetchData.Razor

  @page "/ewondetails"
@using TreviData.Shared.Models
@inject HttpClient Http
<h1>Ewon Data</h1>
<p>Ewons api-keys.</p>
<div class="row">
    <div class="col-md-6">
        <a href='/ewon/add' class="btn btn-primary" role="button">
            <i class="fas fa-ewon-plus"></i>
            Add Ewon
        </a>
    </div>
    <div class="input-group col">
        <input type="text" class="form-control" placeholder="Search Ewon by name"
               @bind="SearchString" @bind:event="oninput" @onkeyup="FilterUser" />
        @if (SearchString.Length > 0)
        {
            <div class="input-group-append">
                <button class="btn btn-danger" @onclick="ResetSearch">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        }
    </div>
</div>
<br />
@if (ewonList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table table-striped align-middle table-bordered">
        <thead class="table-success">
            <tr>
                <th>Id</th>
                <th>Ewon Name</th>
                <th>Api key</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var e in ewonList)
            {
                <tr>
                    <td>@e.Id</td>
                    <td>@e.EwonName</td>
                    <td>@e.ApiKey</td>
                    <td>
                        <a href='/ewon/edit/@e.Id' class="btn btn-outline-dark" role="button">
                            Edit
                        </a>
                        <a href='/ewon/delete/@e.Id' class="btn btn-outline-danger" role="button">
                            Delete
                        </a>
                    </td>
                </tr>
            }
        </tbody>

    </table>
}
@code {
    protected List<Ewons> ewonList = new();
    protected List<Ewons> searchEwonData = new();
    protected Ewons ewon = new();
    protected string SearchString { get; set; } = string.Empty;
    protected override async Task OnInitializedAsync()
    {
        await GetUser();
    }
    protected async Task GetUser()
    {
        ewonList = await Http.GetFromJsonAsync<List<Ewons>>("api/ewon");
        searchEwonData = ewonList;
    }
    protected void FilterUser()
    {
        if (!string.IsNullOrEmpty(SearchString))
        {
            ewonList = searchEwonData
                .Where(x => x.EwonName.IndexOf(SearchString, StringComparison.OrdinalIgnoreCase) != -1)
                .ToList();
        }
        else
        {
            ewonList = searchEwonData;
        }
    }
    protected void DeleteConfirm(int Id)
    {
        ewon = ewonList.FirstOrDefault(x => x.Id == Id);
    }
    public void ResetSearch()
    {
        SearchString = string.Empty;
        ewonList = searchEwonData;
    }

}

EwonController

using TreviData.Server.InterFaces;
using TreviData.Shared.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace TreviData.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UserController : ControllerBase
    {
        private readonly IEwons _IEwons;
        public UserController(IEwons iEwons)
        {
            _IEwons = iEwons;
        }
        [HttpGet]
        public async Task<List<Ewons>> Get()
        {
            return await Task.FromResult(_IEwons.GetEwonDetails());
        }
        [HttpGet("{Id}")]
        public IActionResult Get(int id)
        {
            Ewons ewon = _IEwons.GetEwonData(id);
            if (ewon != null)
            {
                return Ok(ewon);
            }
            return NotFound();
        }
        [HttpPost]
        public void Post(Ewons ewon)
        {
            _IEwons.AddEwon(ewon);
        }
        [HttpPut]
        public void Put(Ewons ewons)
        {
            _IEwons.UpdateEwonDetails(ewons);
        }
        [HttpDelete("{Id}")]
        public IActionResult Delete(int id)
        {
            _IEwons.DeleteEwon(id);
            return Ok();
        }
    }
}
apientity-frameworkerror-handlingblazorblazor-webassembly


Solution 1:[1]

I'm pretty sure the error is in the GetFromJsonAsync call returning nothing - there's a lot of code to plough through!

You are calling api/ewon/, but your controller is defined as:

    [Route("api/[controller]")]
    [ApiController]
    public class UserController : ControllerBase
/....

which has the url "api/user".

So sort out your controller name or your calls.

You should always test your APIs with Postman!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MrC aka Shaun Curtis

Related Questions

How can I project into the same DTO type twice?

How can I project into the same DTO type twice?

Unable to create an object of type 'DbContext'

The name 'EntityState' does not exist in the current context

EntityDataSource - how to do WHERE Clause from different table

EF4 code-first: defining object relationships, foreign keys

The type 'Company.Model.User' and the type 'Company.Core.Model.User' both have the same simple name of 'User' and so cannot be used in the same model

Unable to create an object of type 'MyContext'. For the different patterns supported at design time

The type initializer for 'System.Data.Entity.Migrations.DbMigrationsConfiguration`1' threw an exception

Construct DbGeography point from Latitude and Longitude doubles?

Update Entity from ViewModel in MVC using AutoMapper

IDbAsyncEnumerable not implemented

ASP.NET Core: Error while Updating Migration (Database first approach)

Get Dictionary value in IQueryable LINQ to Entities query

EF4 generated CRUD views having problems with the Create due to parent-child table relationship