Microsoft announced its new .NET web framework, Blazor, in 2018. Since then, Blazor has caused a lot of buzz, especially in the JavaScript community, for approaching features like the use of WebAssembly and its templating system as well as addressing performance.

Blazor stands for Browser + Razor, which gives you an idea of what’s behind the new framework. Razor is the ASP.NET programming syntax that Microsoft uses to create its C## (or VB.NET) dynamic pages. Now, you can create web applications using only C## and run them in a web browser.

No, you didn’t read it wrong, the modern browsers you’ve used now can run C## in native speed. Not only C## but all the other major back-end languages.

And it’s not just the language, but Blazor now has all the power of .NET available, including:

• .NET APIs and tools over all the platform, the IDE and the community. All of that mature enough because of the platform history;
• C#, as mentioned, but also F#, which allows you to include machine learning features into your web applications;
• The possibility to choose between Visual Studio IDE and VS Code, both mature and massively adopted by the community;
• All the well-known characteristics of the .NET platform like the performance, robustness, scalability and responsiveness.

Some may think that the ability to run C## in browsers is another attempt to recreate the old Java Applets, famous for their security breaches, and related complexities. That’s not it. This can happen thanks to the WebAssembly (also known as Wasm).

WebAssembly is a low-level assembly-like binary instruction format for a stack-based virtual machine. It enables the execution of applications made with some targeted programming languages in web clients and servers, through a process called portable compilation.

Blazor resembles other common web frameworks, like Angular, for example. You have a routing system, very similar layouts, forms, and interoperability between your language and JavaScript functions, etc.

In this tutorial, you’ll be guided through the creation of a simple web app, a CRUD. Blazor auto-generates some code examples when creating a new project, and one of them is going to be the base for this tutorial development. It will be enough for you to feel how the framework works, as well as get started.

Setting Up the Project

For the tutorial example, you need to have both Visual Studio Code and .NET SDK installed. The example you’ll develop here can also be done with Visual Studio IDE.

Select a folder via command line and run the command:

dotnet new blazorserver - o first - steps - blazor – no - https

The --no-https is important because you don’t want to add extra complexities in this example by including HTTPS in the example. Keep it simple for now.

The following figure shows the result of its execution:

Figure 1. Creating a new Blazor-based project

After that, cd the created project root folder and run the command dotnet run. It will start the application up and make it available at http://localhost:5000.

Figure 2. Starting up the app

If your browser doesn’t automatically open the page, do it yourself and check the results (Figure 3).

Figure 3. Hello World, Blazor.

Once you’re here, the app started up successfully. Take a look at the three samples shown here; they were auto-generated to give you some reference material when getting started.

In this article, the goal is to “redo” the third one, the Fetch data example. For now, it only displays a list of forecast data kept in memory in direct communication to a service class. When you finish the modifications, a full CRUD of weather forecasts will be available to feed the data table better.

It’s time to open your project in VS Code in order to start coding, but first, make sure to install the C## extension to the IDE (in case you don’t have it already). It is extremely important since it provides the features for developing with .NET, syntax highlighting, debugging, etc. In the Visual Studio IDE, that’s not necessary.

#c# programming #homepage #sql prompt #c++