Blazor Server in .NET Core 3.0 scenarios and performance

Daniel Roth

Daniel

Since the release of Blazor Server with .NET Core 3.0 last month lots of folks have shared their excitement with us about being able to build client-side web UI with just .NET and C#. At the same time, we’ve also heard lots of questions about what Blazor Server is, how it relates to Blazor WebAssembly, and what scenarios Blazor Server is best suited for. Should you choose Blazor Server for your client-side web UI needs, or wait for Blazor WebAssembly? This post seeks to answer these questions, and to provide insights into how Blazor Server performs at scale and how we envision Blazor evolving in the future.

What is Blazor Server?

Blazor Server apps host Blazor components on the server and handle UI interactions over a real-time SignalR connection. As the user interacts with the app, the UI events are sent to the server over the connection to be handled by the various components that make up the app. When a component handles a UI event, it’s rendered based on its updated state. Blazor compares the newly rendered output with what was rendered previously and send the changes back to the browser and applies them to the DOM.

Blazor Server

Since Blazor Server apps run on .NET Core on the server, they enjoy all the benefits of running on .NET Core including great runtime performance and tooling. Blazor Server apps can leverage the full ecosystem of .NET Standard libraries without any browser imposed limitations.

When should I use Blazor Server?

Blazor Server enables you to add rich interactive UI to your .NET apps today without having to write JavaScript. If you need the interactivity of a single-page app in your .NET app, then Blazor Server is a great solution.

Blazor Server can be used to write completely new apps or to complement existing MVC and Razor Pages apps. There’s no need to rewrite existing app logic. Blazor is designed to work together with MVC and Razor Pages, not replace them. You can continue to use MVC and Razor Pages for your server-rendering needs while using Blazor for client-side UI interactions.

Blazor Server works best for scenarios where you have a reliable low-latency network connection, which is normally achieved when the client and server are geographically on the same continent. Apps that require extremely high fidelity instant updates on every tiny mouse twitch, like real-time games or drawing apps, are not a good fit for Blazor Server. Because Blazor Server apps require an active network connection, offline scenarios are not supported.

Blazor Server is also useful when you want to offload work from the client to the server. Blazor Server apps require only a small download to establish the connection with the server and to process UI interactions. All the hard work of running the app logic and rendering the UI is then done on the server. This means Blazor Server apps load fast even as the app functionality grows. Because the client side of a Blazor Server app is so thin, it’s a great solution for apps that need to run on low-powered devices.

Using Blazor Server at scale

Blazor Server can scale from small internal line of business apps to large internet scale apps. While .NET Core 3.0 was still in preview we tested Blazor Server to see what its baseline scale characteristics look like. We put a Blazor Server app under load with active clients and monitored the latency of the user interactions. In our tests, a single Standard_D1_v2 instance on Azure (1 vCPU, 3.5 GB memory) could handle over 5,000 concurrent users without any degradation in latency. A Standard_D3_V2 instance (4 vCPU, 14GB memory) handled well over 20,000 concurrent clients. The main bottleneck for handling further load was available memory. Will you see this level of scale in your own app? That will depend in large part on how much additional memory your app requires per user. But for many apps, we believe this level of scale out is quite reasonable. We also plan to post additional updates on improvements in Blazor Server scalability in the weeks ahead. So stay tuned!

What is Blazor WebAssembly?

Blazor is a UI framework that can run in different environments. When you build UI components using Blazor, you get the flexibility to choose how and where they are hosted and run. As well as running your UI components on the server with Blazor Server, you can run those same components on the client with Blazor WebAssembly. This flexibility means you can adapt to your users’ needs and avoid the risk of being tied to a specific app hosting model.

Blazor WebAssembly apps host components in the browser using a WebAssembly-based .NET runtime. The components handle UI events and execute their rendering logic directly in the browser. Blazor WebAssembly apps use only open web standards to run .NET code client-side, without the need for any browser plugins or code transpilation. Just like with Blazor Server apps, the Blazor framework handles comparing the newly rendered output with what was rendered previous and updates the DOM accordingly, but with Blazor WebAssembly the UI rendering is handled client-side.

Blazor WebAssembly

When should I use Blazor WebAssembly?

Blazor WebAssembly is still in preview and isn’t yet ready for production use yet. If you’re looking for a production ready solution, then Blazor Server is what we’d recommend.

Once Blazor WebAssembly ships (May 2020), it will enable running Razor components and .NET code in the browser on the user’s device. Blazor WebAssembly apps help offload work from the server to the client. A Blazor WebAssembly app can leverage the client device’s compute, memory, and storage resources, as well as other resources made available through standard browser APIs.

Blazor WebAssembly apps don’t require the use of .NET on the server and can be used to build static sites. A Blazor WebAssembly app is just a bunch of static files that can be hosted using any static site hosting solution, like GitHub pages or Azure Static Website Hosting. When combined with a service worker, a Blazor WebAssembly app can function completely offline.

When combined with .NET on the server, Blazor WebAssembly enables full stack web development. You can share code, leverage the .NET ecosystem, and reuse your existing .NET skills and infrastructure.

Including a .NET runtime with your web app does increase the app size, which will impact load time. While there are a variety of techniques to mitigate this (prerendering on the server, HTTP caching, IL linking, etc.), Blazor WebAssembly may not be the best choice for apps that are very sensitive to download size and load time.

Blazor WebAssembly apps also require a browser that supports WebAssembly. WebAssembly is supported by all modern browsers, including mobile and desktop browsers. However, if you need to support older browsers without WebAssembly support then Blazor WebAssembly isn’t for you.

Blazor WebAssembly is optimized for UI rendering scenarios, but isn’t currently great for running CPU intensive workloads. Blazor WebAssembly apps today use a .NET IL interpreter to execute your .NET code, which doesn’t have the same performance as a native .NET runtime with JIT compilation. We’re working to better address this scenario in the future by adding support for compiling your .NET code directly to WebAssembly instead of using an interpreter.

You can change your mind later

Regardless of whether you choose Blazor Server or Blazor WebAssembly, you can always change your mind later. All Blazor apps use a common component model, Razor components. The same components can be hosted in a Blazor Server app or a Blazor WebAssembly app. So if you start with one Blazor hosting model and then later decide you want to switch to a different one, doing so is very straight forward.

What’s next for Blazor?

After shipping Blazor WebAssembly, we plan to expand Blazor to support not just web apps, but also Progressive Web Apps (PWAs), hybrid apps, and even fully native apps.

  • Blazor PWAs: PWAs are web apps that leverage the latest web standards to provide a more native-like experience. PWAs can support offline scenarios, push notifications, and OS integrations, like support for pinning the app to your home screen or the Windows Start menu.
  • Blazor Hybrid: Hybrid apps are native apps that use web technologies for the UI. Examples include Electron apps and mobile apps that render to a web view. Blazor Hybrid apps don’t run on WebAssembly, but instead use a native .NET runtime like .NET Core or Xamarin. You can find an experimental sample for using Blazor with Electron on GitHub.
  • Blazor Native: Blazor apps today render HTML, but the renderer can be replaced to render native controls instead. A Blazor Native app runs natively on the devices and uses a common UI abstraction to render native controls for that device. This is very similar to how frameworks like Xamarin Forms or React Native work today.

These three efforts are all currently experimental. We expect to have official previews of support for Blazor PWAs and Blazor Hybrid apps using Electron in the .NET 5 time frame (Nov 2020). There isn’t a road map for Blazor Native support yet, but it’s an area we are actively investigating.

Summary

With .NET Core 3.0, you can build rich interactive client-side UI today with Blazor Server. Blazor Server is a great way to add client-side functionality to your existing and new web apps using your existing .NET skills and assets. Blazor Server is built to scale for all your web app needs. Blazor WebAssembly is still in preview, but is expected to ship in May of next year. In the future we expect to continue to evolve Blazor to support PWAs, hybrid apps, and native apps. For now, we hope you’ll give Blazor Server a try by installing .NET Core 3.0!

Daniel Roth
Daniel Roth

Principal Program Manager, ASP.NET

Follow Daniel   

58 comments

  • Avatar
    Jonas Lomholdt

    This is very cool! I’m looking very much forward to see how far you will take Blazor in the future. It seems the possibilities are endless 👍🏼

  • Avatar
    Adan Jauregui

    It would be great for Blazor Native plans to be extensible enough to be a .NET cross-platform UI development framework correctly adapted to the UI libraries provided by the operating systems.

  • Avatar
    Vincent Wright

    I like Blazor so far. The only issue is the constant loss of connection with the backend that requires the front end to refresh over and over again. It would be great if that worked better. I don’t like having to refresh the page every 5 minutes.

    • Daniel Roth
      Daniel Roth

      Hi Vincent,

      Are you seeing this just during development or in production? During development, Visual Studio will rebuild and restart the app when code file changes are made. This will result in the browser losing the connection and not being able to recover because all the server state is gone, so you need to refresh the browser to see the changes. The dev workflow is then edit, save, refresh.

      You shouldn’t see the connection get lost and require an browser refresh in production unless something is killing the app process on the server. If you’re having issues with this please file an issue and we’ll take a look: https://github.com/aspnet/aspnetcore/issues.

          • Avatar
            Vincent Wright

            I will see. This is hosted on a hosting provider, so I don’t have access to their logs. Just the generic logs. Any way to reliably know if they are resetting the connection? It happens about every 2 minutes. I was able to get it stable on production. I also implemented the refresh code and it works, but I would like to fix it properly.

          • Avatar
            Sebastiaan Dammann

            Blazor uses websockets, server sent events and long polling. The latter two are fallbacks. You might need to have websockets enabled on your hoster. I can imagine long polling connections are terminated.

          • Daniel Roth
            Daniel Roth

            Yeah, I agree with Sebastiaan that this might be an issue with using a transport other than WebSockets. Long polling should still work though. You can verify which transport is being used by looking at the browser console output and network trace. You might want to open an issue on GitHub with details about your setup so that we can better assist you.

  • Avatar
    Sebastiaan Dammann

    I very much enjoy working with Blazor Server. I’m currently building a retrospective app in it (similar to retrium). I like the almost no-effort real-time UI and state broadcasting that’s possible with Blazor. It does some time getting rid of the classic request/response mindset.

    Three things that annoy me a bit:
    – with edit and continue enabled I constantly get a “cannot continue because of code changes”
    – error handling is cumbersome, and almost everything is destructive to the current session. And if something happens, the user doesn’t see any indication something happened.
    – there appears to be no way to automatically test components

    • Daniel Roth
      Daniel Roth

      Thanks for this feedback, Sebastiaan!

      Have you filed a GitHub issue or Visual Studio feedback issue for the edit-and-continue issue you are seeing? It sounds like we should look into that.

      I’d love to get more details on what parts of error handling are cumbersome. Please also see our doc on error handling in Blazor.

      There are a couple of community projects for testing components that you should check out:
      http://blog.stevensanderson.com/2019/08/29/blazor-unit-testing-prototype/
      https://github.com/egil/razor-components-testing-library

      • Avatar
        Sebastiaan Dammann

        Hi Daniel,

        I’d love to get more details on what parts of error handling are cumbersome.

        The need to litter every callback with a try/catch mechanism to contain errors and show an error message. Having a global or per-component error handling routine would be nice. Some errors, like errors during callbacks are recoverable.

        In addition to the above, in some conditions an unhandled error won’t be visible to the user anymore. The user interface will be unresponsive and there does not appear to be way to show a general message that something went wrong.

        I also like to be able to attach loading logic while a callback or event is performed (or are events performed synchronously?).

        There are a couple of community projects for testing components that you should check out

        Yes, the latter is simply an HTML output matcher. The former doesn’t have a license so I cannot incorporate the testing code in my GPLv3 project, but allows to check for “interesting” points in the output.
        I believe that both approaches don’t allow “mocking” a component.

    • Hallam
      Hallam

      I think “– with edit and continue enabled I constantly get a “cannot continue because of code changes” Is not a problem from Blazor but Visual Studio itself. Sometimes without changing any code, first time something hits a breakpoint I get that whilst in a UWP project.

  • Avatar
    Michael Washington

    Thank you for posting this. I have been using Blazor for numerous projects for the past few months with no issues other than users on the other side of the world experiencing ‘sluggish’ connections. People in the same continent as me, no problems 🙂 Also, I host most of my server side Blazor projects on an Azure D1 plan (1 GB memory – $9 a month) but I make sure to go into -Configuration- then -General Settings- select “on” for -Web sockets- and then click the -Save- button.

  • Avatar
    Peter N. Moore

    Hey Dan thanks for this info! Is the source code for the Blazor server-side app you tested under stress available on Github anywhere? And what load testing framework did you use? Thanks!

    • Daniel Roth
      Daniel Roth

      Hi Peter,

      Not yet, but we are putting together a follow up blog post that will go into more detail on how we test scale out for Blazor Server and we will expect to share the infrastructure code at that point. The apps we tested were the default Blazor template and a Blazor Server port of the Blazing Pizza app used for the Blazor workshop (https://aka.ms/blazorworkshop).

  • Avatar
    Christophe Peugnet

    Thank you very much for this information. For one month I have been working at 75% on Blazor. That’s just great! Thank you for your work

  • Ben Hayat
    Ben Hayat

    Daniel, now that you guys are working on the Blazor client, PLEASE be sure we will get a C# Blazor Client library to connect to IdentityServer4 to give feature like adding new users, login/logout, password reset and etc. IS4 provides one for JS client library, but we need one for Blazor by release date.
    Thanks!

  • Avatar
    Cory Crooks

    At a high level, it sounds like Blazor Webassembly productization is mid-2020, but we shouldn’t expect AOT Blazor Webassembly until the .NET 5 (or maybe even 6?) timeframe?

    • Daniel Roth
      Daniel Roth

      There is ongoing AoT work for Blazor WebAssembly in progress, but we don’t have a committed time frame yet for when it will land. We’ll let you know as soon as we have more details!

  • Jason Chen
    Jason Chen

    I really like blazor, it’s a lot of fun to code.

    I ran into some issues deploying on Azure. This might be azure specific. I built a blazor server side app that does multiplayer games using signalr core. Basically I have another signalr core hub. This works fine on local machine. However, when I deploy to azure, I got errors:
    If I offload to Azure SignalR service, I’ll get error like: Error: The circuit failed to initialize.
    If I don’t use Azure SignalR service (just websocket), I’ll get error like: stem.Net.Http.HttpRequestException: An attempt was made to access a socket in a way forbidden by its access permissions. —> System.Net.Sockets.SocketException (10013): An attempt was made to access a socket in a way forbidden by its access permissions. at System.Net.Http.ConnectHelper.ConnectAsync

    If I removed my hub, it works fine.

    I also commented on issue: #10475

  • Vesela Gerasimova
    Vesela Gerasimova

    Hello,
    You’ve done a great work so far! We are about to start developing quite a big app, that will be concurrently used from thousands of clients that will be able to create a workflow diagrams, generally speaking. What we are mostly concerned about is the connection reliability and server load so we really need to use the client side approach. How realistic in your opinion is to have Blazor with webAssembly shipped on time? Fully functional? How big do you expect it to be the deployment footprint of the additional dlls that need to be shipped to the client? Do you plan for being able to modify DOM from WebAssembly in this first official release? Should we expect slower user experience because of having one more layer of code (js between the webassembly and DOM) ?

    • Vesela Gerasimova
      Vesela Gerasimova

      We are also kind of concerned because we had been very enthusiastic in the close past about that kind of cutting edge technologies and we failed …. with silverlight 🙁 I still miss it however, but it brings bad memories to the management.

      • Daniel Roth
        Daniel Roth

        Hi Vesela,

        We are planning to ship a stable and supported release of Blazor WebAssembly in May 2020. The size of a default Blazor WebAssembly app is currently ~2.4MB compressed, which includes the .NET runtime, your app, all of it’s dependencies, Bootstrap, and the bootstrapping JS files. We don’t expect this size to increase significantly before we ship, and we hope to further decrease it.

        You don’t typically modify the DOM directly from a Blazor app, because the Blazor framework handles that for you. You write components that render to an in-memory representation of the DOM called a render tree. Blazor then handles figuring out what changed and applies the changes to the actual DOM. If you need to manipulate the DOM directly you can still do that using JS interop, but you shouldn’t modify DOM elements that Blazor is tracking, as this will likely mess up Blazor’s change tracking algorithm.

        Blazor WebAssembly works great for normal UI workloads, in part because of how it efficiently updates the DOM. However, Blazor WebAssembly is not currently so good for CPU intensive workloads. The .NET runtime used by Blazor WebAssembly apps is today a .NET IL interpreter, so it doesn’t get any of the performance benefits of doing JIT compilation. You probably wouldn’t want to write a ray tracer in Blazor WebAssembly. We are working to improve the performance of Blazor WebAssembly apps by providing support for ahead of time compilation to WebAssembly, but this is not expected to be part of the initial release in May. Instead, we would recommend either offloading CPU intensive logic to the server or implementing performance sensitive logic in JS/WebAssembly directly and then calling into it using JS interop.

        We also understand the concerns about Blazor potentially being another Silverlight, but Blazor differs from Silverlight in a couple of important ways: Unlike Silverlight, Blazor is based purely on open web standards: HTML, CSS, and WebAssembly. Silverlight was based on a proprietary browser plugin. Blazor is also open source and community driven from the start. Regardless of Microsoft’s level of investment, you always have access to the entire Blazor source code and to a supportive community.

        I hope this helps!

        • Vesela Gerasimova
          Vesela Gerasimova

          Thanks for your reply! Unfortunately the management decided to go for js but we are still about to try it for an internal project.

    • Daniel Roth
      Daniel Roth

      Great question!

      Blazor is a client-side web UI framework based on .NET and C# instead of JS.

      Razor is a syntax used to generate dynamic content using a combination of markup and C#.

      Razor syntax is used in Blazor to author the rendering logic for components (.razor files). Browser + Razor = Blazor!

      Razor is also used to author dynamic MVC views and Razor Pages (.cshtml files).

      • Avatar
        Fleet Command

        Let’s see if I got it right: A developer creates a .razor file that contains both HTML tags and C# code, mingled in conformance to a set of rules called Razor. The browser loads Blazor (metonymically speaking) and Blazor loads the .razor file, giving life to a web app that may or may not communicate with a Blazor Server.

        Now, since Blazor is a web framework, all of this C# and HTML ultimately become JavaScript? Or WebAssembly?

        • Daniel Roth
          Daniel Roth

          Hi Fleet,

          Blazor apps can be hosted in a couple of different ways: on the server, or on WebAssembly.

          When hosted on WebAssembly, the browser downloads a WebAssembly based .NET runtime along with your app and then runs the built .NET assemblies directly in the browser. Blazor WebAssembly apps are just a bunch of static files, so they don’t require any server component at all other than some way to host the files.

          Blazor Server apps instead run on the server and set up a real-time connection with the browser to handle all UI interactions.

          For a full overview of what Blazor is and how it works see https://docs.microsoft.com/aspnet/core/blazor/.

          I hope this helps!

  • Cesar Maroun
    Cesar Maroun

    Blazor is very cool. It feels like Angular but in the powerful C# (but then again Angular seemed to me a bit like Web Forms but in TS/JS).
    You say: “You can change your mind later”.
    Are there any best practices to pay attention to in order to really be able to do that ?

    Blazor (and razor pages) are (to me) just like another version of Web Forms.
    The problem with Web Forms was that it was very easy to write business logic in the code behind without paying attention, this is also true for Blazor.
    If we do that, then we won’t be able to switch to WebAssembly. At least not without exposing business logic.

    The way I see we must at least
    1. Have a separate library (dll) for logic
    2. Find some way to simulate calling an api on the server even though we can just call or inject a local service.
    3. Find a way to make (2.) switch automatically to a server call when we move to WebAssembly.

    I’d like to add two more things:

    SignalR errors.
    It would be nice if the SignalR errors would be reported on-screen and not only in the console.
    What happens now is the application stops working and just like a disabled button on a form, we have to start guessing why it isn’t working instead of telling us what’s missing.

    DataBinding
    In continuation to (1.) regarding the no-feedback behavior.

    The documentation states that:
    “When a user provides an unparsable value to a databound element, the unparsable value is automatically reverted to its previous value when the bind event is triggered.”

    This is terrible behavior because:
    a. No regular user will notice that change since a regular user doesn’t usually look at the screen while typing. This is the same terrible behavior that blocks characters on a field or stops accepting when the max length is reached, etc… the final result is never what the user intended

    b. This forces the user to start all over again instead of just fixing it (Typing 12e45 results in 1245 which makes no sense. However, leaving 12e45 gives a user a chance to see the mistake and fix it to 12345)

    Another example from the documentation:
    “the reversion occurs after any keystroke that introduces an unparsable value. When targeting the oninput event with an int-bound type, a user is prevented from typing a . character. A . character is immediately removed, so the user receives immediate feedback that only whole numbers are permitted”

    This is absolutely wrong. The user does not get any feedback at all, since he/she is probably still typing and not looking at the screen.
    Another wrong thing is assuming the user will understand that preventing the “.” means that only integers are allowed, this is not “Do not make me think”. The first thought will be that something is wrong with the keyboard or language settings… I saw that happen more than a few times.

    There has to be a way to display the exact value the user typed so that the user can fix it.
    This behavior exists in angular and it allows to show errors to the user instead of making him guess. (through ngModelOptions => allowInvalid)

    • Daniel Roth
      Daniel Roth

      Hi Cesar,

      Blazor Server and Blazor WebAssembly both use the same component model, so the same UI code can be used with both hosting models. However, you are correct that you can still write server or browser specific code in your components, which would then tie those components to the hosting model. To keep your components hosting model agnostic, you should factor hosting model specific code into different service implementations and have the components depend just on the service contract.

      We are working on providing a better dev time exception handling experience for 3.1. More details on that soon.

      For the data binding issue, I think it’s best if we discuss that one in a GitHub issue. Please open an issue at https://github.com/aspnet/aspnetcore/issues with your feedback.

      Thanks for using Blazor!

      • Cesar Maroun
        Cesar Maroun

        Hi Daniel.
        Thanks for your reply.

        I will open an issue about data binding. However, I didn’t quite understand your answer for the first point regarding my concerns.

        Let’s say all the logic is implemented using services, those services still don’t make Http requests but access the DBContext/Internal Business logic directly.
        This means that if we decide to move to WebAssembly, we are going to have to rewrite parts of those services to actually call a remote api ?
        Or do you mean that we should implement some kind of HttpRequest dummy as a layer between the public service and the DbContext/Internal Businnes logic and later replace it ?

        Take this simple service.
        How will it work with dbContext ?
        How will the SecretCalculator not unintentionally leak to the client when moving to WebAssembly ?

        public class WeatherService
        {
        private DbContext _dbContext;
        private WeatherSecretCalculator _sercretCalulator;

        public WeatherService(DbContext dbContext, WeatherSecretCalculator sercretCalulator)
        {
        _sercretCalulator = secretCalculator;
        _dbContext = dbContext;
        }

        public async Task GetTemprature()
        {
        var someDbValue = await _dbContext…
        return await _sercretCalulator.Calculate(someDbValue);
        }
        }

          • Daniel Roth
            Daniel Roth

            Hi Cesar,

            You would need to provide separate service implementations for your Blazor WebAssembly app that make web API calls. But by coding your components to a service interface, your component logic wouldn’t need to change. I wouldn’t not recommend trying create some sort of dummy HTTP request abstraction for the server.

            So for your WeatherService example, you would create an IWeatherService interface and then provide two different implementations: one for the server that talks directly to the database , and the other for the client that makes web API calls.

  • Giuseppe Falce
    Giuseppe Falce

    Hi Daniel

    I have already quiet a big application (ASP.NET Core) in production, and I’m planning to integrate Blazor. Currently evaluating both WebAssembly and Server.

    Did I understood it correctly: A Razor Component, can only be integrated with an existing MVC View using Blazor Server (it’s not possible to do it with WebAssembly)?

    Would appreciate a short answer.

    Many thanks
    Giuseppe

    • Daniel Roth
      Daniel Roth

      Hi Giuseppe,

      You can integrate both Blazor Server and Blazor WebAssembly into an existing ASP.NET Core app. Integrating Blazor WebAssembly is like integrating some JS – it’s just a bunch of static files. However, please note that Blazor WebAssembly is still in preview and not ready for production use yet. If you’re trying to deploy into production now, then Blazor Server is what we would recommend.

      • Giuseppe Falce
        Giuseppe Falce

        Hi Daniel

        Thanks for your reply, much appreciated. I think my question was a bit unclear.

        Let’s assume I have a MVC App with a View “Home.cshtml” that is served by a Controller “HomeController”.
        In the view I can integrate a component like that

        @(await Html.RenderComponentAsync<MyAwesomeComponent>(RenderMode.[OneOfTheOptions]))

        In my understanding this scenario only works, if the MVC App is enabled for Blazor Server. ( Or is the RenderMode.Static also suitable for WebAssembly?)

        Many thanks
        Giuseppe

          • Giuseppe Falce
            Giuseppe Falce

            Hi Daniel

            Thanks again for your help. I managed to adapt your app (try and error). However not really fully understanding what i’m doing 🙂

            What I did:

            In Startup.cs of the client:

            app.AddComponent<Counter>("counter");
            app.AddComponent<Awesome>("awesome");
            

            Then I created 2 razor pages MyTest.cshtml and MyTest2.cshtml

                <awesome>
                    @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static))
                  </awesome>
            
                <counter>
                    @(await Html.RenderComponentAsync<Counter>(RenderMode.Static))
                </counter>
            
                <script src="_framework/blazor.webassembly.js"></script>
            
                @* To make this work, you need to 
                    call
                        app.AddComponent<Awesome>("awesome"); 
                    before 
                        app.AddComponent<Counter>("counter");
                    in
                        BlazorWebAssemblyWithPrerendering.Client.Startup
            {
                *@
                <awesome>
                    @(await Html.RenderComponentAsync<Awesome>(RenderMode.Static))
                </awesome>
            
            
                <script src="_framework/blazor.webassembly.js"></script>

            While MyTest.cshtml works fine, MyTest2.cshtml doesn’t. (Because of the AddComponent<> sequence in Startup.cs)

            Did I use it as intended or am I on the wrong path?

            The Forked and adapted code is here https://github.com/geeForceOne/BlazorWebAssemblyWithPrerendering

            Many thanks

  • Avatar
    Kemp Calalo

    Hi Daniel,

    We are currently trying to understand Blazor Server side and we struggle to do a use case that we think it suitable for Blazor Server. This might be a stupid question but I’ll ask it anyways.

    So in the basic template when creating a Blazor project, we have a WeatherForecastService that provides the data when it is called by the FetchData.razor component.

    @code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
    

    }

    Now, what we want to achieve is to update this “forecast” object not from the razor component, but from the “WeatherForecastService” or any other different layer. How can we do that? In essence, what we like to do is update the DOM once we have a new data in our database. We think that to do that, we need to update the “forceasts” object from a different layer, and then when Blazor detects that forecasts object has changed, then it updates the DOM on its own.

    Thanks!

    • Avatar
      Larsson, Henrik

      You could handle that by polling or by registering to some event. Then, make sure you inject your

      Make your component register to an event (such as OnNewForecasts or similar). Then, update from service and call StateHasChanged() Of course, you could bake in the actual forecast in the eventargs itself. This is just an example:

      @code {
      
          protected override void OnInitialized() {
              ForecastService.NewForecasts += OnNewForecasts;
          }
      
          private void OnNewForecasts() {
      
              forecasts = ForecastService.Get();
              StateHasChanged();
          }
      }
  • Avatar
    Dee Santiago

    Hi Daniel,
    I’m really excited that we can develop web application using C# all the way to the client side. I’m currently working on a Blazor Server Side internal application using JQuery DataTables to list the data and then I use the Blazorise Modal to display the individual objects for editing purposes.
    I have everything working via the “Happy Path” and now I want to now handle scenarios when errors occurred.
    I’m currently experiencing 2 issues
    1) I want to create a .NET Standard 2.0 Class Library Project where I can do NUnit Testing and I can’t add a reference to the Blazor Server Project and get errors.
    Here’s the error message I see:

    Error Project ‘{project path}’ targets ‘netcoreapp3.0’. It cannot be referenced by a project that targets ‘.NETStandard,Version=v2.0’.

    I saw Steve Sanderson’s post on Blazor Unit Testing and downloaded his prototype but it’s no longer compiling and throws this error message:

    Severity Code Description Project File Line Suppression State
    Error MSB3073 The command “dotnet “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.build\3.0.0-preview9.19424.4\targets../tools/Microsoft.AspNetCore.Blazor.Build.dll” resolve-dependencies “C:{path}\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\SampleApp.dll” –references “C:{path}\04\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\blazor\resolve-dependencies.txt” –base-class-library “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.mono\3.0.0-preview9.19421.1\build\netstandard1.0../../tools/mono/bcl/” –base-class-library “C:{path}.nuget\packages\microsoft.aspnetcore.blazor.mono\3.0.0-preview9.19421.1\build\netstandard1.0../../tools/mono/bcl/Facades/” –output “C:{path}\Documents\BlazorUnitTestingPrototype-master\SampleApp\obj\Debug\netstandard2.0\blazor\resolved.assemblies.txt”” exited with code 1. SampleApp C:{path}.nuget\packages\microsoft.aspnetcore.blazor.build\3.0.0-preview9.19424.4\targets\Blazor.MonoRuntime.targets 533

    2) I want to display a user friendly error from within the Blazorise Modal. Currently when it’s successful I display an “update successful message” but now I want to show an friendly error message when it fails and I can’t. I followed the instructions here but I’m not able to get it to work. Here’s what my Update method looks like:

    @code {
    [CascadingParameter] ModalParameters Parameters { get; set; }
    bool ShowForm { get; set; } = true;
    bool Success { get; set; } = true;

    protected bool IsUpdating { get; set; }

    [Parameter]
    public WeatherForecast forecast { get; set; }

    protected override void OnInitialized()
    {
    forecast = Parameters.Get<WeatherForecast>("forecast");
    }

    protected override void OnAfterRender(bool firstRender)
    {
    if(Success)
    {
    ShowForm = false;
    }
    }

    private async Task SubmitData()
    {
    try
    {
    IsUpdating = true;
    StateHasChanged();
    throw new Exception("This is a test exception");
    //here id put a call to an endpoint to submit data...
    ShowForm = false;
    Success = true;
    IsUpdating = false;
    StateHasChanged();
    }
    catch(Exception ex)
    {
    ShowForm = true;
    Success = false;
    IsUpdating = false;
    StateHasChanged();
    }
    }

    Is there something I’m doing wrong? Any insight to these issues would be greatly appreciated.

  • Avatar
    Jing Zhe Shan

    It is fascinating to think a picture to use the Blazor WebAssembly code to write a high-performance ray tracer which can have multi-threading support.

    I guess if only if in the future the door open for wasm to interact with DOM, how will Blazor Web Assembly to handle it? Dom is just a big and messy object if multi-threading could access at once, how to handle it?

    Sorry, it’s all my assumptions….better 🏃🏻‍♂️😛

  • Avatar
    Nitin Sawant

    waiting to see how the blazor will be combined with xamarin….
    building android/ios native app with blazor, will that be possible in near future?

Leave a comment