'Blazor Server Cannot send data if the connection is not in the 'Connected' State

In my Blazor project, I'm using two _Host.cshtml files. The first one is the default _Host.cshtml file. Another one is used to giving anonymous login access to a specific .razor page. Let's say that the anonymous razor page is x.razor.

x.razor

@page '\PublicRazor\x'
...

First Scenario

I'm going to x.razor page without login. In this case, none of the functions in x.razor are working (like button click, form validation). When I check the developer console, I saw this enter image description here

Second Scenario

I'm goign to x.razor page after login to blazor app. In this case, all of the functions in x.razor are woking correctly. And developer console haven't any errors.

Why is this happenning? How to bring x.razor's all functions to woking state?

Default _Host.cshtml

@page "/"
@using Microsoft.AspNetCore.Authorization
@namespace has.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@attribute [Authorize]
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>has</title>
    <base href="~/" />
    <link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" />
    <script src="~/js/site.js"></script>
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="Server" />
    </app>

    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>
</body>
</html>

Other _Host.cshtml (Used to give anonymous access to x.razor)

@page "/publicrazor"
@using Microsoft.AspNetCore.Authorization
@namespace has.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@attribute [AllowAnonymous]
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>has</title>
    <base href="~/publicrazor" />
    <link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" />
    <script src="~/js/site.js"></script>
</head>
<body>
    <app>
        <component type="typeof(PublicApp)" render-mode="ServerPrerendered" />
    </app>

    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>
</body>
</html>

Startup.cs

app.UseEndpoints(endpoints =>
    {
       endpoints.MapControllers();
       endpoints.MapBlazorHub();
       endpoints.MapFallbackToPage("/_Host");
       endpoints.MapFallbackToPage("~/PublicRazor/{**segment}", "/PublicRazor/_Host");
    });
c++sharpasp.net-corerazorblazorblazor-server-side


Solution 1:[1]

I think that you have a problem with design: In Microsoft doc they said about AuthorizeRouteView class:

Combines the behaviors of AuthorizeView and RouteView, so that it displays the page matching the specified route but only if the user is authorized to see it.

  • You need to create a new layout but without AuthorizeView.
  • Dont forget to add @attribute [Authorize] to your _Imports.razor.

Please see this answer to apply the solution step by step. Link

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

Related Questions