The graphical internet is nearly 3 decades old (Mosaic was released in 1993). For most of that time, JavaScript has been the standard for web development as the only language that could run inside a web browser. Even our GIS partner, Esri, who has written numerous applications and APIs in .NET for desktop and mobile platforms, turns to JavaScript when needing to build a performant, interactive web application like ArcGIS Online. For web developers, Esri provides a robust ArcGIS API for JavaScript allowing web maps and other GIS data applications to be created in any browser application.
Today, however, it is more possible than ever to use a strongly typed language like C# to develop rich web applications. Specifically, the ASP.NET Blazor framework allows C# developers to harness all the power of the modern web browser without having to learn and maintain a large JavaScript front-end layer.
Blazor uses the traditional Asp.NET Razor syntax, but in a component-based model similar to React. These html files intermixed with C# logic are rendered in one of two possible ways: on the server, with individual component updates communicating with the server via SignalR or running in the client browser via web assembly. In both modes, Blazor also provides an interface for calling functions in JavaScript, which allows C# web developers to access any JS library, including the ArcGIS API for JavaScript.
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:
OR
dotnet new blazorserver -o ArcGISBlazorDemo and 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 tim.purdum@dymaptic.com or connect with the team using our Contact Us page.