Interactive: Modifying the Project

The instructions below are interactive, this means that they are built with coding logic enabled that responds to the purpose of the instruction. We hope this approach can assist you with ensuring that the instruction has been carried out correctly and therefor acts as a confirmation when you followed the lesson correctly! So please give them a try!

Enable Authorization on the Navigation Menu

  1. Navigate to the folder containing the extracted project package and double-click the SmartAdminCore.sln file
  2. Once the solution has finished loading open the nav.json file in the root of the project
  3. Scroll down to about Line 141 to find the Tools & Components menu item
  4. You should see a new property that was added in this release to the menu item called roles: 
    "roles": [ "Administrator" ]
  5. As you can see we have added an extra instruction that this menu item should only be visible for Administrators
  6. So let's check this now, it seems that you are currently logged in as the Guest role
    This means you are currently not logged in! Let's fix that by clicking here: Login
    As you might have noticed, the menu on the left may not have changed at all by logging in or viewing it as a Guest! This is because by default the Navigation is not enabled to be role aware, so let's change that!
  7. Open the Default.cshtml file in the Views/Shared/Components/Navigation folder of your project
  8. With the file open goto around Line 6 and you should see the following line of code: 
    @foreach (var group in menu.Lists)
  9. Change or Replace this line of code with the following line of code: 
    @foreach (var group in menu.Lists.AuthorizeFor(User))
    Authorization is now enabled and the AuthorizeFor extension method will verify the user role with that of the menu item. If the menu item has no roles available it will be shown regardless of role.
  10. Now refresh this page and/or Login and you should see the menu change!

Changing the default database from SQLite to SQL Server

  1. Navigate to the folder containing the extracted project package and double-click the SmartAdminCore.sln file
  2. Once the solution has finished loading open the Startup.cs file in the root of the project
  3. With the file open goto around Line 35 and you should see the following line of code: 
    services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
  4. Change or Replace this line of code with the following line of code: 
    services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
  5. This will instruct Entity Framework to connect to a Microsoft SQL Server Database.
    Note: You might get a warning or an error stating that UseSqlServer is not recognized, this means we will need to add a reference to the SqlServer NuGet package for Entity Framework Core
  6. Right click the SmartAdmin.WebUI project and choose the option: Edit Project File
  7. With the file open goto around Line 17 and you should see the following line of code: 
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.2" />
  8. Change or Replace this line of code with the following line of code: 
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.2" />
    Note: You can also change the NuGet packages of your project by right-clicking the SmartAdminCore solution and choosing the option: Manage NuGet Packages for Solution..
  9. Last but not least we will need to modify the ConnectionString of the application to connect to your SQL Server instance
  10. Open the appsettings.jsonfile in the root of your project
  11. With the file open goto around Line 3 and you should see the following line of code: 
    "DefaultConnection": "DataSource=app.db"
  12. Change or Replace this line of code with the following line of code: 
    "DefaultConnection": "Data Source=YourServerAddress;Initial Catalog=YourDatabase;User ID=YourUser;Password=YourPassword;Connect Timeout=20;ApplicationIntent=ReadWrite;MultipleActiveResultSets=true"
    Note: Be sure to replace the YourXxxx values with the actual values of your SQL Server instance and credentials!
  13. In order to re-create the database schema in your new targeted database we will have to remove the Migrations folder from the project. Once this has been done you can re-apply the new schema by typing the following: 
    Add-Migration InitialCreate
    Followed by updating your targeted database, by typing the following: 
    Update-Database
  14. Phew! That was quite the effort, so let's check the result: You are currently using Microsoft.EntityFrameworkCore.Sqlite as your data store.
    It seems you are (still) using SQLite.
    Please follow the instructions above and refresh this page to see the result!

Adding support for Blazor to the Project

  1. Navigate to the folder containing the extracted project package and double-click the SmartAdminCore.sln file
  2. Once the solution has finished loading open the Startup.cs file in the root of the project
  3. With the file open goto around Line 48 and you should see the following line of code: 
    services.AddRazorPages();
  4. Add the following line of code directly beneath: 
    services.AddServerSideBlazor();
  5. Now goto around Line 85 and you should see the following line of code: 
    endpoints.MapRazorPages();
  6. Add the following line of code directly beneath: 
    endpoints.MapBlazorHub();
  7. This will instruct .NET to setup the Blazor Hub and establish a connection upon startup.
    Note: You might get a warning or an error stating that No connection could be established, this means that a plugin might be interfering with the definition of WebSocket.
  8. Let's fix that error right-away! Open the _ScriptBasePlugins.cshtml file in the Views/Shared folder of the project
  9. With the file open goto around Line 2 and you should see the following line of code: 
    <script src="~/js/app.bundle.js"></script>
  10. Add the following lines of code directly beneath: 
    <script>
    // this call is required to remap WebSocket as this is overridden by Pace.js plugin ! :-(
    Object.defineProperty(WebSocket, 'OPEN', { value: 1 });
</script>
<script src="~/_framework/blazor.server.js"></script>
  11. This will enable the listener framework to be setup as such that the pages can "communicate" with your code.
    Note: The blazor.server.js file is generated at runtime, as such it is not available on disk or in your project.
  12. Now rebuild your project and launch it! If everything went well then the item below should show you the rendered contents of the HelloWorld.razor file located in the Pages folder in the root of your Project; Blazor support should now be available in SmartAdmin!
  13. Hi! It seems Blazor is not fully enabled yet! Please follow the instructions and reload this page!