Comprehensive guide for implementing Syncfusion ASP.NET Core Popup components including Dialog, Predefined Dialog, and Tooltip. Covers modal dialogs, positioning, animations, templates, accessibility, event handling, and various dialog and tooltip interaction patterns.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
Datei-Explorer
25 Dateien
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
name
syncfusion-aspnetcore-popups
description
Comprehensive guide for implementing Syncfusion ASP.NET Core Popup components including Dialog, Predefined Dialog, and Tooltip. Covers modal dialogs, positioning, animations, templates, accessibility, event handling, and various dialog and tooltip interaction patterns.
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.
@using Syncfusion.EJ2
<ejs-dialog id="dialog" header="Welcome" isModal= width=>
<e-content-template>
<p>This a basic dialog settings.</p>
</e-content-template>
</ejs-dialog>
<script>
window.onload = function () {
document.getElementById().onclick = function () {
document.getElementById().ej2_instances[].show();
};
};
</script>
"true"
"500px"
is
with
default
'openBtn'
'dialog'
0
Ensure you include the script manager and styles in your layout (_Layout.cshtml):
<!-- 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
<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
<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
<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>
Read getting-started.md for full installation steps, NuGet package setup, and configuration details.
Predefined Dialog
Predefined dialogs are opened imperatively using the DialogUtility JavaScript utility class. They provide ready-to-use alert, confirm, and prompt dialogs without component setup. Use predefined dialogs for quick notifications and user confirmations.
Key Concept
Predefined dialogs are not Tag Helper components. They are invoked via JavaScript:
A tooltip component that displays helpful information or hints when users hover over, click, or focus on an element. The <ejs-tooltip> Tag Helper provides flexible positioning, animations, multiple trigger modes, and accessibility features.
Package:Syncfusion.EJ2.AspNet.Core Tag Helper:<ejs-tooltip>
<ejs-tooltip target="#target" content="Click the × to close me"
opensOn="Click"
isSticky="true"
position="BottomCenter">
<e-content-template>
<button id="target"class="e-btn">Click Me</button>
</e-content-template>
</ejs-tooltip>
Programmatic Open/Close:
<ejs-tooltip id="tooltip" target="#target" content="Tooltip opened programmatically" opensOn="Custom">
<e-content-template>
<button id="target"class="e-btn" onclick="toggleTooltip()">Toggle Tooltip</button>
</e-content-template>
</ejs-tooltip>
<script>
function toggleTooltip() {
var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
var btn = document.querySelector('.e-btn');
if (btn.getAttribute('data-tooltip-open') === 'true') {
tooltipObj.close();
btn.setAttribute('data-tooltip-open', 'false');
} else {
tooltipObj.open(btn);
btn.setAttribute('data-tooltip-open', 'true');
}
}
</script>
