Blazor webapp and httpClient call API

Question

Blazor webapp and httpClient call API

prof cegep 41

Hello all of you

In my dataservice (client-side) I try to call controller API with this (the Id 36fc1b86-9697-49c5-978c-825f465de73b is hard coded to show the problem) :

return await JsonSerializer.DeserializeAsync<IEnumerable<Stage>>
(await _httpClient.GetStreamAsync($"api/stage/36fc1b86-9697-49c5-978c-825f465de73b"), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });

Server-side (API)

    [HttpGet("{id}")]
    public IActionResult GetAllStage(string id)
    {
        return Ok(_stageRepository.GetAllStagesById(id));
    }

And the error :

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Value cannot be null. (Parameter 'source')
System.ArgumentNullException: Value cannot be null. (Parameter 'source')

But if GUID starts with a letter (see below /a...) everything works #1 like this :

return await JsonSerializer.DeserializeAsync<IEnumerable<Stage>>
(await _httpClient.GetStreamAsync($"api/stage/a0bdb087-dadc-4382-9a28-75f93917698b"), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });

Workaround. I put a extra letter (here X) at the very begining :

return await JsonSerializer.DeserializeAsync<IEnumerable<Stage>>
(await _httpClient.GetStreamAsync($"api/stage/X{id}"), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });

And remove it in the API...

    [HttpGet("{id}")]
    public IActionResult GetAllStage(string id)
    {
        return Ok(_stageRepository.GetAllStagesById(id.Remove(0, 1)));
    }

Any idea about this bug?

Anonymous

2021-09-16T03:19:20.19+00:00
Hi @prof cegep ,

Cannot reproduce the problem on my side. I create a sample based on your code:

[HttpGet("{id}")] public IActionResult GetAllStage(string id) { return Ok("value: "+ id); }

And use the following code to call the API method:

using (HttpClient httpClient = new HttpClient()) { var downloadStream = httpClient.GetStreamAsync($"https://localhost:5000/api/todo/36fc1b86-9697-49c5-978c-825f465de73b").Result; //dosomething }

The result as below:

I suggest you can try to use F12 developer Network tool or fiddler to check the request, whether the request is correct or not? Besides, you can also create a new application to test this part of code. Because, in the above sample, I'm using Asp.net 5. If the code works well on the new application, the issue might relate other part of code, you'd better create a simple sample to reproduce the problem (you can share it via Github or OneDrive). Or as you said, you can add an extra letter at the beginning as a workaround.

2 answers

Your answer

Anonymous

2021-09-16T03:19:20.19+00:00

Hi @prof cegep ,

Cannot reproduce the problem on my side. I create a sample based on your code:

[HttpGet("{id}")] public IActionResult GetAllStage(string id) { return Ok("value: "+ id); }

And use the following code to call the API method:

using (HttpClient httpClient = new HttpClient()) { var downloadStream = httpClient.GetStreamAsync($"https://localhost:5000/api/todo/36fc1b86-9697-49c5-978c-825f465de73b").Result; //dosomething }

The result as below:

I suggest you can try to use F12 developer Network tool or fiddler to check the request, whether the request is correct or not? Besides, you can also create a new application to test this part of code. Because, in the above sample, I'm using Asp.net 5. If the code works well on the new application, the issue might relate other part of code, you'd better create a simple sample to reproduce the problem (you can share it via Github or OneDrive). Or as you said, you can add an extra letter at the beginning as a workaround.

Answer 1

AgaveJoe 30,491

Use the actual Guid type rather than a string. You might also want to handle null.

[HttpGet("{id:Guid?}")]
public IActionResult Get(Guid? id)
{
    return Ok(new { id = id ?? Guid.NewGuid() });
}

Answer 2

prof cegep 41

Helllo.

Thanks for this information. Still not working.

Share via

Blazor webapp and httpClient call API

2 answers

Your answer