Scaffolding Blazor pages with microsoft.dotnet-scaffold

In this tutorial, I will show you how to build a server-side Blazor application that connects directly with SQLite database using Entity Framework Core. We will then scaffold the CRUD pages with the microsoft.dotnet-scaffold tool.

Source Code: https://github.com/medhatelmasry/BlazorStudents

Pre-requisites

1. .NET Framework
2. VS Code (or any other .NET editor)
3. dotnet-ef tool
4. microsoft.dotnet-scaffold tool

Getting Started

In a terminal window, go to your working directory. Enter the following command to create a Server-Side Blazor application inside a directory called BlazorStudents:

dotnet new blazor -int server --auth individual -o BlazorStudents
cd BlazorStudents

Run the application by entering the following command:

dotnet watch

The following page will load into your default browser:

Open the BlazorStudents folder in Visual Studio Code (or any other .NET editor).

We will work with a very simple student model. Therefore, add a Student class file in a folder named Models with the following content: 

public class Student {
    public int StudentId { get; set; }

    [Required(ErrorMessage = "You must enter first name.")]
    public string? FirstName { get; set; }

    [Required(ErrorMessage = "You must enter last name.")]
    public string? LastName { get; set; }

    [Required(ErrorMessage = "You must enter school.")]
    public string? School { get; set; }

    [Required(ErrorMessage = "You must enter gender.")]
    public string? Gender { get; set; }

    [Required(ErrorMessage = "You must enter date of birth.")]
    public DateTime? DateOfBirth { get; set; }
}

From within a terminal window at the root of your BlazorStudents project,  run the following commands to add some required packages:

dotnet add package CsvHelper

The CsvHelper package will help us read data from a CSV.

Developers prefer having sample data when building data driven applications. Therefore, we will create some sample data to ensure that our application behaves as expected. Copy the CSV data at https://gist.github.com/medhatelmasry/e8d4edc2772a538419adda45e8f82685 and save it in a text file named students.csv in the wwwroot folder.

Edit Data/ApplicationDbContext.cs and add to the class the following property and methods:

public DbSet<Student> Students => Set<Student>();

protected override void OnModelCreating(ModelBuilder modelBuilder) {
  base.OnModelCreating(modelBuilder);
  modelBuilder.Entity<Student>().HasData(GetStudents());
}

private static IEnumerable<Student> GetStudents() {
  string[] p = { Directory.GetCurrentDirectory(), "wwwroot", "students.csv" };
  var csvFilePath = Path.Combine(p);

  var config = new CsvConfiguration(CultureInfo.InvariantCulture) {
    PrepareHeaderForMatch = args => args.Header.ToLower(),
  };

  var data = new List<Student>().AsEnumerable();
  using (var reader = new StreamReader(csvFilePath)) {
    using (var csvReader = new CsvReader(reader, config)) {
      data = csvReader.GetRecords<Student>().ToList();
    }
  }

  return data;
}

Notice the above code is adding contents of the wwwroot/students.csv file as seed data into the database.

We are now ready to apply Entity Framework migrations, create the database and seed data. If you have not done so already, you will need to globally install the Entity Framework CLI tool. This tool is installed globally on your computer by running the following command in a terminal window:

dotnet tool install --global dotnet-ef

To have a clean start with Entity Framework migrations, delete the Data/Migrations folder and the Data/app.db files.

From within a terminal window inside the BlazorStudents root directory, run the following command to create migrations:

dotnet ef migrations add Stu -o Data/Migrations

This results in the creation of a migration file ending with the name ....Stu.cs in the Data/Migrations folder. 

The next step is to create the SQLite Data/app.db database file. This is done by adding the following code to Program.cs, right before app.Run():

using (var scope = app.Services.CreateScope()) {
    var services = scope.ServiceProvider;

    var context = services.GetRequiredService<ApplicationDbContext>();    
    context.Database.Migrate();
}

Run the application. This will cause students data to be seeded in the database.

Scaffolding Blazor Components

If you have not done so already, install the dotnet scaffold tool with this terminal window command:

dotnet tool install -g microsoft.dotnet-scaffold

Let us scaffold the CRUD pages for students. Run the scaffold tool from the root directory of your application with this command:

dotnet scaffold

Follow these steps....

The scaffolding process adds the following pages to your application:

Edit Components/Layout/NavMenu.razor to add this menu item:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="students">
        <span class="bi bi-lock-nav-menu" aria-hidden="true"></span> Students
    </NavLink>
</div>

Find the following code in Program.cs and delete it because the scaffold tool registered ApplicatioDbContext using DbContextFactory:

builder.Services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(connectionString));

Run the application with:

dotnet watch

The app will launch in your default browser.

You should have the full CRUD experience once you click on Students in the left navigation.

QuickGrid

If you open StudentPages/Index.razor in your editor, you will notice that the QuickGrid Blazor component is being used to display students data. This is the code that uses QuickGrid:

<QuickGrid Class="table" Items="context.Students">
  <PropertyColumn Property="student => student.FirstName" />
  <PropertyColumn Property="student => student.LastName" />
  <PropertyColumn Property="student => student.School" />
  <PropertyColumn Property="student => student.DateOfBirth" />

  <TemplateColumn Context="student">
    <a href="@($"students/edit?studentid={student.StudentId}")">Edit</a> |
    <a href="@($"students/details?studentid={student.StudentId}")">Details</a> |
    <a href="@($"students/delete?studentid={student.StudentId}")">Delete</a>
  </TemplateColumn>
</QuickGrid>

Visit the QuickGrid for Blazor site for more information on this freely available component.

Component CSS

With Blazor components, it is easy create CSS that targets individual components. Simply create a file with the same name as the component and add to it .css. 

For example:

Create a file named StudentPages/Index.razor.css in the same folder as the component itself with this styling:

p.create-new {
    background-color: orange;
}

In StudentPages/Index.razor component, add the following styling to the <p> tag that contains the “Create New” link as follows:

<p class="create-new">
    <a href="students/create">Create New</a>
</p>

You will notice that styling is successfully applied to the StudentPages/Index.razor component.

The .NET scaffold tool can be used for more than creating pages for Blazor app. Among other things, it can be used for scaffolding Aspire, API, MVC Controllerts, and Itentity.