Visual Studio - Setup

Prerequisites

Install the following:

  • Visual Studio community 2019 (link here).  I'm using version 16.8.3

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

We will start by creating a new Visual Studio project and then add 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 and/or entering 'Blazor' in 'Search for templates'.
  • Enter a name for the project. Mine is called 'BlazorPurchaseOrders' - if you intend to follow this example I suggest you use the same name, it will allow you to copy code without needing to make adjustments for a different name.  Enter a Location for the files - I accepted the default.
  • Select '.Net 5.0' and  'Blazor Server App'. In this project we will start looking at Authentication.  Make sure to click 'Change' and select 'Individual User Accounts' in the Change Authentication popup form.  Check the 'Configure for HTTPS' checkbox.
  • Finally click 'Create' to add the project.

Do NOT run the application yet, we need to configure some aspects of Authentication.  If you do run the application do not click the 'Migrations' button.

Authentication

The project template created by Visual Studio includes default settings for the location and name of the database that will store user, roles and other authentication settings.  We want to override these settings before the authentication database is created.

In Solution Explorer find appsettings.json and open it.  It will have a "DefaultConnection" that will point to the default SQL server, and will have a name for the authentication database that probably begins with 'aspnet...' and ends with something that looks like a GUID.  We want to change the name of the authentication database to something more manageable and to check the SQL server is the same as our SQL database.

Open the SQL Server Object Explorer (from the View menu item) and expand the servers to find the location of the PurchaseOrders database.  In my case this was created on a server called 'DESKTOP-HT2CKHQ\SQLEXPRESS' and it makes sense to have the authentication database on the same server (although I don't suppose it makes much difference).

If you don't see a server with the PurchaseOrders database, in the SQL Server Object Explorer:

  • Click the 'Add SQL Server' button.
  • Select the appropriate SQL Server.
  • Optionally, select the default Database Name (doesn't seem to matter).
  • Click 'Connect' to add the server and close the dialog form.
Adding a SQL Server to Visual Studio project
Adding the SQL Server to the Visual Studio Project

Whether the SQL server was already shown, or whether you had to add it, to get the precise name of the server, right-click on the name of the server and select 'Properties'.

If the server where PurchaseOrders is different from the DefaultConnection server, copy the name of the server from the Connection String and edit the DefaultConnection line in appsettings.json and paste over the server name.

In any case I suggest that the database name is replaced with 'PurchaseOrdersAuth'.  The 'DefaultConnection' should now look similar to this:

To create the authentication database, (run migrations):

  • Select Tools > NuGet Package Manager > Package Manager Console
  • In the Package Manager Console window enter 'update-database' at the prompt and  press return.

If you right-click on the SQL server in the SQL Server Object Explorer and Refresh you should now see the new PurchaseOrdersAuth database.

Run the application to check that it opens. You should now see the option to Register at the top of the application.  Go ahead and add a user.  Note that you will need to click to confirm registration as no email has been configured to send a confirmation email.

Add Dapper

Dapper

To add Dapper

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

To confirm that both packages have been installed, clear the search box and select the 'Installed' tab. (Note that other packages will have also been installed as part of the Authentication option.)

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.  From Syncfusion Blazor version 18.4.0 individual Syncfusion Blazor controls are able to be installed individually; these are aimed at web assembly applications.  As we are developing a server side application it is easier to install the whole package of controls.
  • 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. (Note that other packages will have also been installed as part of the Authentication option.)

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:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Notifications

Open the Pages folder and in _Host.cshtml and add the following to the element:

<link href=_content/Syncfusion.Blazor/styles/bootstrap4.css rel="stylesheet" />

Check the project still builds and runs.

Syncfusion Licence

Syncfusion needs to be licensed. To get a licence:

  • Open the Syncfusion web page - https://www.syncfusion.com
  • Create an account if you don't already have one, and log into your account.
  • Select 'My Dashboard' by clicking on your user name in the page header.
  • Select 'License & Downloads', followed by 'Downloads & Keys'.
  • Select 'Get License Key' and follow the instructions.
  • Copy and paste the licence key into Startup.cs replacing 'YourLicenceCode'.

SQL Connection

We need to link our Visual Studio project with the PurchaseOrders SQL database. This is achieved by ascertaining a 'Connection String' from the SQL database and then entering this into appsettings.json and making a couple of other configuration changes.

SQL Connection String

  • Open Visual Studio and open the BlazorPurchaseOrders project (if not already open).
  • Select View > SQL Server Object Explorer.
  • Select the appropriate SQL Server (the one with the PurchaseOrders database).
  • In the SQL Server Object Explorer, expand the tree and right-click on the Server that holds the PurchaseOrders database, and select 'Properties'.
  • From the Properties pane copy the whole of the 'Connection String' and paste, temporarily into Notepad.
  • Close the SQL Server Object Explorer.

appsettings.json

Using Solution Explorer, open 'appsettings.json' and add the following line immediately below the "DefaultConnection" line, substituting the string just copied from the SQL Server Object Explorer for 'Your connection string here'. Make sure the inserted line is before the closing } for "ConnectionStrings".

"SqlDBcontext" : "Your connection string here"

The first few lines of appsettings.json should look similar to this:

Note that the name of the connection string we have just defined in appsettings.json is 'SqlDBcontext'. This is required in the next section. We are creating two connection strings here, one to the Authentication database (which uses Entity Framework) and the other to our PurchaseOrders database which we will interact with using Dapper.

SqlConnectionConfiguration

In the Data folder add a new class called 'SqlConnectionConfiguration.cs' and paste in the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorPurchaseOrders.Data
{
    public class SqlConnectionConfiguration
    {
        public SqlConnectionConfiguration(string value) => Value = value;
        public string Value { get; }
    }
}

Startup.cs

In 'Startup.cs', immediately below 'services.AddSingleton<WeatherForecastService>();', add the following code.

var sqlConnectionConfiguration = new SqlConnectionConfiguration(Configuration.GetConnectionString("SqlDBContext"));
services.AddSingleton(sqlConnectionConfiguration);

The code should look like this:

Run the application to check that no errors have crept in.

YouTube Video

Blazor Project - Purchase Orders - Part 3

Powered by Publii