How do I view lookup table values with Blazor QuickGrid?

Question

OK I'm playing around with a Blazor tutorial and I'm experimenting with lookup tables - a Movie table and a MovieStarRatingTable.

This is my Index Page:

@page "/movies"
@rendermode InteractiveServer
@using Microsoft.EntityFrameworkCore
@using Microsoft.AspNetCore.Components.QuickGrid
@using BlazorWebAppMovies.Models
@using BlazorWebAppMovies.Data
@implements IAsyncDisposable
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory

<PageTitle>Index</PageTitle>

<h1>Index</h1>

<div>
    <input type="search" @bind="titleFilter" @bind:event="oninput" />
</div>
<br />
<p>
    <a href="movies/create">Create New</a>
</p>

<div>
    <QuickGrid Class="table" Items="FilteredMovies" Pagination="pagination">
        <PropertyColumn Property="movie => movie.Title" Sortable="true" />
        <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />
        <PropertyColumn Property="movie => movie.Genre" />
        <PropertyColumn Property="movie => movie.Price" />
        <PropertyColumn Property="movie => movie.Rating" />
        <PropertyColumn Property="movie => movie.MovieStarRating.Descr" />


        <TemplateColumn Context="movie">
            <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
            <a href="@($"movies/details?id={movie.Id}")">Details</a> |
            <a href="@($"movies/changePrice?id={movie.Id}")">Change Price</a> |
            <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
        </TemplateColumn>
    </QuickGrid>
    <Paginator State="pagination" />
</div>

@code {
    private BlazorWebAppMoviesContext context = default!;

    private string titleFilter = string.Empty;

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

    private IQueryable<Movie> FilteredMovies =>
        context.Movie.Where(m => m.Title!.Contains(titleFilter));

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

And my models:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BlazorWebAppMovies.Models
{
    public class Movie
    {
        public int Id { get; set; }

        [Required]
        [StringLength(60, MinimumLength = 3)]
        public string? Title { get; set; }

        public DateOnly ReleaseDate { get; set; }

        [Required]
        [StringLength(30)]
        [RegularExpression(@"^[A-Z]+[a-zA-Z()\s-]*$")]
        public string? Genre { get; set; }

        [Range(0, 100)]
        [DataType(DataType.Currency)]
        [Column(TypeName = "decimal(18, 2)")]
        public decimal Price { get; set; }

        [Required]
        [RegularExpression(@"^(G|PG|PG-13|R|NC-17)$")]
        public string? Rating { get; set; }

        [Required]
        public int MovieStarRatingId { get; set; }

        public MovieStarRating? MovieStarRating { get; set; }
    }
}

using Microsoft.EntityFrameworkCore;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BlazorWebAppMovies.Models
{
    public class MovieStarRating
    {
        public int Id { get; set; }

        [Required]
        public string? Descr { get; set; }
    }
}

I'm quite new to Blazor and I'm trying to access the MovieStarRating Descr property/field/value from the MovieStarRating table referenced by the Movie table. I'm used to using INNER JOINS and SQL and this is a bit new to me to some extent.

I am new to EntityFrameworkCore - I've been using Web Forms but I need to update my skill set here!

Answer 1

EF defaults to 'explicit loading' (of navigation properties).

   private IQueryable<Movie> FilteredMovies => context
    .Movie
    .Include(m => m.MovieStarRating)         // add this
    .Where(m => m.Title!.Contains(titleFilter));