Blazor with Entity Framework 大量性能问题

Question

I am building a Blazor app using Radzen controls and code first Entity Framework. I have Customers, which have Orders which have OrderLines. On my page I want to display three grids;

Grid 1 shows the Customers.

Grid 2 shows the Customer's Orders.

Grid 3 shows the line items for the selected order.

All goes well with Customers and Orders, my two grids work perfectly. The problem arises when I add in OrderLines. Then it just appears to hang, and when I run it through Visual Studio and pause when it is "hanging" the code is at Program.cs, on the line CreateHostBuilder(args).Build().Run();

Here are my three classes for the objects (cut down for brevity)

public class Customer
{
    [Required, Key, DatabaseGenerated(DatabaseGeneratedOption.None)]
    public Int32 invoice_account { get; set; }
    public List<Order> Orders { get; set; }
}

public class Order
{
    [Required, Key, DatabaseGenerated(DatabaseGeneratedOption.None)]
    public Int32 int_order_ref { get; set; }
    public Int32 invoice_account { get; set; }
    
    public List<OrderLine> OrderLines { get; set; }
    public Customer Customer { get; set; }
}

    public class OrderLine
{
    [Key]
    public Int32 id { get; set; }
    public Int32? line_no { get; set; }
    public string product_code { get; set; }

    public Order Order { get; set; }

}

Extract from ApplicationDbContext.cs;

    public class ApplicationDbContext : IdentityDbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }
        public DbSet<Customer> Customers { get; set; }
        public DbSet<Order> Orders { get; set; }
        public DbSet<OrderLine> OrderLines { get; set; }
    }

    protected override void OnModelCreating(ModelBuilder builder)
    {
        base.OnModelCreating(builder);

        builder.Entity<Order>()
            .HasOne(o => o.Customer)
            .WithMany(c => c.Orders)
            .HasForeignKey(o => o.invoice_account)
            .HasPrincipalKey(c => c.invoice_account);

        builder.Entity<OrderLine>()
            .HasOne(o => o.Order)
            .WithMany(ol => ol.OrderLines)
            .HasForeignKey(o => o.int_order_ref)
            .HasPrincipalKey(o => o.int_order_ref);
    }

Extract from my service, CustomerServiceList.cs

public interface ICustomerListService
{
    Task<List<Customer>> Get();
}
public class CustomerListService : ICustomerListService
{
    private readonly ApplicationDbContext _context;

    public CustomerListService(ApplicationDbContext context)
    {
        _context = context;
    }

    public async Task<List<Customer>> Get()
    {
        // added in the where clause to try to get back just one record;
        return await _context.Customers.Where(c => c.invoice_account == 1320).ToListAsync();
    }
}

And finally my page;

@page "/customerorders"

@using BlazorApp.Data
@using Microsoft.EntityFrameworkCore

@inject ApplicationDbContext dbContext
@inject BlazorApp.Services.CustomerListService service

<h3>Customer Orders</h3>

@if (customers == null && order == null)
{
<p><em>Loading...</em></p>
}
else
{
<div class="row">
    <div class="col-md-4">
        <RadzenGrid ColumnWidth="400px" AllowFiltering="true" AllowPaging="true" PageSize="20" 
            AllowSorting="true" Data="@customers" TItem="Customer" Value="@customer" RowSelect="@(args => customer = args)">
            <Columns>
                <RadzenGridColumn Width="100px" TItem="Customer" Property="invoice_account" Title="Account No" />
                <RadzenGridColumn Width="300px" TItem="Customer" Property="account_name" Title="Customer" />
            </Columns>
        </RadzenGrid>
    </div>
    <div class="col-md-6">
        <RadzenCard Style="margin-bottom:20px">
            Company:
            <b>@customer.account_name</b>
        </RadzenCard>
        <RadzenTabs>
        <Tabs>
            <RadzenTabsItem Text="Order Details">
                <RadzenGrid AllowFiltering="true" AllowPaging="true" PageSize="8" AllowSorting="true" Data="@customer.Orders" TItem="Order" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
                    <Columns>
                        <RadzenGridColumn TItem="Order" Property="int_order_ref" Title="Order No" />
                        <RadzenGridColumn TItem="Order" Property="when_placed" Title="Placed On">
                            <Template Context="ord">
                                @String.Format("{0:dd'-'MMM'-'yy}", ord.when_placed)
                            </Template>
                        </RadzenGridColumn>
                        <RadzenGridColumn TItem="Order" Property="town" Title="Town" />
                        <RadzenGridColumn TItem="Order" Property="placed_by" Title="Placed By" />

                    </Columns>
                </RadzenGrid>
            </RadzenTabsItem>
        </Tabs>
    </RadzenTabs>
</div>
<div class="col-md-6">
    <RadzenGrid AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true"Data="@order.OrderLines" TItem="OrderLine"  FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
            <RadzenGridColumn TItem="OrderLine" Property="product_code" Title="Product Code"></RadzenGridColumn>
        </RadzenGrid>
    </div>
</div>
}

@code {

    Customer customer;
    List<Customer> customers;
    Order order;

    protected override async Task OnInitializedAsync()
    {
    
        customers = await service.Get();
    
        customer = customers.FirstOrDefault();

    }
}

In my Customer's table there are just over 10k rows. In my Orders table there are about 120k rows. I have not populated the OrderLines table yet, which leads me to believe it's something in my code rather than the volume of data that is causing the issue.

Update I was using a NavMenu link to my CustomerOrders page, and that was doing nothing, which led me to believe it was hanging. However, when I use the URL directly, I actually see an error;

An unhandled exception occurred while processing the request.
InvalidOperationException: Cannot provide a value for property 'service' on type 'BlazorApp.Pages.CustomerOrders'. There is no registered service of type 'BlazorApp.Services.CustomerListService'.
Microsoft.AspNetCore.Components.ComponentFactory+<>c__DisplayClass5_0.<CreateInitializer>g__Initialize|2(IServiceProvider serviceProvider, IComponent component)

However, I have registered the service in Startup.cs thus;

public void ConfigureServices(IServiceCollection services)
{
    services.AddTransient<ICustomerListService, CustomerListService>();
}

Update 2 Using the Navlink option, nothing happens when I click on the link. It's not until I refresh the page that the error is shown. This can't be right can it?

Answer 1

The answer, as usual, was a PICNIC error. Rather than injecting ICustomerListService to my page, I was injecting CustomerListService. Close, but no cigar. Apologies to all for wasting your time.