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(); }