Как заставить события MudDataGrid срабатывать?
Я работаю над своим вторым сайтом MudBlazor. Это .Net 8 вместо .Net 6, с которым я работал раньше. Кроме того, я впервые работаю с DataGrid, так что будьте терпеливы в простых вопросах.
У меня есть сетка, которая показывает список элементов, как и ожидалось. Сейчас я пытаюсь настроить механизм пейджера, а также функцию поиска. Я следовал коду из их документации, но не могу заставить его выполнять какие-либо события щелчка, например переход к следующему набору записей при использовании пейджера или полное отсутствие результатов поиска. Если я наберу что-то в поле поиска, ничего не произойдет. Если я нажму на стрелку следующего набора элементов на пейджере, ничего не произойдет.
Я просмотрел свою настройку и посмотрел следующее видео. https://thewikihow.com/video_iDMqBSjjwPw
Тем не менее, я не могу заставить его работать и не вижу никаких ошибок в инструментах разработки браузера. У меня такое ощущение, что часть JavaScript не работает или ее невозможно найти.
Вот что я настроил. Если вы знаете что-то, что я могу проверить или увидеть что-то, чего не хватает, пожалуйста, дайте мне знать.
Примечание. Мне еще предстоит почистить код. Это всего лишь первый шаг к созданию веб-сайта для проверки концепции. Производство еще далеко не готово.
Приложение.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>
Программа.cs
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddMudServices();
builder.Services.AddMudBlazorDialog();
Главная.бритва
<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();
}
Ответы 1
Веб-приложения Blazor в .Net8 представили концепцию Render Modes. По умолчанию, если режим рендеринга не определен в вашем коде, он по умолчанию равен Static Server Side Rendering, и в этом случае код C# не выполняется после рендеринга страницы. Весь рендеринг изначально происходит на сервере, и никакие дальнейшие обновления через взаимодействие с пользователем невозможны (за исключением случаев использования форм отправки).
Судя по коду, который вы показали для своих App.razor и Home.razor, у вас не определен режим рендеринга. Самым простым решением было бы применить глобальный режим рендеринга в вашем App.razor, добавив режим рендеринга к тегам HeadOutlet и Routes.
<!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>
Это решение применяет режим рендеринга InteractiveServer глобально к вашему решению, то есть все страницы автоматически используют режим рендеринга интерактивного сервера. В идеале вам следует прочитать о различных режимах и о том, как их можно установить (глобально, для каждой страницы, для каждого компонента) и определить, что лучше всего подходит для вас.
Смотрите здесь
Потрясающий! Вот и все. Теперь перейдем к изучению режимов рендеринга.