When Microsoft released Blazor, it provided an alternative to developing single page applications (SPA) that afforded a clean user experience and interactivity without relying on page refreshes and postbacks like some earlier ASP. NET platforms. It also provides a real option for .NET developers who want to bring their application to the web without converting it to JavaScript.

We have outlined the steps required to connect a Blazor Server project to a SQL database using Entity Framework Core while providing the full feature set you're used to with ComponentOne FlexGrid.

Launch Visual Studio and Create a New Blazor App

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

  1. Name the new project
  2. Select the default values for configuration and settings

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Creating a server app integrates the data layer and UI in the same project.

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Add NuGet Packages to both EntityFramework Core and ComponentOne to the project.

  1. Right-click on Dependencies and select Manage NuGet Packages

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Add the following

  1. Microsoft.EntityFrameworkCore.SqlServer
  2. Microsoft.EntityFrameworkCore.Tools
  3. C1.Blazor.Grid
  4. C1.DataCollection.EntityFrameworkCore

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Use the Entity Framework Core Scaffold-DbContext command-line tool to create the Models and Context for this project. The goal is to display the Orders table. We also want to scaffold additional tables due to the foreign key relationships in the database.

Execute the following code in the Package Manager Console in Visual Studio:

Scaffold-DbContext “Data Source=CEDATASERVER;Initial Catalog=Northwind;Persist Security Info=True;User ID=dbuser2;Password=xxxxxxx” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Orders, Customers, Employees, Shippers 
  1. Data Source: the standard connection string for the SQL database
  2. OutputDir: places the class files and context file in the Models folder
  3. Tables: lists the specific table to extract from the Database

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

This adds a Models folder in the project and creates a class for each table and the NorthwindContext.cs file.

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Rather than creating a service and writing all the code to handle the individual CRUD operations, we will utilize the C1DataCollection Nuget package we added earlier. By binding the Context to the C1DataCollection, it will handle all the various operations, as well as providing options for server side filtering and sorting.

  1. Bind the Context to a C1EntityFrameworkCoreVirtualDataCollection
  2. Bind the FlexGrid to the DataCollection

Start Building the Orders Table Page

  1. Right-click on the Pages folder in the Solution Explorer and select Add > New Item

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

  1. Select Razor Component and name it OrdersTable.razor

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

  1. Define the @page to assist with navigation
  2. Add @using statements to the top for the FlexGrid, DataCollection and solution’s Models

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

  1. Down the @code block, create a C1EntityFrameworkVirtualDataCollection of type Orders named collection
  2. Use the built-in async Task OnInitializedAsync to instance the Context
  3. Await loading and initialize the DataColection with the loaded Context

The VirtualDataCollection named, “collection” now contains an Orders table.
Blazor FlexGrid - Using Entity Framework Core and an SQL Server

  1. Go into the body of the page and create an instance of a FlexGrid
  2. Set the ItemSource property to collection

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Before running the application, go into the Pages / _Host.cshtml and add the necessary .css and .js references 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" />  
    <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>

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Go into the Shared / NavMenu.razor. Add a link to the new OrdersTable page so the user can navigate it when the application runs.

        <li class="nav-item px-3">  
            <NavLink class="nav-link" href="OrdersTable">  
                <span class="oi oi-spreadsheet" aria-hidden="true"></span> Orders Table  
            </NavLink>  
        </li>

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Run the application.
Click the Orders Table link in the left navigation bar. It displays the table with FlexGrid.

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

When editing cells, the changes get persisted back to the SQL server upon completion. Click on the header row for column sorting and other features.

Using ComponentOne FlexGrid Features

The Employee Id and Ship Via columns both display foreign keys from those tables and not user-friendly text. Fix this problem with the FlexGrid’s DataMap feature.

  1. Go back to the OrdersTable.razor.
  2. In the @code section define two GridDataMap objects
  3. In the OnInitializedAsync event, bind those object’s ItemsSources to the appropriate tables via the context
  4. Set the DisplayMemberPath to the corresponding column for display in the grid
  5. Set the SelectedValuePath to the index value that will be stored

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

To set specific column properties, turn off FlexGrid’s AutoGenerateColumn feature and define the columns individually.

  1. Set the DataMap property for the Employee ID and Ship Via columns to the GridDataMaps
  2. Define the three Date columns as GridDateTimeColumns
  3. Set the Format to “d” and load a DateTime picker when the column is edited
  4. Set a MinWidth of 180 for those columns and ensure the content displays correctly

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Run the application.
Now the Employee ID and Ship Via columns display useful information and present a nice AutoLookup dropdown box for editing.

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

The three date columns also use the DateTime picker when editing.

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

The C1DataCollection used with the Entity Framework Context implements GrapeCity's Virtual Scrolling technology. It only fetches the number of rows needed to fill the display the user sees at a given time. The scrollbar still displays the full range and additional rows are fetched as the user scrolls. For this to work efficiently, define a max height for the grid. This allows it to calculate the view window’s size and how much data is needed to fill it.
For this case, set the Style/max-height property to 800px.

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

Run the application.

A scroll bar appears for the grid itself on the right. Loading performance and general responsiveness both increase with this feature.

Blazor FlexGrid - Using Entity Framework Core and an SQL Server

The sample application is attached below. Note, it will not work out of the box as the SQL server is behind our firewall.

Download: BlazorFlexGridEFCoreSQL.zip

Modify the connection string in the Models / NorthwindContext.cs to point to your SQL server and we provide a .MDF copy of Northwind in the Document/ComponentOne Samples/Common folder.

Alternatively, start your own application and point the Scaffolder at your tables and try the Blazor FlexGrid with your own data and workflows.

Please leave us your thoughts in the comments below, and happy coding!

Try ComponentOne UI Controls Free for 30 Days

Download the latest version of ComponentOne

Download Now!