Blazor Succinctly®
CHAPTER 3
Create the Help Desk Application
In this chapter, we will cover the steps to create the help desk application.
Figure 20: The Help Desk Application in Action
The source code for the completed application is available on GitHub at: https://github.com/ADefWebserver/SyncfusionHelpDesk.
Install SQL Server
Figure 21: SQL Server
The application requires a database to store the data. Download and install the free SQL Server 2019 Developer Edition from the following link: https://www.microsoft.com/en-us/sql-server/sql-server-downloads.
Or use the full SQL Server if you have access to it.
Install .NET Core and Visual Studio
To create the application, these steps are required if you do not already have the following software installed:
- Install the .NET Core 3.1 SDK (or later), from: https://dotnet.microsoft.com/download/dotnet-core.
- Install Visual Studio 2019 version 16.4 (or later), with the ASP.NET and web development workload from: https://visualstudio.microsoft.com/vs/.
Note: The requirements to create applications using Blazor are constantly evolving. For the latest requirements, see the following link: https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started.
Note: If you install Visual Studio 2019 and select the .NET Core workload during installation, the .NET Core SDK and runtime will be installed for you. See https: //docs.microsoft.com/en-us/dotnet/core/install/sdk?pivots=os-windows.
Create the project
Figure 22: Blazor App
Open Visual Studio, select Create a New Project, select Blazor App, then click Next.
Enter SyncfusionHelpDesk for the Project name and click Create.
Figure 23: Change Authentication
In the Create a new Blazor app dialog, click the Change link under Authentication.
Figure 24: Set Authentication
In the Change Authentication dialog, select Individual User Accounts and Store user accounts in-app.
Select OK. Then in the Create a new Blazor app dialog, click Create.
Figure 25: In Visual Studio
The project will be created and open up in Visual Studio.
Create the database
From the toolbar, select View, then SQL Server Object Explorer.
Figure 26: Add SQL Server
Click Add SQL Server to add a connection to your database server, if you don’t already have it in the SQL Server list.
Note: For this example, we do not want to use the (localdb) connection for SQL Express that you may see in the list.
Figure 27: Add New Database
Expand the tree node for your SQL Server, then right-click on Databases and select Add New Database.
Name the database SyncfusionHelpDesk.
Figure 28: Copy Connection String
After the database has been created, right-click on it and select Properties. In the Properties window, copy the connection string.
Figure 29: Paste Connection String
Open the appsettings.json file and paste the connection string in the DefaultConnection property.
Save and close the file.
Enable role management
The default code the Visual Studio wizard creates will allow us to create new users. However, we want some users to be administrators. To set this, we must enable role management.
Open the Startup.cs file and replace the following code.
Code Listing 9: Original Identity Code
services.AddDefaultIdentity<IdentityUser>( options => options.SignIn.RequireConfirmedAccount = true) .AddEntityFrameworkStores<ApplicationDbContext>(); |
Replace the code with the following code to remove the requirement to confirm new user accounts and to enable role management.
Code Listing 10: Updated Identity Code
services.AddDefaultIdentity<IdentityUser>() .AddRoles<IdentityRole>() // Enable roles .AddEntityFrameworkStores<ApplicationDbContext>(); |
In Visual Studio, select the F5 key to run the application and open it in your web browser.
Figure 30: Register User
Click the Register link and create a user with the email: Administrator@Email.
You will then see the following page.
Figure 31: Apply Migrations
Click Apply Migrations and, after a few moments, you will see a message telling you to refresh the page.
Refresh the page in your web browser.
Figure 32: Logged In
The required tables will be created in the database, and the application will display the home page and indicate that the Administrator@Email account is logged in.
Close the web browser to stop the application and return to Visual Studio.
Create the administrator
We will now create code that will programmatically create an administrator role and add the Administrator@Email account to the administrator role.
Figure 33: Open Index.razor Page
Open the Index.razor page (this is the home page of the application) and replace all the code with the following code.
Code Listing 11: Original Identity Code
@page "/" @using System.Security.Claims; @using Microsoft.AspNetCore.Identity; @using Microsoft.AspNetCore.Components.Authorization; @inject UserManager<IdentityUser> _UserManager @inject RoleManager<IdentityRole> _RoleManager @if (CurrentUser.IsInRole(ADMINISTRATION_ROLE)) { <p>You are an Administrator named: <b>@CurrentUser.Identity.Name</b></p> } @code { [CascadingParameter] private Task<AuthenticationState> authenticationStateTask { get; set; } ClaimsPrincipal CurrentUser = new ClaimsPrincipal(); string ADMINISTRATION_ROLE = "Administrators"; protected override async Task OnInitializedAsync() { // Ensure there is an ADMINISTRATION_ROLE var RoleResult = await _RoleManager.FindByNameAsync(ADMINISTRATION_ROLE); if (RoleResult == null) { // Create ADMINISTRATION_ROLE role. await _RoleManager.CreateAsync(new IdentityRole(ADMINISTRATION_ROLE)); } // Try to get the administrator account. var user = await _UserManager.FindByNameAsync("Administrator@Email"); // Administrator may not be created yet. if (user != null) { // Is administrator account in the administrator role? var UserResult = await _UserManager.IsInRoleAsync(user, ADMINISTRATION_ROLE); if (!UserResult) { // Put admin in administrator role. await _UserManager.AddToRoleAsync(user, ADMINISTRATION_ROLE); } } // Get the current user. // Note: User may not be logged in. CurrentUser = (await authenticationStateTask).User; } } |
Save the page and run the application.
The home page of the application displays as an empty page. However, we can click the login link to log in to the application.
Figure 34: Log in to the Application
When we log in, the code in the Index.razor page runs to create the administrator role and to add the Administrator@Email account to that role.
Figure 35: Administrator Created
- 80+ high performance Blazor components.
- Lightweight and user friendly.
- Stunning Built-in themes with customization.