.NET GeoBlazor ArcGIS C#
2 min read
Tim Purdum

Modern Web Development in C# with Blazor

.NET GeoBlazor ArcGIS C#
2 min read
Tim Purdum
May / 3 / 2022

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. 

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.

OR

  • 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 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.

CATEGORIES

.NET GeoBlazor ArcGIS C#
Share

CATEGORIES

.NET GeoBlazor ArcGIS C#

Related articles

ArcGIS in Asp.NET Blazor – No JavaScript Required! 
.NET GeoBlazor ArcGIS C#
2 min read

ArcGIS in Asp.NET Blazor – No JavaScript Required! 

Tim Purdum
In my previous post, I showed how to call the ArcGIS JavaScript API using the IJSRuntime from Asp.NET Blazor. Today, I’m happy to announce a...
READ MORE
Creating GeoBlazor, the Asp.NET Core Web Mapping Library
GeoBlazor ArcGIS C# JavaScript Open Source
2 min read

Creating GeoBlazor, the Asp.NET Core Web Mapping Library

Tim Purdum
This is a story about how I came to build the GeoBlazor SDK and component library. In 2022 dymaptic invited me to attend my first Esri Devel...
READ MORE
Creating ArcGIS Web Mapping Apps in C# Using Blazor
.NET GeoBlazor ArcGIS C#
2 min read

Creating ArcGIS Web Mapping Apps in C# Using Blazor

Tim Purdum
In my previous post, I showed you how to get up and running with ASP.NET Blazor web development. In this post, I will show you how to use th...
READ MORE