The Blazor WebAssembly App template is used to create a client-side Blazor application that works by downloading and running a small .NET runtime to the client and then executing the code in the browser’s UI thread. In this application, there is no dependency on the server-side and it can be hosted from multiple environments. WebAssembly or WASM serves as an alternative to JavaScript.
In the upcoming section, we will learn how to use the Blazor WebAssembly template in a Blazor application. The Quick Start will guide you through the steps of creating a client-side Blazor application, adding the FlexGrid control, fetching and displaying data in the control. In this example, we are using WeatherForecast class for fetching data to the FlexGrid control. This displays date & time, temperatures and summary in the control.
Now, rebuild the project to restore basic dependencies. After completion of the steps above.
Example Title |
Copy Code
|
---|---|
<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" /> |
HTML |
Copy Code
|
---|---|
<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> |
WeatherForecast class is directly added in the @code section of the FetchData.razor page in Pages folder of a client-side or WebAssembly App, as shown in the image below.
It fetches static values from a weather.json file in the wwwroot/sample-data, and loads an array of type WeatherForecast.
You can keep the data generation code, as shown above, intact and replace the static HTML table with FlexGrid. To execute the same, comment out the HTML table and replace it with FlexGrid declaration by following the below steps.
Add the directive @using C1.Blazor.Grid at the top of FetchData.razor page.
Initialize the FlexGrid control and bind the fetched data to FlexGrid by setting the ItemsSource property to WeatherForecast type array (forecasts).
Razor |
Copy Code
|
---|---|
<FlexGrid ItemsSource="forecasts"></FlexGrid>
|