0

Similar to this question from two years ago, I have a Blazor server-side app and the OnAfterRender() method isn't firing. If I set a breakpoint at the start of the method, the breakpoint isn't hit.

I created a minimal example page in my project:

@page "/index2"
<h3>Index2</h3>

<p>Message: @msg</p>

@code {
    private string msg = "Hello";
    private bool flag = false;

    protected override void OnAfterRender(bool firstRender)
    {
        if (!flag)
        {
            msg += " world";
            flag = true;
            StateHasChanged();
        }

    }

}

When I load this page, it displays "Message: Hello", without the "world" part ever appearing.

This is a project I haven't touched since in three months, and it worked perfectly a month ago. The only change I can think of is that I upgrading my OS to Windows 11. I have not tried running my project on Windows 10 yet; that may be my next attempt, but I'm hoping someone here has a more logical explanation. (Without a convincing reason why my OS would have an impact, that feels a bit like "magical thinking").

My _Host.cshtml has this as the final line in its body: <script src="_framework/blazor.server.js"></script>

My Startup.cs file has this as its last command in its Configure() method:

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }

My project targets .NET 6.0.

The frustrating thing is that I've spent 19 months on this project and it all worked beautifully. I upgraded from Visual Studio 2019 to Visual Studio 2022 and it still worked. It just suddenly stopped working after I upgraded my operating system to Windows 11.

What I've tried:

I tried the solutions suggested for this question and verified that my _Host.cshtml and Startup.cs had the code suggested there (which both already did).

I tried uninstalling Visual Studio 2022 and reverting to Visual Studio 2019. My project no longer loaded in Visual Studio 2019 because my installed version of MSBuild had changed, and I remembered that I had previously had the project working in Visual Studio 2022, so reverting there was probably a dead end anyway.

I tried creating a completely fresh Blazor project, and in that fresh project the OnAfterRender() method did work as expected! But I'm completely flummoxed as to what could have broken in this preexisting project.

Edit: This seems to be a SignalR issue. In the debug output, I get this error message:

Microsoft.Azure.SignalR.ServiceConnection: Error: Failed to connect to
 '(Primary)https://myproject-blazorservice-abc.service.signalr.net',
 will retry after the back off period. Error detail: The server returned
 status code '502' when status code '101' was expected..

My launchSettings.json file looked like this:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:9385",
      "sslPort": 44312
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.Azure.SignalR"
      }
    },
    "MyProject": {
      "commandName": "Project",
      "dotnetRunMessages": "true",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.Azure.SignalR"
      }
    }
  }
}

If I comment out the two lines referencing SignalR, that error message goes away and the pages load as expected. (When I created a fresh Blazor project, I noticed that the newly-created launchSettings.json did not have those two lines.)

Now, I don't know much about SignalR. My understanding is that it provides an API for real-time communication between client-side pages and server-side code. So I guess with SignalR not working, that communication broke down, such that the server side never got the message to run OnAfterRender(). Would that make sense?

This question suggests that the '502' status code might suggest an issue with an Azure account, which seems plausible; this app does connect to a SQL Server database on a friend's Azure account.

mdirks
  • 23
  • 5

2 Answers2

0

Take your code, paste it into index in a vanilla Blazor Server or WASM deployed project and it works. The OS version will make no difference. [Polite] There are things that you are telling us!

On OnAfterRender{async} usage, it should (in general) only be used to do JS interop stuff. The component has already rendered, why do something where you need to force it to render again! Anything that manipulates the component instance data and needs to call StateHasChanged to make it appear should be coded into the normal lifecycle events.

MrC aka Shaun Curtis
  • 19,075
  • 3
  • 13
  • 31
  • Interesting, I didn't realize that OnAfterRender should be only for JS Interop. I used it throughout my project to call methods on sub-components to make sure those components would not be null. Good learning! – mdirks Jan 21 '23 at 23:08
  • @MatthewDirks - some will tell you otherwise, but I'll happily have a discussion with them as to why. I rarely use it, and actually either disable it on `ComponentBase` based components, or don't implement it on my own components. `Null` values can be dealt without resorting to another trip though the expensive render cycle. Ask a question with an example. – MrC aka Shaun Curtis Jan 21 '23 at 23:41
  • I've asked that question [here](https://stackoverflow.com/questions/75197550/proper-use-of-onafterrender). I appreciate your time; thank you! – mdirks Jan 22 '23 at 00:30
0

Well, I still don't know why this was broken, but I did fix the problem. Maybe this will help someone in the future.

I created a new Blazor project, copied all my files into it (with relevant changes for namespaces etc), and OnAfterRender async seemed to work. Looking at the differences between the two, I noticed that the launchSettings.json files were different, so I copied the code from the newer launchSettings.json and replaced the old code with that (again, with relevant changes for namespaces etc.). Boom, things are working now in my original project.

I'm not happy about this... this is programming by coincidence and magical thinking ... but my project works again.

mdirks
  • 23
  • 5