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