How to prevent closing of a modal Dialog in ASP.NET CORE Dialog

27 Aug 20269 minutes to read

You can prevent closing of a modal dialog by setting the cancel argument of the beforeClose event to true. In the following sample, the Dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

CSHTML

<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog" header="Sign In" beforeClose="validation" target="#container" width="300px">
        <e-content-template>
            <div class='wrap'>
                <div id='input-container'>
                    <div class='e-float-input'>
                        <input id='textvalue' type='text' required /><span class='e-float-line'></span>
                        <label class='e-float-text'>Username </label>
                    </div>
                </div><div class='form-group'>
                    <div class='e-float-input'>
                        <input id='textvalue2' type='Password' required />
                        <span class='e-float-line'></span>
                        <label class='e-float-text'>Password</label>
                    </div>
                </div>
            </div>
        </e-content-template>
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>

<script>
    // To get the all input fields and its container.

    let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (let i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener("focus", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                this.parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener("blur", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                this.parentNode.classList.remove('e-input-focus');
            }
        });
    }

    // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    for (let i = 0; i < inputIcon.length; i++) {
        inputIcon[i].addEventListener('mousedown', function () {
            this.classList.add('e-input-btn-ripple');
        });
        inputIcon[i].addEventListener('mouseup', function () {
            let element = this;
            setTimeout(function () {
                element.classList.remove('e-input-btn-ripple');
            }, 500);
        });
    }
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show();
        document.getElementById("textvalue").value = "";
        document.getElementById("textvalue2").value = "";
    };

    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }

    function validation(args) {
        let text = document.getElementById('textvalue');
        let text1 = document.getElementById('textvalue2');
        if (text.value === "" && text1.value === "") {
            args.cancel = true;
            alert("Enter the username and password")
        } else if (text.value === "") {
            args.cancel = true;
            alert("Enter the username")
        } else if (text1.value === "") {
            args.cancel = true;
            alert("Enter the password")
        } else if (text.value.length < 4) {
            args.cancel = true;
            alert("Username must be minimum 4 characters")
        } else {
            args.cancel = false;
            document.getElementById("textvalue").value = "";
            document.getElementById("textvalue2").value = "";
        }
    }
</script>

Controller.cs

public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }

    }
    public ActionResult Index()
    {
        ViewBag.DialogButtons = new ButtonModel() { isPrimary = true, content = "LOG IN" };
        return View();
    }
}