Search results

Getting Started

This section briefly explains about how to include a simple Dialog in your ASP.NET MVC application. You can refer ASP.NET MVC Getting Started documentation page for introduction 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 MVC application to use our components.

Initialize the Dialog

  • Dialog component can be rendered with the help of @Html.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.

Adding component to the Application

  • Now open your view page to render Dialog component.
@Html.EJS().Dialog("dialog").Content("This is a dialog").Target("#container").Width("250px").Render()

Run the application

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

The below example shows the Dialog.

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.

razor
Modal.cs
@section ControlsSection{
<div id='container'>
    @Html.EJS().Button("targetButton").Content("Open Modal Dialog").Render()
    @Html.EJS().Dialog("dialog").IsModal(true).OverlayClick("onOverlayClick").Content("This is a modal dialog").Target("#container").Render()
</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 ActionResult Modal()
{
    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.

razor
EnableHeader.cs
@section ControlsSection{
<div id='container'>
    @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").Header("Dialog").ShowCloseIcon(true).Content("This is a dialog with header").Target("#container").Width("250px").Render()
</div>
}
<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
 </script>
public ActionResult EnableHeader()
{
    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.

razor
EnableFooter.cs
@section ControlsSection{
    <div id="container">
        @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
        @Html.EJS().Dialog("dialog").Header("Dialog").Content("This is a Dialog with button and primary button").Target("#container").Width("250px").Buttons(ViewBag.DialogButtons).Render()
    </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 ActionResult EnableFooter()
{
    ViewBag.DialogButtons = new
            {
                isPrimary = true,
                cssClass = "e-flat",
                content = "OK"
            };
            ViewBag.DialogButton1 = new
            {
                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.

razor
Draggable.cs
@section ControlsSection{

<div id='container'>
    @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").Header("Dialog").Content("This is a Dialog with drag enabled").AllowDragging(true).Target("#container").Width("250px").AllowDragging(true).Buttons(ViewBag.DialogButtons)Render()
</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 ActionResult Draggable()
{
    ViewBag.DialogButtons = new
            {
                isPrimary = true,
                cssClass = "e-flat",
                content = "OK"
            };
            ViewBag.DialogButton1 = new
            {
                content = "Cancel",
                cssClass = "e-flat"
            };
    return View();
}

Positioning

The Dialog position can be set through the position property by providing X and Y coordinates. The Dialog can be positioned inside the target container based on the given X and Y values.

For example position:{ X:‘center’, Y:‘center’ } the possible values

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

The below sample demonstrates the different Dialog positions.

razor
Positioning.cs
@section ControlsSection{

    <div id='container'>
        @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
        @Html.EJS().Dialog("dialog").Header("Dialog Positions").FooterTemplate("<span id='posvalue' style='float:left; padding-left:10px;font-weight: bold;'>Position: {X: 'left', Y: 'top'}</span>").Content(ViewBag.content).Target("#container").Width("250px").CloseOnEscape(false).Buttons(ViewBag.DialogButtons).Render()
    </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 ActionResult Positioning()
{
     ViewBag.content = "<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>";
    return View();
}

See Also