Blazor

That Experimental Framework based on WebAssembly.

  • ASP.NET Core,  Blazor,  Microsoft

    The Server Side Blazor and SignalR Timeout

    So in my Blazor travels I ran across one (or another) annoying thing. In this one we will talk about that Server -Timeout? Disconnect? Retry? Not really sure which one it is.
    This affects Blazor Server Side where SinalR is being used between the browser and server side code.image

     

     

    I came across some Javescript that can go into the _Host.cshtml file.

    <script>
        // Wait until a 'reload' button appears
        new MutationObserver((mutations, observer) => {
            if (document.querySelector('#components-reconnect-modal h5 a')) {
                // Now every 10 seconds, see if the server appears to be back, and if so, reload
                async function attemptReload() {
                    await fetch(''); // Check the server really is back
                    location.reload();
                }
                observer.disconnect();
                attemptReload();
                setInterval(attemptReload, 10000);
            }
        }).observe(document.body, { childList: true, subtree: true });
    </script>

    Not really a solution but let’s see. The script is basic and checks the connection and reloads the page as needed.

    There’s a full run down here ASP Core Issues. Another good resource is this docs page ASP.NET Core SignalR configuration.

    Happy Blazor-ing!

    ~ScottGeek

     

  • Blazor,  Microsoft

    Blazor: And the Identity Scaffolding Mess

    Ok, back around to the annoying bin. Let’s talk adding Identity to a Blazor Web Assembly app…

    Out of the box when you start with a Blazor WebAss project using Identity and of course ASP Core hosted (I’m using preview 2). You then decide that all of the hidden razor pages really need to be customized (don’t even get me started on Hidden razor pages). Well there is a way to do just that.

    You Add Scaffolded Item to the Server project and select Identity (nope not going to show you that- there’s plenty of how-to on the internet). I wait while you go figure out how-to do that……   Wait  wait wait wait….

    All right, now you have those missing identity pages  up in Areas/Identity/Pages/Account – and you have an app that compiles and run, right? Well…. NO you don’t. Because now your app is broken… And that’s where we start… Let’s fix it.

    The Fix –

      RegisterConfirmation.chtml.cs  (if during your scaffold you selected the RegisterConfirmation page to include in the Areas/Identity/Pages/Account)
        You will need to add the reference using Microsoft.AspNetCore.Identity; – this is missing from the code behind.

      The Scaffold also creates an another wwwroot folder in the .Server project – The app runs into conflicts with css etc… 
        All you need to do here is delete the wwwroot folder from the .Server project. The Blazor will come up normal.

    Now, there maybe other compile errors depending on the mix of .dot core you have, etc. You will just need to work through those.

    Another annoying thing that happens when you mix Blazor and these older razor identity pages… is how the identity system works when you logout. Normally one likes to have the app navigate back to the home page when one logs out. This is doable but not in the box on the template.

    This is easy fix….

    In your client project in the Pages folder, you have a Authentication.razor file:

    @page "/authentication/{action}"
    @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
    <RemoteAuthenticatorView Action="@Action" />
    
    @code{
        [Parameter] public string Action { get; set; }
    }

    This is the default page… Let’s make a change…

    @page "/authentication/{action}"
    @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
    @inject NavigationManager navMGR
    <RemoteAuthenticatorView Action="@Action">
        <LogOutSucceeded>
          @{navMGR.NavigateTo("/");}
        </LogOutSucceeded>
    </RemoteAuthenticatorView>
    
    @code{
        [Parameter] public string Action { get; set; }
    }

    We injected the NavigationManager, because we want to navigate to the home page. 
     One see that in the RemoteAuthenticationView we have some options… LogOutSucceeded is a component option that allows us to do something, when the user has logged out with no errors. 
     This is good place to put a NavigateTo Blazor command… and as we see we can force the app (from the box) to go to the home page.

    Neat… 

    Now yes, the errors and problems are annoying… they have been for the scaffold for awhile now… but hopefully as Blazor moves out of preview, these things will be fixed.

    ~ScottGeek   Happy Blazoring….

     

     

     

     

     

  • Blazor,  Microsoft

    Blazor and EF Core to Nowhere land.

    In the long decent into “Experimental” frameworks- this one being Blazor, I’ve been finding some challenges with getting Blazor to work with the latest EF Core. There’s a few examples of Blazor being used with EF Core (i.e. the CRUD example that’s floating around the inter-Tubes), but nothing that seems to work with the latest Blazor Lang template in the latest VS release.

    One can go to a lower EF Core version, well mostly… I’ve yet to get my Blazor Hosted Core test app to compile…. let alone the DB-Context to Scaffold… it just spews errors no matter which direction I go in… Oh Bother….

    I have to remember that Blazor is “Experimental” – But it would be nice if would keep up with the forward moving components like EF Core and the latest VS releases. I wonder what all of the Blazor Template releases are doing- seems like each time I run up VS there’s a new Blazor Lang Update. Curious…