Getting Started with Blazor
While this blog post will assume some familiarity with .NET software development, let’s quickly touch on the basics. You will need either the latest version of Visual Studio (2022 at the time of writing), which comes packaged with the latest version of .NET (.NET 6), or to Download the .NET SDK directly, and use your favorite IDE or text editor alongside a terminal window.
Now, create a new application from one of the Blazor templates:
- From Visual Studio, select Create a New Project, search for Blazor, and choose either Blazor Server App or Blazor WebAssembly App. Name the project something like ArcGISBlazorDemo. You can keep all the default settings for this tutorial.
- From a terminal window (e.g., Command Prompt, PowerShell, Bash, etc.), navigate to where you want to save your project and type
dotnet new blazorserver -o ArcGISBlazorDemoand press [Enter]. Open the newly created folder in an IDE or text editor.
To run your new application, you can press the Run or Debug buttons in your IDE or type
dotnet run from the terminal (in your new folder directory). You should see in your browser a simple Bootstrap-themed web application with a navigation bar on the right and several pages with content.
Let’s take a look at some of the Razor Component web pages. In your IDE find the Pages folder. Inside, you should see at least 3 files. Index.razor is a “Hello, world” page with a link to a survey. Counter.razor demonstrates the Razor Component
@code block and how simple it is to bind variables in C# to HTML display values. FetchData.razor demonstrates some more complex concepts such as dependency injection with
@inject and the lifecycle method
OnInitializedAsync. The actual implementation of FetchData.razor is different between the “WebAssembly” and “Server” projects. It might be worth creating one of each to see the difference which shows you how to interact with a “back-end” server service or repository.
Try editing the HTML text in Index.razor and re-running your application. You should see the changes reflected in the web browser. One other tip: in Visual Studio, turn on “Hot Reload” or run your application from the command line with
dotnet watch run. This relatively new feature in .NET allows many of your changes to be viewed on file save and without refreshing the browser instead of requiring a full application re-build!
I hope you enjoy learning Blazor web development. In our next blog post, I will show you how to inject an ArcGIS Web Map into your Blazor application! If you have any questions about Blazor or GIS development, please reach out to me directly on Twitter @TimPurdum, email me at firstname.lastname@example.org or connect with the team using our Contact Us page.