Skip to main content
A newer version of this page is available. .
All docs
V22.1

Add an Action that Displays a Pop-Up Window (.NET 6)

  • 4 minutes to read

This lesson explains how to create an Action that shows a pop-up window. This type of Action is useful when a user wants to input multiple parameters in a pop-up dialog before an Action is executed.

Note

Before you proceed, take a moment to review the following lessons:

In this tutorial, you will implement the ability to add notes from a predefined list to task descriptions.

Step-by-Step Instructions

  1. Add the Note business object from the Business Class Library to your application. To do this, add the following code to the MySolution.Module | Module.cs file:

    using DevExpress.Persistent.BaseImpl.EF;
    // ...
    public sealed partial class MySolutionModule : ModuleBase {
        public MySolutionModule() {
            // Adds a business object
            AdditionalExportedTypes.Add(typeof(Note));
        }
        // ...
    }
    
  2. If you are working with EF Core, register the Note type in DbContext. Edit the BusinessObjects\MySolutionDbContext.cs file as shown below:

    public class MySolutionEFCoreDbContext : DbContext {
        //...
        public DbSet<Note> Notes { get; set; }
    }
    
  3. If you are working with EF Core, add a migration and update the database. See the following section for details: Use a DBMS: Setup Migrations.

  4. Add a new View Controller to the MySolution.Module project. Name it PopupNotesController.

  5. In the PopupNotesController.cs file, specify the controller properties:

    using DevExpress.ExpressApp;
    using DevExpress.Persistent.BaseImpl.EF;
    // ...
    public partial class PopupNotesController : ViewController {
        // ...
        public PopupNotesController() {
            InitializeComponent();
            //Target the required Views and create their Actions
            TargetObjectType = typeof(DemoTask);
            TargetViewType = ViewType.DetailView;
        }
        // ...
    }
    
  6. Add the ShowNotesAction action and handle its CustomizePopupWindowParams event:

    public partial class PopupNotesController : ViewController {
        public PopupNotesController() {
            InitializeComponent();
            TargetObjectType = typeof(DemoTask);
            TargetViewType = ViewType.DetailView;
            /*Invoke a pop-up window with a specified View and execute custom code
              when a user clicks the OK or Cancel button*/
            PopupWindowShowAction showNotesAction = new PopupWindowShowAction(this, "ShowNotesAction", PredefinedCategory.Edit) {
                Caption = "Show Notes"
            };
    
            showNotesAction.CustomizePopupWindowParams += ShowNotesAction_CustomizePopupWindowParams;
        }
    
        private void ShowNotesAction_CustomizePopupWindowParams(object sender, CustomizePopupWindowParamsEventArgs e) {
            IObjectSpace objectSpace = Application.CreateObjectSpace(typeof(Note));
            string noteListViewId = Application.FindLookupListViewId(typeof(Note));
            CollectionSourceBase collectionSource = Application.CreateCollectionSource(objectSpace, typeof(Note), noteListViewId);
            e.View = Application.CreateListView(noteListViewId, collectionSource, true);
        }
        // ...
    }
    

    In this step, you handle the PopupWindowShowAction.CustomizePopupWindowParams event and set the required View to the handler’s e.View parameter. This code creates the Notes List View when it generates the pop-up window.

  7. Handle the ShowNotesAction‘s Execute event:

    // ...
    public PopupNotesController() {
        // ...
        showNotesAction.Execute += ShowNotesAction_Execute;
    }
    
    private void ShowNotesAction_Execute(object sender, PopupWindowShowActionExecuteEventArgs e) {
        DemoTask task = (DemoTask)View.CurrentObject;
        foreach(Note note in e.PopupWindowViewSelectedObjects) {
            if(!string.IsNullOrEmpty(task.Description)) {
                task.Description += Environment.NewLine;
            }
            // Add selected notes' text to a Task's description
            task.Description += note.Text;
        }
        View.ObjectSpace.CommitChanges();
    }
    

    The Execute event occurs when a user clicks OK in the pop-up window. The event handler code appends the Note.Text property value to the Task.Description property value.

    The event handler’s e.PopupWindowViewSelectedObjects parameter provides an object that a user selects in the pop-up window.

  8. Run the application.

    Open a Task item’s Detail View. The Detail View toolbar displays the Show Notes button. This is the action implemented in this lesson.

    Blazor tutorial popup window action

    Click the button to open the popup window. The popup window displays a list view for the Note objects. Create several Note objects.

    Blazor tutorial popup window action

    Blazor tutorial popup window action

    Select a Note object in the list and click OK. After that, the Task.Description property value changes.

    Pop-up window action

    Tip

    For an example of how to create and show a Detail View, refer to the How to: Create and Show a Detail View of the Selected Object in a Popup Window topic.

Next Lesson

Add an Action with Option Selection

See Also