Я создаю мобильное приложение (Android и iOS), используя .NET MAUI Blazor Hybrid с .NET 8. Для пользовательского интерфейса я использую MudBlazor и реализовал MudDialog в нескольких местах. Моя проблема заключается в том, что при нажатии кнопки «Назад» на мобильном устройстве происходит переход на предыдущую страницу вместо закрытия MudDialog.
Мне известна защищенная функция переопределения bool OnBackButtonPressed(), но ее можно вызвать только в классе, который наследуется от ContentPage. Мои классы наследуются от ComponentBase, поскольку мне нужно использовать функции StateHasChanged() и OnParametersSetAsync().
Как закрыть MudDialog при нажатии кнопки «Назад» на мобильном устройстве без перехода на предыдущую страницу? Есть ли способ вызвать OnBackButtonPressed() в классе ComponentBase? В качестве альтернативы, существует ли метод, использующий JavaScript, для запуска события нажатия кнопки «Назад» и предотвращения перехода на предыдущую страницу, тем самым вместо этого закрывая MudDialog?
Любые рекомендации или предложения будут с благодарностью приняты.
Например,
Это моя кнопка для открытия диалога
<MudButton Variant = "Variant.Filled" Color = "Color.Primary" OnClick = "CreateNew"> Open Dialog</MudButton>
Функция CreateNew такова:
public async Task CreateNew()
{
var parameters = new DialogParameters();
parameters.Add("TempId", TempId);
var options = new DialogOptions() { CloseOnEscapeKey = true, NoHeader = false, Position = DialogPosition.Center, CloseButton = true, FullWidth = true, MaxWidth = MaxWidth.Medium, DisableBackdropClick = true };
await DialogService.Show<Dialog>("Create New Support Request", parameters, options).Result;
}
И мой диалоговый файл таков:
@inject ISnackbar Snack
<MudDialog>
<TitleContent>
<MudStack Row AlignItems = "AlignItems.Center">
<MudText Color = "Color.Info" Typo = "Typo.subtitle2">Start New</MudText>
</MudStack>
</TitleContent>
<DialogContent>
<MudGrid>
<MudItem xs = "12" sm = "6">
<MudTextField FullWidth Margin = "Margin.Dense" Variant=Variant.Outlined Label = "Subject" MaxLength = "100" T = "string" @bind-Value = "title"></MudTextField>
</MudItem>
</MudGrid>
<MudTextField Class = "mb-4" FullWidth Margin = "Margin.Dense" Variant=Variant.Outlined Label = "Message" Lines=5 T = "string" @bind-Value = "msg"></MudTextField>
</DialogContent>
<DialogActions>
<MudButton Disabled = "loading" Color = "Color.Primary" OnClick = "Create">
Send
@if (loading == true)
{
<MudProgressCircular Size = "Size.Small" Color = "Color.Info" Indeterminate = "true" />
}
</MudButton>
</DialogActions>
</MudDialog>
@code {
[Parameter]
public Template TempId { get; set; }
bool loading = false;
string title = "", msg = "";
[CascadingParameter] MudDialogInstance MudDialog { get; set; }
void close()
{
MudDialog.Close();
}
public async Task Create()
{
//create code
}
}
```
Как закрыть MudDialog при нажатии кнопки «Назад» на мобильное устройство без перехода на предыдущую страницу?
Вы можете использовать NavigationLock, компонент, представленный в .NET 7
, который обеспечивает способ контролировать или предотвращать события навигации в Blazor, что раньше было сложнее эффективно реализовать.
Теперь вы можете предоставить обработчик внутренних событий и включить флаг:canNavigateBack
, чтобы контролировать, можете ли вы перейти назад или нет при нажатии кнопки «Назад».
<NavigationLock OnBeforeInternalNavigation = "OnBeforeInternalNavigation" />
private bool canNavigateBack = false;
private async Task OnBeforeInternalNavigation(LocationChangingContext locationChangingContext)
{
if (!canNavigateBack)
{
locationChangingContext.PreventNavigation();
//you can close MudDialog here
}
}
Справочная ссылка:
Не беспокойтесь, спасибо за новости. :)
Большое спасибо. Это действительно работает отлично.