Popup Control for ASP.NET MVC - How to create a confirmation dialog

This example demonstrates how to use a pop-up window to display a confirmation dialog box.

Overview

Create a popup control and use the SetContent method to populate the control with labels and buttons.

@Html.DevExpress().PopupControl(settings => {
    settings.SetContent(() => {
       //label and buttons
    });
}).GetHtml()

Create a JS function to show a pop-up window and add a handler to the Yes button Click event.

(function() {
    'use strict';
    window.dxConfirm = function(text) {
        if (text && text.length)
            ConfirmLabel.SetText(text);

        ConfirmYes.Click.ClearHandlers();
        ConfirmYes.Click.AddHandler(Hide);

        ConfirmPopup.Show();
        return {
            success: function(onSuccess) {
                ConfirmYes.Click.AddHandler(onSuccess);
            }
        };
    };
    function Hide() {
        ConfirmPopup.Hide();
    }
})();

After a user clicks the Yes button, an alert message is shown.

dxConfirm("Do you want to show an alert?")
    .success(function() {
        alert("success");
    });

Files to Review

• dxConfirm.js
• Index.cshtml
• _Layout.cshtml
• ConfirmPopup.cshtml