Dialog component
This article demonstrates how to use the Dialog component. Use DialogService
to open and close dialogs.
Show inline dialog with custom content
@inject DialogService DialogService
<RadzenButton Text="Show dialog with inline Blazor content" Click=@ShowInlineDialog />
@code {
async Task ShowInlineDialog()
{
var result = await DialogService.OpenAsync("Simple Dialog", ds =>
@<div>
<p Style="margin-bottom: 1rem">Confirm?</p>
<div class="row">
<div class="col-md-12">
<RadzenButton Text="Ok" Click="() => ds.Close(true)" Style="margin-bottom: 10px; width: 150px" />
<RadzenButton Text="Cancel" Click="() => ds.Close(false)" ButtonStyle="ButtonStyle.Secondary" Style="margin-bottom: 10px; width: 150px"/>
<RadzenButton Text="Refresh" Click="(() => { orderID = 10249; ds.Refresh(); })" ButtonStyle="ButtonStyle.Info" Style="margin-bottom: 10px; width: 150px"/>
Order ID: @orderID
</div>
</div>
</div>);
Console.WriteLine($"Dialog result: {result}");
}
}
Show component/page as dialog
Use DialogOptions
to specify various dialog properties and provide parameters as Dictionary<string, object>
.
@inject DialogService DialogService
<RadzenButton Text=@($"Show OrderID: {orderID} details") Click=@OpenOrder />
public async Task OpenOrder()
{
await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
new Dictionary<string, object>() { { "OrderID", orderID } },
new DialogOptions() { Width = "700px", Height = "530px", Resizable = true, Draggable = true });
}
Show confirm dialog
@inject DialogService DialogService
<RadzenButton Text="Show confirm dialog" Click=@(args => DialogService.Confirm("Are you sure?", "MyTitle", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" })) />
Show busy dialog
@inject DialogService DialogService
<RadzenButton Text="Show busy dialog with string" Click=@(args => ShowBusyDialog(true)) />
<RadzenButton Text="Show busy dialog with markup" Click=@(args => ShowBusyDialog(false)) />
async Task ShowBusyDialog(bool withMessageAsString)
{
InvokeAsync(async () =>
{
// Simulate background task
await Task.Delay(2000);
// Close the dialog
DialogService.Close();
});
if (withMessageAsString)
{
await BusyDialog("Busy ...");
}
else
{
await BusyDialog();
}
}
async Task BusyDialog()
{
await DialogService.OpenAsync("", ds =>
@<div>
<div class="row">
<div class="col-md-12">
Loading...
</div>
</div>
</div>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto" });
}