Part 1 - Create a Blazor Application

This step-by-step tutorial walks through all the steps necessary to create a multi-tier Blazor application complete with a Web API, Identity Server authentication, and a client-side data service to make communication with the Web API easy.

Prerequisites

This tutorial assumes that you have:

Prepare the Database

Let's take a moment to create a sample database with some data. CodeGenHero uses database schema to scaffold out create, read, update, and delete (CRUD) operations. A sample "ArtistSite" schema is provided for use with this tutorial, but you may alternatively choose use your own, existing, relational database.

Download and unzip the contents of ArtistSite_SampleData.zip

Using SQL Server Object Explorer (SSOE)
  1. In Visual Studio, click View | SQL Server Object Explorer.


  2. You should see a connection to "(localdb)\MSSQLLocalDB". If you do not see this connection, click the 'Add SQL Server' icon and add it.

    In the opened SQL Server Object Explorer pane, right-click on the entry (localdb)\MSSQLLocalDB and then

    select New Query to open a SQL query tab and verify the connection is working.


  3. Open the ArtistSite_Schema.sql file (not ArtistSite_SampleData.sql) unzipped in a previous step using the File | Open | File menu command, the Ctrl + O keyboard shortcut, or by drag-and-drop onto the SQLQuery1.sql tab opened in the previous step.
  4. Once open, execute the script by clicking the green arrow in the top-left corner of the tab. Alternatively, use the Ctrl + Shift + E keyboard shortcut to run the script.

    This may open a Connection Dialog before performing execution. If this happens, enter "(localdb)\MSSQLLocalDB" as your server, and select Windows Authentication.


    Visual Studio's SSOE dialog and SQL tabs sometimes have difficulty with mouse input at high display resolutions.

    If this happens to you, move the dialog to another monitor, use the Ctrl + Shift + E keyboard shortcut, or use the Tab key to navigate.

  5. Right-click the Databases folder under LocalDB and click the Refresh icon. You should see a new ArtistSite database that looks similar to the following image.

  6. Run the second ArtistSite_SampleData.sql script to populate this new ArtistSite database with sample data.
(Optional) Prepare Azure Active Directory

If you are using the Azure Active Directory project template, you will need to set up an Azure Active Directory tenant and register your applications which will be used for your Blazor application.


Detailed instructions for registering an application with Azure Active Directory can be found here.


MSC Technology Consulting #MSCTek


Copyright © MSC Technology Consulting 2021.3.2

An error has occurred. This application may no longer respond until reloaded. Reload 🗙