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 component to the Application

  • Now open your view page to render Toolbar component.
tagHelper
data.cs
<ejs-button id="normalbtn" content="Open"></ejs-button>
    <ejs-dialog id="default_dialog" width="500px" target="#target" open="dialogOpen" Content="<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>"
               close="dialogClose" showCloseIcon="true" header="About SYNCFUSION succintly series">
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="ViewBag.button" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult DefaultFunctionalities()
        {
            ViewBag.button = new
            {
                content = "LEARN ABOUT SYNCFUSION, INC."
            };
            return View();
        }
    }
}

ASP.NET Core 1.0 Application Using Visual Studio 2017

System Requirements

To work with ASP.NET Core 1.0, you need to make sure is whether you have installed the following software on your machine

  • Visual Studio 2017

  • DotNetCore 2.0

Configure Syncfusion UI Components in ASP.NET Core Application

The following steps helps to create a ASP.NET Core web application to configure our components.

  • Open Visual Studio 2017 to create ASP.NET Core web application.

  • After project creation, install the Syncfusion Packages in your application.

  • Select the Tools->Nuget Package Manager->Package Manager settings the dialog window will open.

  • Navigate to the Nuget Package Manager->Package Sources from the options dialog.

  • Click the Add button to create the new package sources.

  • Select the newly created Package Source and rename the source name using the Name input box.

    Name: Name of the package that listed in Available package sources

    Source: Syncfusion ASP.NET Core NuGet Package feed URL

    https://api.nuget.org/v3/index.json

Adding TagHelpers

  • Now open _viewImports.cshtml file from the views folder and add the following namespace for components references and Tag Helper support.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2

Adding ScriptManager

  • Add ScriptManager to the bottom of the layout.cshtml page. The ScriptManager used to place our control initialization script in the page.
<ej-scripts> </ej-scripts>

Adding themes

Refer the required theme file in your layout.cshtml page from wwwroot/styles folder.

    <link href="~/styles/material.css" rel="stylesheet"/>

Above referred CSS is material theme. Likewise you can refer the theme specific CSS which is present inside the styles folder in order to render Dialog component with required themes. The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components. This web tool is useful to combine the required component scripts and styles in a single file.

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.

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
Modal.cs
@section ControlsSection{

<div id='container'>
    <ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
    <ejs-dialog id='dialog' isModal="true" 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 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.

tagHelper
EnableHeader.cs
@section ControlsSection{
<div id='container'>
    <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 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.

tagHelper
EnableFooter.cs
@section ControlsSection{

<div id='container'>
<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.DialogButtons" click="dlgButtonClick"></e-dialog-dialogbutton>
        <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButton1" 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 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.

tagHelper
Draggable.cs
@section ControlsSection{

<div id='container'>
<ejs-button id="targetButton" content="Open Modal 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.DialogButtons" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButton1" 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 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.

tagHelper
Positioning.cs
@section ControlsSection{

        <div id='container'>
            <ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
            <ejs-dialog id='dialog' header='Dialog Positions' content='@ViewBag.content' target='#container' width='350px' footerTemplate="<span id='posvalue' style='float:left; padding-left:10px;font-weight: bold;'>Position: {X: 'left', Y: 'top'}</span>">
            </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 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