Troubleshooting Controller in Blazor WASM project NET5 after app modernization

wavemaster 311

Redid a aspnet core 2.1 Blazor WASM project in NET5, just started from scratch as a I did not manage to follow the upgrade steps provided by Microsoft and we left with tens of error messages.

Initially the NET5 Blazor WASM app worked, but that was days ago and I have not been able to get it working again.

The code hits my .razor page and produces this 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')
at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
at System.Linq.Enumerable.CountUserName
at AccountManager.Client.Pages.Accounts.OnInitializedAsync() in C:\Users\Robert\source\Repos\AccountManager\Client\Pages\Accounts.razor:line 89
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Adding breakpoints does nothing. The above error message pops up in the console and that is it. Without the call to the api, breakpoints work as they should in that code.

Ok, so something is up with the Controller. Comparing things with the aspnet core 2.1 app I see that this WASM project has different launchsettings between .Client and .Server, i.e. the SSL port is different, and when I run the app I have two browser windows.

The new NET5 WASM project has the same SSL port for .Client and .Server.

Is this how things are supposed to be in NET5?

How can I test my API to figure out what is not working right?

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-05-13T01:41:16.913+00:00

Hi @wavemaster ,

According to your code, you are using try...catch statement to catch the exception, try to set a break point here or check the console window to check if there has any exception or not? If catches the exception, check the detailed message. Besides, about the API method, you could also set a break point to check whether the method is executed or not.
wavemaster 311 Reputation points

2021-05-13T01:53:29.88+00:00

Break point inside the action method is not getting hit, and the same for the breakpoint in the catch (Exception ex).

There is no other exception on the console, and the network tab shows 200 on dotnet.5.0.6.js.1

What are your thoughts on the SSL port being the same for the server and client projects. Is that how things are supposed to be?
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-05-13T02:37:36.08+00:00

Hi @wavemaster ,

About the using the same port in server and client projects. Since, the HttpClient service in Blazor WebAssembly apps is focused on making requests back to the server of origin. So, it will use the same port.

In the Network tools, try to click the "All" request and check the request URL and the response value. Whether you could get the data from the API method? And you could try to move the http.GetJsonFromAsync() method to the OnInitializedAsync() method and check if the code works. Besides, it seems that there has an error, please check the console tool, whether the issue relates that or not.

Finally, here is an article about Call a web API from ASP.NET Core Blazor, you can check it.
wavemaster 311 Reputation points

2021-05-13T15:33:22.537+00:00

First time starting this app today there was a status code 304, cleaned out the cache

Second time starting status code 200

Request URL: https://localhost:44334/api/UserName/All

The console shows the same message as what is in the OP. nothing else.

This is the UserNameController

With GetFromJsonAsync inside OnInitializedAsync() method: the exception is the same, except that it now says "unhandled exception rendering component: '<' is an invalid start of a value", which is to be expected considering the response is text/html because of the error message.
wavemaster 311 Reputation points

2021-05-13T20:59:43.76+00:00

I redid the entire app from scratch except I did not select the Individual User Accounts during setup.
Copied the files over and everthing works, unchanged.

Now I need to add the Authenication/Authorization back in.

Can you point to a Microsoft article that explains how to do this retroactively on a Blazor WASM app.
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2021-05-19T01:18:55.007+00:00

Hi @wavemaster ,

Now I need to add the Authenication/Authorization back in.

Can you point to a Microsoft article that explains how to do this retroactively on a Blazor WASM app.

Not sure which kind of Authentication are you using, but from your code, it looks that you want to implement JWT authentication, right? If that is the case, you could refer this article: Blazor WebAssembly - JWT Authentication Example & Tutorial. Otherwise, you could also refer the official document and use OpenID Connect (OIDC).