Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How do I call a mudblazor modal dialog in Maui/Blazor hybrid?

$
0
0

I have a maui xaml page. When I click a button I want to show a dialog that exists in my razor class library.

This is a mudblazor modal dialog so I need this to show as an actual modal dialog in my maui app. I have declared in my mainlayout page in my maui app

So How can I show the mud dialog in maui?

<buttons:SfButton x:Name="button"                 Text="Button"                Clicked="OpenBlazorWebViewAsync" />

Here is how I am calling or at least trying to call the dialog from maui xaml

private async Task OpenBlazorWebViewAsync(object sender, EventArgs e)    {        try        {            var options = new MudBlazor.DialogOptions() { FullWidth = true,  MaxWidth = MaxWidth.ExtraLarge, DisableBackdropClick = true, Position = DialogPosition.Center, CloseOnEscapeKey = false };            var dialog = await _dialogService.ShowAsync<SendMessageDialog>("Send Single Message", options);            var result = await dialog.Result;            if (result != null)            {                int secondsToVibrate = Random.Shared.Next(1, 7);                TimeSpan vibrationLength = TimeSpan.FromSeconds(secondsToVibrate);                Vibration.Default.Vibrate(vibrationLength);                HapticFeedback.Perform(HapticFeedbackType.LongPress);                await Task.Delay(1000);                var duration = ToastDuration.Long;                double fontSize = 14;                var toast = Toast.Make("Message Sent Successfully", duration, fontSize);                await toast.Show();            }        }        catch (Exception ex)        {            var duration = ToastDuration.Long;            double fontSize = 14;            var toast = Toast.Make($@"Error: {ex.Message}", duration, fontSize);            await toast.Show();        }    }

Here is the razor page dialog

    @using Microsoft.AspNetCore.Components.Forms@using Blazored.FluentValidation@using Syncfusion.Blazor.Calendars@inject IUsersService userService@inject IDapperContrib _dapperContrib@inject SweetAlertService Swal;<MudDialog><DialogContent><EditForm Model="@model"><MudSelect class="my-4" @bind-Value="model.FirebaseDeviceId" Label="Users">                @foreach (var user in users)                {                    if (!string.IsNullOrEmpty(user.FirebaseDeviceId))                    {<MudSelectItem Value="@user.FirebaseDeviceId">@($"{user.FirstName} {user.LastName}")</MudSelectItem>                    }                }</MudSelect><MudSelect class="my-4" @bind-Value="model.EventName" Label="Event Name"><MudSelectItem Value="@("Calendar")">Calendar</MudSelectItem><MudSelectItem Value="@("Word")">Word</MudSelectItem><MudSelectItem Value="@("Roster")">Roster</MudSelectItem></MudSelect><MudTextField @bind-Value="model.Title" Label="Title" /><MudTextField @bind-Value="model.Message" Label="Message" /></EditForm></DialogContent><DialogActions><MudButton OnClick="Cancel">Cancel</MudButton><MudButton Color="MudBlazor.Color.Primary" Disabled="@(!IsFormValid())" OnClick="Submit">Send Message</MudButton></DialogActions></MudDialog>@code {    public List<User> users { get; set; } = new List<User>();    public NotificationModel model { get; set; } = new NotificationModel();    [CascadingParameter] MudDialogInstance MudDialog { get; set; }    protected override async Task OnInitializedAsync()    {        users = (List<User>)await _dapperContrib.GetAll<User>();    }    private void Cancel()    {        MudDialog.Cancel();    }    private async void  Submit()    {         await userService.SendSpecificUserTestMessage(model);        await Swal.FireAsync(new SweetAlertOptions            {                Title = "Success!",                TitleText = @$"Message Sent Successfully to user {model.FirebaseDeviceId}",                Timer = 3000,                ShowConfirmButton = false,                Icon = "success",                HeightAuto = false            });        MudDialog.Close();    }    private bool IsFormValid()    {        return !string.IsNullOrEmpty(model.FirebaseDeviceId) &&               !string.IsNullOrEmpty(model.EventName) &&               !string.IsNullOrEmpty(model.Title) &&               !string.IsNullOrEmpty(model.Message);    }    private void OnValueChanged()    {    }   } 

Viewing all articles
Browse latest Browse all 4839

Trending Articles