Blazor | ComponentOne
Blazor Project Types / Blazor WebAssembly
In This Topic
    Blazor WebAssembly
    In This Topic

    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.

     

    FlexGrid

    Create a Blazor App

    1. In Visual Studio, select Create a new project from the Get Started pane. 
    2. In the Create a new project window, select Blazor App and click Next.
    3. In the Configure your new project window, provide as name of the project you want to create in the Project name field, say BlazorIntro in this example. 
    4. Set location for the project in Location field. Click Create.
    5. In the Create a new Blazor app window, select Blazor WebAssembly App template and click Create. A new client-side Blazor app is created.

    Configure References & Data Source

    Now, rebuild the project to restore basic dependencies. After completion of the steps above.

    1. From the Project menu, select  Manage NuGet Packages.
    2. In the NuGet Package Manager window, select nuget.org as the Package source.
    3. Search for C1.Blazor.Grid package, select it and click Install.  
    4. Navigate to the wwwroot, open index.html file and register the client resources by adding the following lines of code.
    5. Add the following code to the <head> tag.
      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" />

    6. Add the following code to the <body> tag.
      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>
         

    Back to Top

    Bind FlexGrid to Data

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

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

    3. Add the directive @using C1.Blazor.Grid at the top of FetchData.razor page.

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

    Back to Top

    Build and Run the Project

    1. Click Build | Build Solution to build the project.
    2. Press F5 to run the project.

     

     

     

    Copyright © GrapeCity, Inc. All rights reserved.

    Product Support Forum | Print this page