How to get MudDataGrid events to fire off?

I'm working on my second MudBlazor site. This one is .Net 8 instead of .Net 6 that I worked with before. It’s also my first time to work with the DataGrid so bear with me on the simple questions.

I have a grid that is showing a list of items as expected. I’m now trying to set up the Pager mechanism as well as a Search feature. I’ve followed the code from their documentation, but I can’t get it to do any of the click events like moving to the next set of records when using the Pager or no Search results at all. If I type something in the search box, nothing happens. If I click on the arrow for the next set of items in the Pager, nothing happens.

I’ve looked over my setup and followed along with the following video. https://www.youtube.com/watch?v=iDMqBSjjwPw

Still, I can’t get it to work and I’m not seeing any errors in the browser’s development tools. I feel like the JavaScript portion is not working or can’t be found.

Here is what I have setup. If you know of something I can check or see something that is missing, please let me know.

Note: I still have a bunch of code clean up to do. This is just an initial stab at a proof of concept website. It’s nowhere near production ready.

App.razor

@using MudBlazor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="SupportWeb_Blazor.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

</html>

Program.cs

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddMudServices();
builder.Services.AddMudBlazorDialog();

Home.razor

<MudDataGrid T="LogEntity" Items="@listLogs" HeaderClass="mud-table-header" SortMode="SortMode.Single">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Application Logs</MudText>
        <MudSpacer />
        <MudTextField @bind-Value="_searchString" Placeholder="Search" Adornment="Adornment.Start" Immediate="true"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <Columns>
        <PropertyColumn Property="i => i.LogDate" Title="Log DateTime" />
        <PropertyColumn Property="i => i.Message" Sortable="false" />
        <PropertyColumn Property="i => i.LogType" Title="Log Type" />
    </Columns>
    <PagerContent>
        <MudDataGridPager T="LogEntity" />
    </PagerContent>
</MudDataGrid>

@code  {

    private readonly IConfiguration? _config = new ConfigurationBuilder().AddJsonFile("appsettings.json").AddEnvironmentVariables().Build();

    private List<LogEntity>? listLogs = new List<LogEntity>();
    private string _searchString;

    protected override async Task OnInitializedAsync()
    {
        var userAdminGroup = _config.GetValue<string>("UsersAdminGroupName");
        var storageConnection = _config.GetValue<string>("StorageConnection");
        var loggingTableName = _config.GetValue<string>("LoggingTableName");

        TableClient tableClient = new(storageConnection, loggingTableName);


        var queryResultsLINQ = tableClient.Query<LogEntity>(ent => ent.PartitionKey == "UsersAdmin");

        foreach (var item in queryResultsLINQ)
        {
            var log = new LogEntity();
            log.PartitionKey = item.PartitionKey;
            log.RowKey = item.RowKey;
            log.Timestamp = item.Timestamp;
            log.Message = item.Message;
            log.LogType = item.LogType;
            log.LogDate = ConvertLogDate(item.RowKey);
            log.LogTime = decimal.Parse(item.RowKey.Substring(9,8));

            listLogs.Add(log);
        }

        listLogs = listLogs.OrderByDescending(o => o.LogDate).ToList();

    }

Solution

Blazor Web Apps in .Net8 introduced the concept of Render Modes. By default, if a render mode is not defined in your code, it defaults to Static Server Side Rendering, in which case, C# code is not executed once the page is rendered. All rendering occurs on the server initially and no further updates are possible via user interaction (except for when using submit forms).

Based on the code you've shown for your App.razor and Home.razor, you don't have a render mode defined. The simplest solution would be to apply a global render mode in your App.razor by adding the render mode to the HeadOutlet and Routes tags.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="SupportWeb_Blazor.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <HeadOutlet @rendermode="InteractiveServer"/>
</head>

<body>
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

</html>

This solution applies the InteractiveServer render mode globally to your solution, meaning all pages automatically use the interactive server render mode. Ideally, you should read up on the various modes and how they can be set (globally, per page, per component) and determine what works best for you.

See here