Search results

Getting Started

This section briefly explains about how to include a simple Dialog in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part part of the system requirements and configure the common specifications.

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include the license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET Core application to use our components.

Adding Dialog control to the Application

  • Now open your view page to render Dialog control.
tagHelper
controller.cs
<div id="container" style="height:400px;">
    <ejs-button id="normalbtn" content="Open"></ejs-button>
    <ejs-dialog id="default_dialog" width="500px" target="#container" showCloseIcon="true" header="About SYNCFUSION succintly series">
        <e-content-template>
            <p>
                In the Succinctly series, Syncfusion created a robust, free library of more than 130 technical e - books formatted for PDF,
                Kindle, and EPUB.The Succinctly series was born in 2012 out of a desire to provide concise technical e-books for software developers.Each title in the Succinctly series is written by a carefully chosen expert and provides essential content in about 100 pages.
            </p>
        </e-content-template>
    </ejs-dialog>
</div>
<script>
    window.onload = function () {
        document.getElementById('normalbtn').onclick = function () {
            var dialog = document.getElementById("default_dialog").ej2_instances[0];
            dialog.show();
        }
    }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Initialize the Dialog

  • Dialog component can be rendered with the help of ejs-dialog tag helper. Add the below code to your index.cshtml page which is present under Views/Home folder, where the Dialog is initialized.

Run the application

After successful compilation of your application, simply press F5 to run the application.

The below example shows the Dialog.

tagHelper
controller.cs
<div id="container" style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog" header="Dialog" content="This is a Dialog with content" target="#container" width="250px"></ejs-dialog>
</div>
<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0]
            dialog.show();
        }
    }
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}

Output be like the below.

dialog

A modal shows an overlay behind the Dialog. So, the user should interact the Dialog compulsory before interacting with the remaining content in an application.

While the user clicks the overlay, the action can be handled through the overlayClick event. In the below sample, the Dialog close action is performed while clicking on the overlay.

When the modal dialog is opened, the Dialog’s target scrolling will be disabled. The scrolling will be enabled again once close the Dialog.

tagHelper
controller.cs
<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
    <ejs-dialog id='dialog' isModal="true" width="300px" overlayClick="onOverlayClick" content="This is a modal dialog" target="#container"></ejs-dialog>
</div>

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function onOverlayClick() {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.hide();
    }
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}

Output be like the below.

dialog

Enable header

The Dialog header can be enabled by adding the header content as text or HTML content through the header property.

tagHelper
controller.cs
<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id='dialog' header="Dialog" showCloseIcon="true" content="This is a dialog with header" target="#container" width="250px"></ejs-dialog>
</div>
<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}

The Dialog provides built-in support to render the buttons on the footer (for ex: OK or Cancel buttons). Each Dialog button allows the user to perform any action while clicking on it.

The primary button will be focused automatically on open the Dialog, and add the click event to handle the actions

When the Dialog initialize with more than one primary buttons, the first primary button gets focus on open the Dialog.

The below sample render with button and its click event.

tagHelper
controller.cs
<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog" header="Dialog" content="This is a Dialog with button and primary button" target="#container" width="250px">
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>
<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
public class HomeController : Controller
{
    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }
        public string cssClass { get; set; }

    }

    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }

}

Draggable

The Dialog supports to drag within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.

The Dialog can be draggable only when the Dialog header is enabled. From 16.2.x version, enabled draggable support for modal dialog also.

tagHelper
controller.cs
<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id='dialog' header='Dialog' allowDragging="true" content='This is a Dialog with drag enable' width="250px">
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
public class HomeController : Controller
{
    public class ButtonModel
    {
        public string content { get; set; }
        public string cssClass { get; set; }
    }
    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }
}

Positioning

The Dialog can be positioned using the position property by providing the X and Y co-ordinates. It can be positioned inside the target of the container or <body> of the element based on the given X and Y values.

for X is: left, center, right (or) any offset value for Y is: top, center, bottom (or) any offset value

The below example demonstrates the different Dialog positions.

tagHelper
controller.cs
<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
    <ejs-dialog id='dialog' header='Dialog Positions' target='#container' width='350px' footerTemplate="<span id='posvalue' style='float:left; padding-left:10px;font-weight: bold;'>Position: {X: 'left', Y: 'top'}</span>">
   <e-content-template>
       <table style='width: 320px;'>
           <tr> <td><input type='radio' name='xy' onclick='changePosition(event)' value='left top' checked='true'>left top</td> <td><input type='radio' name='xy' onclick='changePosition(event)' value='center top'>center top</td> <td><input type='radio' name='xy' onclick='changePosition(event)' value='right top'>right top</td> </tr>
           <tr> <td><input type='radio' name='xy' onclick='changePosition(event)' value='left center'>left center</td> <td><input type='radio' name='xy' onclick='changePosition(event)' value='center center'>center center</td> <td><input type='radio' name='xy' onclick='changePosition(event)' value='right center'>right center</td> </tr>
           <tr> <td><input type='radio' name='xy' onclick='changePosition(event)' value='left bottom'>left bottom</td> <td><input type='radio' name='xy' onclick='changePosition(event)' value='center bottom'>center bottom</td> <td><input type='radio' name='xy' onclick='changePosition(event)' value='right bottom'>right bottom</td> </tr>
       </table>
</e-content-template>
    </ejs-dialog>
</div>
<script>
    function changePosition(event) {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };
        document.getElementById("posvalue").innerHTML = 'Position: {X: "' + event.currentTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"}';
    }
</script>
public class HomeController : Controller
    {

        public ActionResult Index()
        {

            return View();
        }

    }

See Also