syncfusion-aspnetcore-popups

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Dialog — ASP.NET Core

Dialog组件实现——ASP.NET Core

This skill documents how to implement, configure, and customize the Syncfusion Dialog in ASP.NET Core applications using the

<ejs-dialog>

Tag Helper API. It covers setup, modality, positioning, animations, templates, events, accessibility, and styling.

本技能文档介绍如何在ASP.NET Core应用中使用

<ejs-dialog>

Tag Helper API实现、配置和自定义Syncfusion Dialog组件，内容包括设置、模态性、定位、动画、模板、事件、无障碍访问及样式设置。

Quick Links

快速链接

API Reference
Getting Started
Basic Features
Positioning & Sizing
Animations & Transitions
Templates
Accessibility & Localization
Events & Interactions
Styling & Themes

API参考
入门指南
基础功能
定位与尺寸
动画与过渡
模板
无障碍访问与本地化
事件与交互
样式与主题

Quick Start (Tag Helper)

快速入门（Tag Helper）

In your Razor view:

csharp

@using Syncfusion.EJ2

<ejs-dialog id="dialog" header="Welcome" isModal="true" width="500px">
    <e-content-template>
        <p>This is a basic dialog with default settings.</p>
    </e-content-template>
</ejs-dialog>

<script>
    window.onload = function () {
        document.getElementById('openBtn').onclick = function () {
            document.getElementById('dialog').ej2_instances[0].show();
        };
    };
</script>

Ensure you include the script manager and styles in your layout (

_Layout.cshtml

csharp

<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />

<!-- At end of <body> -->
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
<ejs-scripts></ejs-scripts>

在Razor视图中：

csharp

@using Syncfusion.EJ2

<ejs-dialog id="dialog" header="Welcome" isModal="true" width="500px">
    <e-content-template>
        <p>This is a basic dialog with default settings.</p>
    </e-content-template>
</ejs-dialog>

<script>
    window.onload = function () {
        document.getElementById('openBtn').onclick = function () {
            document.getElementById('dialog').ej2_instances[0].show();
        };
    };
</script>

确保在布局文件（

_Layout.cshtml

）中引入脚本管理器和样式：

csharp

<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />

<!-- At end of <body> -->
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
<ejs-scripts></ejs-scripts>

Common Patterns

常见模式

Modal Confirmation Dialog

模态确认对话框

csharp

<ejs-dialog id="confirmDialog" header="Confirm Action" isModal="true" width="400px">
    <e-dialog-buttons>
        <e-dialog-dialogbutton content="Yes" isPrimary="true" click="confirmAction"></e-dialog-dialogbutton>
        <e-dialog-dialogbutton content="No" click="closeDialog"></e-dialog-dialogbutton>
    </e-dialog-buttons>
    <e-content-template>
        <p>Are you sure you want to proceed?</p>
    </e-content-template>
</ejs-dialog>

csharp

<ejs-dialog id="confirmDialog" header="Confirm Action" isModal="true" width="400px">
    <e-dialog-buttons>
        <e-dialog-dialogbutton content="Yes" isPrimary="true" click="confirmAction"></e-dialog-dialogbutton>
        <e-dialog-dialogbutton content="No" click="closeDialog"></e-dialog-dialogbutton>
    </e-dialog-buttons>
    <e-content-template>
        <p>Are you sure you want to proceed?</p>
    </e-content-template>
</ejs-dialog>

Draggable Dialog with Header

可拖动带标题的对话框

csharp

<ejs-dialog id="draggableDialog" 
    header="Drag Me" 
    allowDragging="true" 
    width="500px" 
    showCloseIcon="true">
    <e-content-template>
        <p>Grab the header to drag this dialog.</p>
    </e-content-template>
</ejs-dialog>

csharp

<ejs-dialog id="draggableDialog" 
    header="Drag Me" 
    allowDragging="true" 
    width="500px" 
    showCloseIcon="true">
    <e-content-template>
        <p>Grab the header to drag this dialog.</p>
    </e-content-template>
</ejs-dialog>

Centered Dialog

居中对话框

csharp

<ejs-dialog id="centeredDialog" 
    header="Centered Position" 
    width="500px">
    <e-dialog-position x="center" y="center"></e-dialog-position>
    <e-content-template>
        <p>This dialog is centered on the page.</p>
    </e-content-template>
</ejs-dialog>

csharp

<ejs-dialog id="centeredDialog" 
    header="Centered Position" 
    width="500px">
    <e-dialog-position x="center" y="center"></e-dialog-position>
    <e-content-template>
        <p>This dialog is centered on the page.</p>
    </e-content-template>
</ejs-dialog>

Key Properties

关键属性

Tag Helper Attribute	Type	Purpose	Example
`header`	string	Dialog title bar text	`header="Confirm Delete"`
`isModal`	bool	Shows overlay behind dialog	`isModal="true"`
`width`	string	Dialog width (px, %)	`width="500px"`
`height`	string	Dialog height (px, %)	`height="300px"`
`minHeight`	string	Minimum dialog height	`minHeight="150px"`
`allowDragging`	bool	Enable drag to reposition	`allowDragging="true"`
`enableResize`	bool	Enable end-user resizing	`enableResize="true"`
`showCloseIcon`	bool	Display close (X) button	`showCloseIcon="true"`
`closeOnEscape`	bool	Close on Escape key	`closeOnEscape="true"`
`visible`	bool	Initial visibility	`visible="false"`
`target`	string	Target container selector	`target="#container"`
`cssClass`	string	Custom CSS class(es)	`cssClass="my-dialog"`
`enableRtl`	bool	Right-to-left rendering	`enableRtl="true"`
`enablePersistence`	bool	Persist state on reload	`enablePersistence="true"`
`zIndex`	double	Z-order stacking level	`zIndex="2000"`
`<e-dialog-position>`	DialogPositionData	X/Y positioning	`x="center" y="center"`
`<e-dialog-animationsettings>`	DialogAnimationSettings	Open/close animation	`effect="Zoom" duration="400"`
`footerTemplate`	string	Custom footer HTML string	`footerTemplate="<span>...</span>"`

Removed invalid APIs:
is-hidden
(use
visible="false"
),
position-x
/
position-y
flat attributes (use
<e-dialog-position>
),
allow-resizing
(use
enable-resize
),
max-height
,
max-width
,
min-width
(not supported).

Tag Helper 属性	类型	用途	示例
`header`	string	对话框标题栏文本	`header="Confirm Delete"`
`isModal`	bool	在对话框后方显示遮罩层	`isModal="true"`
`width`	string	对话框宽度（px、%）	`width="500px"`
`height`	string	对话框高度（px、%）	`height="300px"`
`minHeight`	string	对话框最小高度	`minHeight="150px"`
`allowDragging`	bool	启用拖动重定位	`allowDragging="true"`
`enableResize`	bool	允许用户调整尺寸	`enableResize="true"`
`showCloseIcon`	bool	显示关闭（X）按钮	`showCloseIcon="true"`
`closeOnEscape`	bool	按下Esc键关闭对话框	`closeOnEscape="true"`
`visible`	bool	初始可见性	`visible="false"`
`target`	string	目标容器选择器	`target="#container"`
`cssClass`	string	自定义CSS类	`cssClass="my-dialog"`
`enableRtl`	bool	从右到左渲染	`enableRtl="true"`
`enablePersistence`	bool	重载时保留状态	`enablePersistence="true"`
`zIndex`	double	Z轴堆叠层级	`zIndex="2000"`
`<e-dialog-position>`	DialogPositionData	X/Y定位	`x="center" y="center"`
`<e-dialog-animationsettings>`	DialogAnimationSettings	打开/关闭动画	`effect="Zoom" duration="400"`
`footerTemplate`	string	自定义页脚HTML字符串	`footerTemplate="<span>...</span>"`

已移除的无效API：
is-hidden
（改用
visible="false"
）、
position-x
/
position-y
扁平属性（改用
<e-dialog-position>
）、
allow-resizing
（改用
enable-resize
）、
max-height
、
max-width
、
min-width
（暂不支持）。

Next Steps

下一步操作

Read

getting-started.md

for full installation steps, NuGet package setup, and configuration details.

阅读

getting-started.md

获取完整的安装步骤、NuGet包设置及配置详情。