Blazor is a tool that is built by Microsoft that uses their .NET framework to build web page apps that run in a browser, and because it uses .NET it allows the code to run anywhere. There are currently 2 ways of hosting apps built in Blazor, a client side and a server side, this will allow a programmer to host the code online and have clients connect to it to run the app or to have it running client side with no connection to a server elsewhere.
Installation
1. Download and install Visual Studio
- https://visualstudio.microsoft.com/vs/preview/
So far Visual Studio is the go to IDE for development of Blazor apps, they do have a free (community) edition for individual use and that edition can also be used for learning in classrooms as well.
2. Download and install the .NET core 3.1 SDK
-https://dotnet.microsoft.com/download/dotnet-core/3.1
After that you should be good to go to start making apps in Blazor.
The Basics
As a student right now I’m using the community edition of Visual Studio so I will go through my experience using that edition.
Upon starting Visual Studio you are going to want to start with “Create a new project”. Next you will want to click on Blazor app and click next, then give the app a name and choose the folder to store the app and click create. After all that you will have a choice between Blazor Server app and Blazor WebAssebly app. Since im just a beginner I typically go with the WebAssebly option. And then click on create to start the first project.
The Default project is 3 pages with the first being a home page with the standard “Hello, world”. The other 2 pages are a counter demo and a fetch data demo. To see the web page in action click the green play button.
This should launch a browser window with the Blazor app running.
Nothing much to see here, this is just hello world and that’s it.
This page has a slight bit of interaction, the “Click me” simply increases the count.
This Page fetches the data from a Json file and displays it on the page.
All of this is pretty simple stuff, and being a beginner myself I will show how to alter the counter page just a little bit so its just slightly more than basic. So, for now, close the browser window and go back to visual studio.
Slightly more than basics
Now, lets start with the first page “Home”, lets get rid of the survey off there and alter the text a little bit. To access the code for this page you will need to open the “Solution Explorer” tab and open up the folder called “Pages”, inside that folder is the 3 pages we just explored, Counter.razor for the counter page FetchData.razor for the fetch page and Index.razor for the index page.
So starting with the index (home) page click on Index.razor. You will likley notice that this is just basic HTML so easy enough to alter, so alter it however you like and lets move on to the counter.
Click on the Counter.razor file and this is just a bit different it still starts with basic HTML but for the C# code that’s contained within @code braces. To make this counter just a bit more functional I’m going to add a button to decrease the counter as well as reset the counter back to 0. In the HTML section you will see a <button>, I highlight this and copy it twice, on the first line I replace “Click me” with Increase, then on the second button I rename IncrementCount to DecrementCount and rename Click me to Decrease, and of course on the third the “IncrementCount” becomes ResetCount and click me becomes reset. Like so:
Now that the button is in place I have to add the code behind it. In the @ code braces I add 2 more methods to match the 2 new buttons.
As for the third page, I will need to do a bit more learning to figure out how to use that and this is just the basics.
After the changes are saved hit the green button to launch it again and check out the changes.
Simple as that, and as I learn more on this framework I will post more, but so far Blazor feels very easy to work with, but I doubt it will stay this easy.
