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 to SQLite database using Entity Framework Core. We will scaffold the CRUD pages with the microsoft.dotnet-scaffold tool. There is also a quick into into the QuickGrid component.

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

Companion Video: https://youtu.be/4hbE-GZ-WZA

Pre-requisites

1. .NET Framework 10+
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.

Pagination

Let's extend the QuickGrid component to add paging to StudentPages/Index.razor. Add this directive right under the first line (@page "/students"):

@rendermode InteractiveServer

The above directive tells Blazor that a component should be rendered on the server and made fully interactive using the Blazor Server model.

Add this instance variable to the @code { .... } block

private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };

Next, Add the following attribute to the opening <QuickGrid .... > tag:

Pagination="@pagination"

Finally, place this Paginator component right after the closing </QuickGrid> tag:

<Paginator State="@pagination" />

Refreah the Students List page. You will see pagination in action.

Sorting

Making the columns sortable involves just adding an attribute to the <PropertyColumn...> opening tags for FirstName, LastName, School, and DateOfBirth as follows:

<PropertyColumn Property="student => student.FirstName" Sortable="true" />
<PropertyColumn Property="student => student.LastName" Sortable="true" />
<PropertyColumn Property="student => student.School" Sortable="true" />
<PropertyColumn Property="student => student.DateOfBirth" Sortable="true" />

You can now click on the column titles to sort the columns as needed:

Filtering

Add this filter input field right above the <Quickgrid ...> opening tag:

<p>There are @filtered.Count() students.</p>

<div class="search-box">
    <input class="form-control me-sm-2 " style="width: 95%" type="search" autofocus @bind="itemsFilter"
           @bind:event="oninput" placeholder="Search Filter ..." />
</div>

Add these C# properties inside the @code { . . .  } block:

string? itemsFilter;

private List<Student>? studentList {
  get {
    var data = context.Students!.ToList();
    if (!data.Any()) {
      return null;
    } else {

      return data;
    }
  }
}

private IQueryable<Student> filtered {
  get {
    if (studentList == null || !studentList.Any()) {
      return Enumerable.Empty<Student>().AsQueryable();
    }

    if (string.IsNullOrEmpty(itemsFilter)) {
      return studentList!.AsQueryable();
    } else {
      var filteredList = studentList!.AsQueryable()
      .Where(
      b => b.FirstName!.Contains(itemsFilter, StringComparison.CurrentCultureIgnoreCase)
      || b.LastName!.Contains(itemsFilter, StringComparison.CurrentCultureIgnoreCase)
      || b.School!.Contains(itemsFilter, StringComparison.CurrentCultureIgnoreCase)
      || b.Gender!.Contains(itemsFilter, StringComparison.CurrentCultureIgnoreCase)
      || b.DateOfBirth.ToString()!.Contains(itemsFilter, StringComparison.CurrentCultureIgnoreCase)
      );
      return filteredList;
    }
  }
}

In the opening <QuickGrid ... > tag, change the value of the Items attribure from "context.Students" to simply:

@filtered

You can now filter any text in any of the columns as shown below:

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.