logo Enterprise-level component library based on Bootstrap and Blazor
gitee
oscs
version
license
download
repo
commit
build
coverage

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
In this example, the pop-up dialog box contains a built-in Counter component of a sample website

By 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
Use popup parameters 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 popup

This 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
Features
  • 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
At present, multi-level pop-up windows have been implemented. Each ModalDialog can independently set the IsBackdrop IsKeyboard parameters. This fixes the problem of pressing ESC in the previous version to remove all pop-up windows

Pop up a dialog box in thread blocking mode through the ShowModal method

Demo
Features
  • 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 or Close 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
Features
  • 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 or Items

Pop up the save dialog through the ShowSearchDialog method

Demo
Features
  • 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 or Items

Pop up the save dialog through the ShowSaveDialog method

Demo
Features
  • 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 setting saveCallback, which is required by TComponent generic components Parameters can be passed through parameters

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
by setting PrintButtonText change the Print Preview button text

Show 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
Features
  • 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 the SelectedRows data through two-way binding
  • Click the Check button to update the Emails data via two-way binding
  • Emails value not updated when Cancel or Close 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

Loading...

B station related video link

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
img
Themes
Bootstrap
Motronic
Ant Design (完善中)
DevUI (制作中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload
Seems like the connection with the server has been lost. It can be due to poor or broken network. Please hang on while we're trying to reconnect...
Oh snap! Failed to reconnect with the server. This is typically caused by a longer network outage, or if the server has been taken down. You can try to reconnect, but if that does not work, you need to reload the page.
Oh man! The server rejected the attempt to reconnect. The only option now is to reload the page, but be prepared that it won't work, since this is typically caused by a failure on the server.
Bootstrap Blazor Component library updated to 7.4.4-beta01

Bootstrap Blazor at present has more than 120 components. This component is based on Bootstrap Blazor An enterprise-level component library that provides several types of common components such as layout, navigation, form, data, notification, icon, voice, etc. Each component has been carefully designed with modularity, responsiveness and excellent performance. Starting from more practical scenarios, meeting the needs of various scenarios, greatly reducing the time cost of developers, greatly shortening the development cycle, greatly improving development efficiency, and providing a set of General Rights Management System Example project。Bootstrap Blazor Products are maintained by a professional full-time technical team, with efficient response speed, diversified solutions, long-term support, and enterprise-level support. At present, it has been used in many well-known state-owned enterprises, and the project is running stably with a maximum of 1200 people online. On the right is the QR code of the Chinese Blazor QQ community with the largest number of people in China, welcome to scan and join the group.

component updated to 6.6.0 Change log [portal] If the component brings you convenience, please help to light up the project Star github gitee

QQGroup
QQ 795206915