
Dialog component
Human-computer interaction by calling the Show
method pop-up window by injecting the service
Component usage introduction:
1. inject service DialogService
@inject DialogService DialogService
[Inject]
[NotNull]
private DialogService? DialogService { get; set; }
2. call its instance api
var op = new DialogOption()
{
Title = Data query window,
ShowFooter = false,
BodyContext = DataPrimaryId
};
op.Component = BootstrapDynamicComponent.CreateComponent<DataDialogComponent>(new Dictionary<string, object?>
{
[nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
});
await DialogService.Show(op);
3. CascadingParameter
[CascadingParameter]
private Func<Task>? OnCloseAsync { get; set; }
private async Task OnClick()
{
if (OnCloseAsync != null)
{
await OnCloseAsync();
}
}
4. DialogCloseButton
<DialogCloseButton />
Set the basic properties of the modal box by setting the DialogOption
property
Demo
by setting DialogOption
IsKeyboard
parameter, whether the pop-up window supports ESC, please click the back button to set and then click the pop-up window button to test the effect
Customize the title bar of the modal box by setting the HeaderTemplate
property
Demo
Set HeaderToolbarTemplate
custom the buttons on Header
Demo
Pop up a custom component by calling Show<Counter>()
Demo
Counter
component of a sample websiteBy setting the BodyContext
attribute value, parameters can be passed to the components in the pop-up window
Demo
In this example, when the button is clicked, the value of BodyContext
is set to I am a parameter
, and the content of the pop-up window is the custom component DemoComponent
, which is cascaded in the component. parameter gets its value
In this example, by passing a primary key, the components in the pop-up window perform data query through this primary key, and display the results in the pop-up window
Demo
This example explains how to open and close a popup window through code
Demo
DialogOption
Instance, in the instance after the pop-up window pops up Dialog
The property value is the handle of the current popup window. By calling its Toggle/Close
method to close the popupThis example explains how to open and close a popup window through code
Demo
Setting parameters ShowHeaderCloseButton
Ban pop-ups Header
Shows the Close button on the right
Click the button inside the popup to continue the popup dialog
Demo
- Click the button to pop up a dialog
- Switch the third tab of the
Tab
component in the pop-up window role management - Click the popup in the tab to continue the popup dialog
- Keep state of previously opened dialogs after closing the current dialog
ModalDialog
can independently set the IsBackdrop
IsKeyboard
parameters. This fixes the problem of pressing ESC in the previous version to remove all pop-up windowsPop up a dialog box in thread blocking mode through the ShowModal
method
Demo
- Click the button to pop up a modal popup
- Change the value in the modal pop-up window when the
confirm
button is clicked update - Change the value in the modal pop-up window and click the
Cancel
orClose
button when the value is not updated - When the modal pop-up window is clicked again, the value remains the same
Pop up the save dialog through the ShowEditDialog
method
Demo
- Click the button to pop up the edit popup
- Set the pop-up window through the
EditDialogOption
parameter - The design starting point automatically generates a form window with client-side validation by giving a
Model
orItems
Pop up the save dialog through the ShowSearchDialog
method
Demo
- Click the button to pop up a search popup
- Set the pop-up window through the
SearchDialogOption
parameter - The design starting point automatically generates a search window by giving a
Model
orItems
Pop up the save dialog through the ShowSaveDialog
method
Demo
- Click the button to pop up the save popup
- The design starting point automatically generates a save window by giving a
TComponent
, and performs data processing in the save callback method by settingsaveCallback
, which is required byTComponent
generic components Parameters can be passed throughparameters
Very flexible form size control can be achieved by setting the Size
FullScreenSize
parameter combination
Demo
Show a print preview button on the Header
by setting ShowPrintButton
Demo
PrintButtonText
change the Print Preview button textShow a window maximize button on the Header
by setting ShowMaximizeButton
Demo
Through BootstrapBlazorRoot
built-in ErrorLogger
global exception capture for errors in the pop-up window
Demo
Simulate a mail application, select the recipient in the pop-up window and fill in the recipient box below.
Demo
- Click the button to pop up a modal popup
- Pass 10 to the pop-up window by cascading parameters
BodyContext
to initialize data - Select the row data in the
Table
component and update theSelectedRows
data through two-way binding - Click the Check button to update the
Emails
data via two-way binding Emails
value not updated whenCancel
orClose
button is clicked- When clicking the pop-up modal pop-up window again, the selected state of the inner row of the component remains the same
- Prohibit closing the popup when no user is selected in the popup
DialogOption property
B station related video link
交流群