Getting Started

Objective

In real life, most applications will have a 'header/detail' structure. Purchase order header / purchase order lines is one example; others might be customer / transactions, or school classes / students.

To illustrate the use of C#, Blazor, Syncfusion controls and Dapper to create the data input and display for this type of application these notes will document the steps needed to create a simple project. It will consist of a list of countries, and cities linked to those countries together with the city populations. The finished project will look like this:

Prerequisites

Install the following:

Visual Studio community 2019 (link here) I'm using version 16.7.6
Microsoft SQL Server 2019 Express (link here - make sure you download the free Express version.)
Microsoft SQL Server Management Studio (link here) I'm using version 18.6

Alan Simpson has produced a series of 16 short YouTube videos on "Blazor + Dapper CRUD". Rather than reproduce those videos I recommend watching all 16 (link here). For the uninitiated CRUD is short for Create, Read, Update, Delete - the basic interactions between the user and a database.

Even better, Alan has created an amazing little program in C# to do most of the code generation for these basic CRUD operations. We will be using his program, so I would advise watching his 3 videos on that subject (link here).

Create the Project

To start we will add an empty Blazor project and install Dapper and Syncfusion.

Open Visual Studio 2019
Select 'Create a new project'
Select 'Blazor App' from the list of templates. Restrict the list of templates by choosing C# at the top of the form if necessary.
Enter a name for the project. Mine is called 'BlazorCountries', and a Location for the files - I accepted the default.
Select 'Blazor Server App'. Leave the Authentication as 'No authentication' and check the 'Configure for HTTPS' checkbox.

Check that the solution builds and that the sample Blazor App opens.

Add Dapper

Dapper

To add Dapper to the project (if the program is running, stop it)

Select Project > Manage NuGet Packages... from the top menu.
Select the Browse tab.
Enter 'Dapper' in the Search box.
Dapper should be the top package, highlight it to show the details in the right-hand pane.
Click the 'Install' button. Dapper should install and no errors should be shown in the Errors pane. A green downward pointing arrow will also appear next to Dapper in the Browse tab.

Microsoft.data.sqlclient

Once Dapper is installed, stay in Manage NuGet Packages and repeat the process, this time searching for 'Microsoft.data.sqlclient'. Select 'Install' and accept the licence.

Add Syncfusion for Blazor

Select Project > Manage NuGet Packages... from the top menu.
Select the Browse tab.
Enter 'Syncfusion Blazor' in the Search box.
A number of Syncfusion packages will probably be displayed, but 'Syncfusion.Blazor' should be the top package, highlight it to show the details in the right-hand pane.
Click the 'Install' button and accept the licence. Syncfusion.Blazor should install and no errors should be shown in the Errors pane. A green downward pointing arrow will also appear next to Syncfusion.Dapper in the Browse tab.
To confirm that all three packages have been installed, clear the search box and select the 'Installed' tab.

Syncfusion.Blazor is constantly being refined and currently new versions released almost weekly; the version number is therefore highly likely to be different to that shown in the screenshots.

The following additional steps are required for Syncfusion.Blazor.

Open startup.cs and add the following:

- at the top of the file add
  - using Syncfusion.Blazor;
- In the 'public void Configure' section, add
  - //Register Syncfusion license
  - Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YourLicenceCode");
- In the 'Configure Services' section, add
  - //Syncfusion support
  - services.AddSyncfusionBlazor();

Open Imports.Razor and add the following: