Search results

Getting Started

This section briefly explains about how to include a Dialog component in your Blazor client-side application. You can refer Getting Started with Syncfusion Blazor for Client-Side in Visual Studio 2019 Preview page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  • Install Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Please ensure to check the Include prerelease option.
  • You can add the client-side resources through CDN or local npm package in the <head> element of the ~/wwwroot/index.html page.
<head>
    <environment include="Development">
        <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
     </environment>
</head>

Initialize the Blazor Dialog component

Initialize the Essential JS 2 Dialog component in any web page (razor) in the Pages folder. For example, the Dialog component is added in the ~/Pages/Index.razor page.

The following code explains how to initialize a simple Dialog in Razor page.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups

<EjsDialog  Width="250px">
    <DialogTemplates>
        <Content> This is a Dialog with content</Content>
    </DialogTemplates>
</EjsDialog>

Run the application

After successful compilation of your application, simply run the application.

The output will be as follows.

Dialog Default

A modal shows an overlay behind the Dialog. So, the users 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 OnOverlayClick event. In the following code, it explains the Dialog close action performed while clicking the overlay.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@OnClicked">Open Modal Dialog</EjsButton>
<EjsDialog @ref="DialogObj" Width="250px" IsModal="true">
    <DialogEvents  OnOverlayClick="OnOverlayclick">
    </DialogEvents>
    <DialogTemplates>
        <Content> This is a modal dialog</Content>
    </DialogTemplates>
</EjsDialog>

@code {
    EjsDialog DialogObj;

    private void OnClicked() {
        this.DialogObj.Show();
    }
    private void OnOverlayclick(object arg)
    {
        this.DialogObj.Hide();
    }
}

The output will be as follows.

Modal Dialog

Show or hide the dialog

By default, the Visible property is enabled and it has two-way binding support in Blazor dialog. So, the dialog is displayed on page load itself while initializing a dialog without configuring the Visible property. Bind the Visible property as mentioned below to hide the dialog on page load and show it on button click.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
<EjsDialog @ref="DialogObj" Width="250px" IsModal="true" ShowCloseIcon="true" @bind-Visible="@DlgVisible">
    <DialogTemplates>
        <Header> Dialog</Header>
        <Content> This is a dialog with header</Content>
    </DialogTemplates>
</EjsDialog>

@code {
    EjsDialog DialogObj;

    private bool DlgVisible = false;

    private void OnClicked()
    {
        this.DialogObj.Show();
    }
}

Enable header

The Dialog header can be enabled by adding the header content as text or HTML content using the Header template of the dialog.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
<EjsDialog @ref="DialogObj" Width="250px" ShowCloseIcon="true" IsModal="true">
    <DialogTemplates>
        <Header> Dialog</Header>
        <Content> This is a dialog with header</Content>
    </DialogTemplates>
</EjsDialog>

@code {
    EjsDialog DialogObj;

    private void OnClicked() {
        this.DialogObj.Show();
    }
}

The output will be as follows.

dialog

Render Dialog with buttons

Create ButtonModel object and set it to DialogButton property as the following code to render a Dialog with buttons in Razor page.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<EjsButton @onclick="@OnBtnClick">Open Dialog</EjsButton>
<EjsDialog @ref="DialogObj" Width="250px" ShowCloseIcon="true" IsModal="true">
    <DialogTemplates>
        <Header> Dialog</Header>
        <Content> This is a Dialog with button and primary button</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton ButtonModel="@OkBtn" OnClick="@OnClick" />
        <DialogButton ButtonModel="@CancelBtn" OnClick="@OnClick"/>
    </DialogButtons>
</EjsDialog>

@code {
    EjsDialog DialogObj;

    private void OnClick(Object args)
    {
        this.DialogObj.Hide();
    }
    private void OnBtnClick()
    {
        this.DialogObj.Show();
    }

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel OkBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "OK", IsPrimary = true };
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel CancelBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Cancel" };
}

The output will be as follows.

dialog

See Also