Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor - Javascript Interop calls issue

$
0
0

I am unable to connect to my API service in my .NET Aspire project. From frontend, I have below razor component

.NET Core 8 using Blazor web application (razor.web.js)

Login razor component:

@page "/account/login"@rendermode @(new InteractiveServerRenderMode(prerender: false))@inject IAuthenticationService AuthenticationService;<fieldset disabled="@(expiration is not null)"><EditForm Model="this" OnValidSubmit="SubmitAsync" FormName="LoginForm"><div><label for="username">Username:</label><InputText @bind-Value="loginModel.Username" id="username" name="username" required /></div><div><label for="password">Password:</label><InputText type="password" @bind-Value="@loginModel.Password" id="password" name="password" required /></div><div><button type="submit">Login</button></div></EditForm></fieldset>@if (expiration is not null){<p>You are logged in until @expiration?.ToLongTimeString()</p>}@if (errorMessage is not null){<p class="error">@errorMessage</p>}@code {    private LoginModel loginModel = new LoginModel();    private DateTime? expiration;    private string? errorMessage;    private async Task SubmitAsync()    {        try        {            expiration = await AuthenticationService.LoginAsync(loginModel);            errorMessage = null;        }        catch (Exception ex)        {            expiration = null;            errorMessage = ex.Message;        }    }}

In LoginAsync method, the line

response = await _factory.CreateClient("authservice").PostAsJsonAsync("api/account/signin",                        JsonContent.Create(model, options: JsonSerializerOptions.Default));

throws the exception mentioned here:

System.InvalidOperationException: 'JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.'

For a reference, I am using SessionStorage in LoginAsync method but exception is thrown before that line.

I have tried setting prerender to false but nothing is working as expected. I tried examples provided in Microsoft documentation as well as suggestions in forums but nothing seems to be working.

I am unable to understand the root cause of the exception.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>