CODEWITHSUNDEEP
asp.net-coreblazordotnet-httpclientblazor-webassembly
Dave
Dave

Reputation: 4028

Blazor WASM Http call is not hitting some API endpoints. Receiving index.html instead

I have a Blazor WASM page that need to make a call to get some data from an API. The Blazor app is ASPNetCore hosted, and the hosting app contains the API.

Some of my endpoints work, but some calls throw a Json serialization exception.

Unhandled exception rendering component: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.

If I look at the actual response from the server, it looks like it returns the content of index.html from my WASM app.

Example Controller

[Authorize]
[ApiController]
[Route("api/[controller]")]
public class CompanyController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public CompanyController(ApplicationDbContext context)
    {
         _context = context;
    }

    [HttpGet("{id}")]
    public async Task<IActionResult> Get(long id)
    {
        Company? company = await _context.Companies.FindAsync(id);
        if (company == null)
        {
            return NotFound();
        }

        return Ok(company);
    }
}

Example Blazor Page


@page "/companies/{id:long}"
@attribute [Authorize]
@inject HttpClient Http
@inject NavigationManager Nav


@if (company != null)
{
    <div>@company.Name</div>
}
else
{
    <div>Loading Company...</div>
}

@code {

    private Company? company;

    [Parameter]
    public long Id { get; set; }

    protected override async Task OnInitializedAsync()
    {
        try
        {
            company = await Http.GetFromJsonAsync<Company>($"/api/company/{Id}");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

In the example above, everything works as expected. But if I make the following two changes, I'll get the Json Exception mentioned above.

  1. Create an identical controller named WorkOrderController. Everything else is identical including pulling the Company data from the database. Only the name of the controller is different.
  2. Change the Http request to company = await Http.GetFromJsonAsync<Company>($"/api/workOrder/{Id}"); in the Blazor page.

Why would some endpoints work, and some wouldn't?

Upvotes: 3

Views: 1864

Answers (1)

Dave
Dave

Reputation: 4028

So, the requestUri passed to GetFromJsonAsync must be lowercase. My request was failing because I had a capital "O" in "workOrder".

I am not sure why this is a requirement of the request parameter, but alas, making the path lowercase fixed the issue.

Upvotes: 6

Related Questions