Introducing Blazor WebAssembly – A Client-side Alternative to JavaScript
Microsoft released the client-side version of Blazor at the MSBuild conference on May 19th 2020. This is an exciting new development for the Blazor platform as the web assembly or WASM version of Blazor gives a real alternative to Javascript for web developers. Especially those who are more familiar and prefer tools like NuGet and MSBuild to NPM and Webpack.
What are the differences between client and server-side Blazor?
In a server-side Blazor project, your solution runs on the server with a small amount of code running on the client and a SignalR channel between the two. Any user input is transmitted back to the server and new render data is passed to the client and displayed. This works best when you have a strong network connection between the client and the server. Client-side Blazor works by downloading and running a small .NET runtime to the client and then executing your code in the browser’s UI thread. There is no dependency on the server and it can be hosted from any number of different environments. You can also support offline scenarios and Progress Web Apps (PWA) if desired.
To develop with the new Blazor, you will need Visual Studio 2019 update v16.6 or above and also the .NET Core SDK 3.2.0 or above.
Let’s get started. In a previous article, we show how you can replace the HTML table used in the server-side Blazor template with a FlexGrid.
In this post, we will do the same in a Blazor WebAssembly client-side project and point out some of the differences between the two.
To start, open Visual Studio and select a Blazor Project and then select the Blazor WebAssembly App template.
Once the project loads, we can add the C1FlexGrid NuGet package. Right-click on Dependencies in your Solution Explorer and select Manage NuGet Packages.
Click "Browse" at the top and search for C1 Blazor FlexGrid and then select the package and click Install. Hit OK and Accept all the changes and license information.
Now that we have added the packages, we need to add the configuration for the CSS and js files necessary to make the controls function and display properly.
In a client-side project, the location is slightly different as the Pages/_host.cshtml file file doesn’t exist. Instead, we are going to add our references to the wwwroot/index.html.
Add the following code to the <head> tag:
<link rel="stylesheet" href="_content/C1.Blazor.Core/styles.css" />
<link rel="stylesheet" href="_content/C1.Blazor.Grid/styles.css" />
<link rel="stylesheet" href="_content/C1.Blazor.ListView/styles.css" />
<link rel="stylesheet" href="_content/C1.Blazor.Input/styles.css" />
<link rel="stylesheet" href="_content/C1.Blazor.DataPager/styles.css" />
And add the following code to the <body> tag:
<script src="_content/C1.Blazor.Core/scripts.js"></script>
<script src="_content/C1.Blazor.Input/scripts.js"></script>
<script src="_content/C1.Blazor.Grid/scripts.js"></script>
Now that everything is set up, let’s implement the FlexGird. In the Blazor Server template, there was a WeatherForecast class and a service that generated random weather data when requested.
With a Blazor client-side project, this must now be done on the client, as there isn’t a server option available. In the Blazor template, they create the WeatherForecast class directly in the @code section of the FetchData.razor and then just pull static values from a .json file in the wwwroot/sample-data folder and load an array of type WeatherForecast. They then display the values in an HTML table. We are going to keep the data generation code in place and replace the static HTML table with the FlexGrid. First, add @using C1.Blazor.Gird to the top.
Now, we can comment out the HTML table and the loop they used to load it and replace it with a FlexGrid declaration. We will set the ItemsSource property to the forecasts array they already created.
If we run the project now and open the FetchData option, you will see the weather data is now displayed in a FlexGrid. You can now edit the cells along with sorting by clicking on the column headers. You also have keyboard navigation enabled.
In the earlier blog, we covered adding full-text search and grouping features. Those all work the same in a Blazor Webassembly project so I thought I’d show off our new Filter Row feature for individual columns. We will modify the FlexGrid markup to include the FilterRow definition.
Now when we run the project, there is a filter row below the column headings and we can use it to filter the grid.
GrapeCity is excited about this update to Blazor and the speed at which the platform is being developed. We are hard at work building new controls and features to help take your application to the next level.
