title: Blazor Server Cannot send data if the connection is not in the 'Connected' State
body: <p>In my Blazor project, I'm using two <code>_Host.cshtml</code> files. The first one is the default <code>_Host.cshtml</code> file. Another one is used to giving anonymous login access to a specific <code>.razor</code> page. Let's say that the anonymous razor page is <code>x.razor</code>.</p>
  <p>x.razor</p>
  <pre class="lang-cs prettyprint-override"><code>@page '\PublicRazor\x'
  ...
  </code></pre>
  <p>First Scenario</p>
  <blockquote>
  <p>I'm going to <code>x.razor</code> page without login. In this case, none of the functions in <code>x.razor</code> are working (like button click, form validation). When I check the developer console, I saw this
  <a href="https://i.stack.imgur.com/XFCxq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XFCxq.png" alt="enter image description here" /></a></p>
  </blockquote>
  <p>Second Scenario</p>
  <blockquote>
  <p>I'm goign to <code>x.razor</code> page after login to blazor app. In this case, all of the functions in <code>x.razor</code> are woking correctly. And developer console haven't any errors.</p>
  </blockquote>
  <p>Why is this happenning? How to bring <code>x.razor</code>'s all functions to woking state?</p>
  <p>Default _Host.cshtml</p>
  <pre class="lang-cs prettyprint-override"><code>@page &quot;/&quot;
  @using Microsoft.AspNetCore.Authorization
  @namespace has.Pages
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  @attribute [Authorize]
  @{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;has&lt;/title&gt;
      &lt;base href=&quot;~/&quot; /&gt;
      &lt;link href=&quot;_content/Blazor.ContextMenu/blazorContextMenu.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;script src=&quot;~/js/site.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;app&gt;
          &lt;component type=&quot;typeof(App)&quot; render-mode=&quot;Server&quot; /&gt;
      &lt;/app&gt;
  
      &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;_content/Blazor.ContextMenu/blazorContextMenu.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Other _Host.cshtml (Used to give anonymous access to <code>x.razor</code>)</p>
  <pre class="lang-cs prettyprint-override"><code>@page &quot;/publicrazor&quot;
  @using Microsoft.AspNetCore.Authorization
  @namespace has.Pages
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
  @attribute [AllowAnonymous]
  @{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;has&lt;/title&gt;
      &lt;base href=&quot;~/publicrazor&quot; /&gt;
      &lt;link href=&quot;_content/Blazor.ContextMenu/blazorContextMenu.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;script src=&quot;~/js/site.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;app&gt;
          &lt;component type=&quot;typeof(PublicApp)&quot; render-mode=&quot;ServerPrerendered&quot; /&gt;
      &lt;/app&gt;
  
      &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;_content/Blazor.ContextMenu/blazorContextMenu.min.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Startup.cs</p>
  <pre class="lang-cs prettyprint-override"><code>app.UseEndpoints(endpoints =&gt;
      {
         endpoints.MapControllers();
         endpoints.MapBlazorHub();
         endpoints.MapFallbackToPage(&quot;/_Host&quot;);
         endpoints.MapFallbackToPage(&quot;~/PublicRazor/{**segment}&quot;, &quot;/PublicRazor/_Host&quot;);
      });
  </code></pre>