Building Blazor Image Gallery - A Complete C# Blazor SQL Tutorial

Issue #2

Building Blazor Image Gallery

Description: This tutorial will guide you step by step through creating a complete Blazor application that includes many features that would be needed for a real world site, including:

1. Creating a Blazor project from scratch

2. Creating a SQL Server Database with two tables: Artist, Image

3. Creating some images with my open source project Random Art

4. Building the data tier with DataTier.Net and execute the generated stored procedures
5. Uploading images with DataJuggler.Blazor.FileUpload

6. Create a SignUp Component to allow new artists to join, including uploading a profile picture
7. Create a Login Component to login existing users with option to store email address and password
8. Create an Artist List Viewer component
9. Create an Image List Viewer component
10. Create an Image Button component to display and select images
11. Load and display images for an artist when selected
12. Display a larger image when selected by changing the Scale property
13. Use BlazorStyled to dynamically change CSS values
14. Use paging to display artists 1 - 5, 6 - 10, etc.

I built this project because I wanted to make sure I could build a real world application, before I started charging a client I wanted to find out what I can and cannot do.

I left out a few things that I may cover in a future tutorial, such as:
1. Forgot Password / Recovery Email
2. I didn't add paging to the Gallery; I capped it at 15 images per artist for now
3. Possibly a shopping cart and / or download image functionality
4. I didn't create any way to delete an image yet.
5. Edit Profile  / Change Profile Picture

All these things will make a good Part II, but I wanted to keep version 1 simple.

What you will need:

Visual Studio                   Version 16.4 or higher. I am using 16.4.5
SQL Server / Express      Newer the better. I am using SQL Server Express 2017

Hopefully you are familiar with C# and SQL, but if not you are in the right place to learn.

Here is a sample of the tutorial we are building:

If you want to clone the working version, it is available here:

https://github.com/DataJuggler/BlazorImageGallery

You will still need to setup up the SQL Server Database, scroll down for Part II.

Part I: Create a new Blazor Project

Step 1: Open Visual Studio and click 'Create New Project

Step 2: Select Blazor App and click Next.

Step 3: Configure Your Project details and click the Create button.

Step 4: Leave everything as is. ASP.NET Core 3.0 and Blazor Server App will already be selected. 

Click Create.

As the note on the screen shot mentions, we have to leave it as ASP.NET Core 3.0 or Visual Studio creates a class library for some reason.

Step 5: After your project is created, expand the data folder and delete the two files:

Step 6: Build your project and you will encounter four errors:

Expand the Pages folder, and select the files FetchData.razor & Counter.razor

Right Click > Select Delete.

Next, double click on Startup.cs to open it.

Remove line 12:

    using BlazorImageGallery.Data;

Remove line 30:

    services.AddSingleton<WeatherForecastService>();

Build your project again and it should compile.

Step 7: Delete NavMenu.razor

Step 8: Right click the BlazorImageGallery project and select Properties.

In project Properties, change the Target Framework to Dot Net Core 3.1

Right click on the tab Blazor Image Gallery > Select Close to close Project Properties.

This concludes part 1.

Part II: Create SQL Database & DataTier

In SQL Server Management Studio create a new database named BlazorImageGallery.

Execute the following SQL Script to create the tables and stored procedures:

Click the View Raw button at the bottom of the SQL, then click Control + A to select all followed by Control + C to copy to your clipboard.

In SQL Server Management Studio click the New Query button, and paste in the copied text.

Click the execute button to create the tables and stored procedures.

Next download the data tier and save it to a temp folder.

Download DataTier

Download DataTier.zip

Right click the downloaded file and click Properties

Check the box at the bottom for Unblock and hit Apply.

Next extract the contents of the zip file, and copy the contents to the Data folder in the BlazorImageGallery project.

Next right click the Data folder and select 'Exclude From Project'.

Now right click the root of your solution and select 'New Solution folder'.

Set the name of the folder to Data

Right click the new Data folder, and select 'Add Existing Project'.

Browse to each of the four projects in your Data folder:

Select the Dependencies folder of the BlazorImageGallery project and select 'Add Reference'.

Add references to the ObjectLibrary and DataGateway projects.

Build the solution to make sure everything compiles.

Create ConnectionString

We must build a connectionstring and then create an environment variable to hold it.

My open source project DataTier.Net comes with a ConnectionStringBuilder project, located in the Tools folder: https://github.com/DataJuggler/DataTier.Net.git

Connection String Builder

Or

Manually Create ConnectionString

Windows Authentication

Data Source=[ServerName];Initial Catalog=BlazorImageGallery;Integrated Security=True

SQL Authentication

Data Source=[ServerName];Initial Catalog=BlazorImageGallery;Integrated Security=False;User ID=[UserName];Password=[Password]

Create System Environment Variable

In the Windows 10 search box, start type Edit System Environment Variables

Click the Edit System Environment Variables button.

In the System Environment Variables section at the bottom, click 'New'.

Environment Variable Properties

Name: BlazorImageGallery

Value: (Paste In Your Connection String)

This concludes part 2.

Part III: Complete Web Project

In the final step we are to complete the following tasks:

1. Modify MainLayout.razor

2. Add Nuget packages

3. Download wwwroot content and copy to web folder

4. Create Components Or Download Components.zip

5. Modify Index Page

6. Modify Startup.cs

7. Modify Imports.razor

8. Create GalleryManager class

9. Create Models

10. Download Images for Gallery

11. Run Program / Create Artists / Galleries

12. Test everything works

Modify MainLayout.razor

Add Nuget Packages

Screenshot is from the completed project

Add the following Nuget packages

1. DataJuggler.Core.Cryptography

2. DataJuggler.Blazor.Components *

3. DataJuggler.Blazor.FileUpload **

4. Microsoft.AspNetCore.ProtectedBrowserStorage

  * Will Install BlazorStyled

** Will install DataJuggler.UltimateHelper.Core

Download wwwroot Content

Download wwwrootcontent.zip

Download the wwwrootcontent.zip file, save and extract it to a temp folder.

Copy and replace site.css with the existing file wwwroot/css/site.css.

Copy and replace favicon.ico with the existing favicon.css

Copy the Images folder to below the wwwroot folder.

The end result should look like this:

Create Components

Originally I planned creating ten files and pasting in the code for each, but to save a lot of time I created a zip file of the components. Create a new folder named Components and then download extract the contents to a temp folder. Paste the extracted files into the new Components directory. Visual Studio automatically includes the files in the project.

Download Components.zip

Modify Index Page

Expand the Pages folder and double click on the Index.razor.

Index.razor

Hit Control + A to select all followed by the backspace to erase the existing code.

Select the Pages folder, and create a new class named Index.razor.cs.

Hit Control + A to select all followed by the backspace to erase the existing code.

Paste in the following code to the corresponding file for Index.razor & Index.razor.cs:

Close both files and save them.

Modify Startup.cs

Add the following changes to the file Startup.cs

Replace the using statements with these:

Add these two lines to the ConfigureServices method, below AddServerSideBlazor().

Modify Imports.razor

Add these four lines to the bottom of the existing import statements:

Create GalleryManager

Create a new folder named Util at the same level as wwwroot, Pages, etc.

Create a new class named GalleryManager.cs and replace out the existing code with:

Create Models

Create a new folder named Models at the same level as wwwroot, Pages, etc.

In the Models folder, create the following two files, and replace out the text for each.

LoginModel.cs

SignUpModel.cs

Create Folders

We need to create two folders under wwwroot/Images

1. Artists

2. Gallery

Modify _Host.cshtml File

Under the pages folder, make the following changes to _Host.cshtml:

1. Change the title on line 10 to  Blazor Image Gallery Sample

2. Paste the following 3 lines to directly above the closing </head> tag.

Paste these two lines directly above the link to Blazor.Server.js (line 22 and 23 after the paste) 

End Of Development

Now the remaining steps involve signing up artists, uploading images and testing everything works.

Download Sample Images

To make things simple I created twenty images using Random Art that you can use for testing the gallery. 

Download Images.zip

Create Your Own Images

Create your own images using my open source project Random Art:

https://github.com/DataJuggler/RandomArt

Run Program / Create Artists / Images

I am going to create enough artists to test paging for the Artist List Viewer and create some images for a few artists gallery.

This concludes this tutorial. Please let me know your opinions, thoughts, or any thing else you would like to share.

And I want to say thank you to our model Figmente Imagination for her guest appearances.