Projektvorlagen

PowerPortalsPro liefert zwei Projektvorlagen, die ein komplettes Portal – Dataverse-Konnektivität, Authentifizierung, Sicherheits-Handler, Lokalisierung und vorgefertigte Identitätsseiten – unterstützen und in wenigen Minuten einsatzbereit sind. Eine React-Einzelseiten-App (empfohlen) und eine Blazor-Webanwendung sind beide verfügbar, und das PowerPortalsPro-Funktionsset ist bei beiden identisch. Wähle den Frontend-Stack, der zu deinem Team passt.

Installation der Vorlagen

Installiere das PowerPortalsPro.AspNetCore.Templates-Paket von NuGet über die .NET CLI. Beide Vorlagen werden in diesem einen Paket ausgeliefert:

Auswahl einer Vorlage

Nach der Installation erstellen Sie ein Projekt aus der .NET CLI oder dem Visual Studio-Dialog "Neues Projekt" (suchen Sie nach "Power Portals Pro"). Es stehen zwei Vorlagen zur Verfügung – wählen Sie diejenige, die zu Ihrem Frontend-Stack passt:

React (Empfohlen)

Ein ASP.NET Core-Host, kombiniert mit einer React + Vite + TypeScript einseitigen App, die auf Fluent UI React basiert. Empfohlen für neue Portale – moderne Frontend-Werkzeuge, eine schnelle Hot-Reload-Entwicklungsschleife und der breiteste Komponentenset.

Blazor

Eine ASP.NET Core Blazor Web-App, die auf Fluent UI Blazor basiert, mit einem Rendermodus, den man zur Gerüstzeit über --interactivitywählt. Eine großartige Kombination, wenn dein Team hauptsächlich in C# arbeitet und lieber komplett im .NET-UI-Stack bleibt.

Empfohlen

Beide Vorlagen bieten dieselben PowerPortalsPro-Funktionen – Grids, Editoren, Sicherheit, Lokalisierung und Identität. Wir empfehlen React für neue Projekte, es sei denn, Ihr Team hat einen bestimmten Grund, komplett C# zu wählen, dann wird die Blazor-Vorlage vollständig unterstützt.

Die React-Vorlage

Die Vorlage powerportalspro-react generiert zwei Projekte, die gemeinsam laufen:

• ASP.NET Core-Host – bedient die Daten- und Authentifizierungsendpunkte des Frameworks unter /api/* und hostet das gebaute SPA. Es Program.cs ist ähnlich wie der Blazor-Host konfiguriert (Dataverse-Verbindung, Lokalisierung, Sicherheitshandler) und stellt die JSON-Authentifizierungsendpunkte über MapAuthEndpoints<PortalUser>()offen.
• React Client (.Client) — ein Vite + TypeScript SPA, das auf Fluent UI React basiert und die @powerportalspro/core, @powerportalspro/react, , @powerportalspro/react-fluentsowie @powerportalspro/react-charts Pakete für die Transportschicht, Hooks und Komponenten verbraucht.
• Dev Loop – Drücke F5 (oder starte dotnet run) auf dem Host, und der SpaProxy startet den Vite-Dev-Server für dich, mit Hot-Module-Reload bei Client-Bearbeitungen. Kein separates Terminal erforderlich.
• Gleiche Oberfläche wie Blazor – Beispielseiten für Konten / Kontakte, Seiten für Identität und Kontoverwaltung, Tabellenberechtigungshandler, Navigation sowie Theme-/Site-Einstellungen, alle neu aufgebaut mit React-Komponenten.

Blazor-Interaktivitätsmodi

Die Blazor-Vorlage akzeptiert --interactivity Serverzusätzlich , --interactivity WebAssembly, oder --interactivity Auto um den Rendermodus zu wählen (die React-Vorlage ist immer eine einseitige App, daher gibt es keine entsprechende Option). Die vorangehende Wahl eines Modus beeinflusst nur das generierte Projektlayout – PowerPortalsPro selbst läuft unter allen drei Modi korrekt. Siehe die Seite Blazor Interactivity für einen vollständigen Vergleich.

• Server — interaktive Seiten werden auf dem Server über eine SignalR-Verbindung ausgeführt. Die einfachste Bereitstellung und der kleinste Client-Download. Gute Standardlösung, wenn man unsicher ist.
• WebAssembly — interaktive Seiten werden im Browser als kompilierter .NET-Code ausgeführt. Scaffold ein separates .Client Projekt; der Server hostet die vom Client verbrauchten API-Endpunkte. Am besten für reichhaltige clientseitige UX und die Entlastung der Interaktionsarbeit vom Server.
• Auto — rendert den ersten Lack auf dem Server für eine schnelle wahrgenommene Last und übergibt dann transparent, sobald das Client-Bundle heruntergeladen ist. Vereint das Beste von beidem auf Kosten eines etwas komplexeren Projektlayouts.

Tipp

Die Flagge --interactivity stimmt mit der dotnet new blazor gleichnamigen Standard-Vorlage überein, sodass alles, was du bereits über Blazor-Rendermodi weißt, übernommen wird.

Was enthalten ist

Die Vorlage generiert ein voll funktionsfähiges Portalprojekt mit folgenden Funktionen:

• Beispielseiten — Konto- und Kontaktlistenseiten mit MainGrid sowie Detailseiten mit RecordContext, Editoren und SubGrids.
• Identitätsseiten — Vollständige ASP.NET Kernintegration der Identität mit Seiten Login, Registrieren, Passwort vergessen, Passwort zurücksetzen, Zwei-Faktor-Authentifizierung, E-Mail-Bestätigung und Kontoverwaltung.
• Security Handlers — Vorgefertigte Berechtigungshandler für die Konto- und Kontakttabellen, die Sicherheitsmuster auf Tabellen- und Datensatzebene demonstrieren.
• Layout — Ein MainLayout mit PageLayout, Desktop- und Mobilnavigationsmenüs, Seiteneinstellungen und Themenunterstützung.
• Lokalisierung — Eine JSON-Lokalisierungsdatei (app.en.json) mit Navigationslabels und seitenspezifischen Strings.
• Konfiguration – appsettings.json mit Platzhaltern für Dataverse-Verbindungseinstellungen.

Verständnis Program.cs

Die Program.cs Datei ist der Ort, an dem alle Dienste registriert sind und die Anwendungspipeline konfiguriert ist. Hier ist eine Aufschlüsselung der einzelnen Abschnitte:

React-Template

Der untenstehende Walkthrough beschreibt die Program.csBlazor-Vorlage . Der Host der React-Vorlage registriert dieselben Kerndienste – AddPowerPortalsProWebServer(), das DataverseConnectionOptions, Lokalisierung, Sicherheitshandler und E-Mail – lässt jedoch die Blazor-spezifische AddPowerPortalsProWebBlazorFluentUI() Registrierung weg, bedient stattdessen das React SPA und stellt die Authentifizierungsendpunkte über MapAuthEndpoints<PortalUser>() statt MapAdditionalIdentityEndpoints()frei.

Verteilter Cache

Die Vorlage registriert einen speicherbasierten verteilten Cache. In der Produktion sollte man dies durch einen persistenten Cache wie Redis oder SQL Server ersetzen, um die Leistung über mehrere Instanzen hinweg zu verbessern.

Fließende UI-Registrierung

AddPowerPortalsProWebBlazorFluentUI() registriert alle Fluent UI Blazor-Komponenten, die von PowerPortalsPro-Editoren, Rastern und Layout-Komponenten verwendet werden.

Serverdienste

AddPowerPortalsProWebServer() registriert die zentralen serverseitigen Dienste, einschließlich der Dataverse-Datenzugriffsschicht, Sicherheitsdurchsetzung, Interceptor-Pipeline und Lokalisierungslade.

Dataverse-Verbindung

Die Konfiguration ConnectionOptions legt fest, wie das Portal sich mit Dataverse authentifiziert. Die Vorlage verwendet die Client Secret-Authentifizierung mit Zugangsdaten, die in appsettings.json oder in Benutzergeheimnissen gespeichert sind.

Tipp

Für Sicherheitsbest-Practices speichern Sie Ihre Zugangsdaten während der Entwicklung in User Secrets und in Azure Key Vault oder Umgebungsvariablen in der Produktion. Geben Sie niemals Geheimnisse zur Quellcodekontrolle heraus.

Lokalisierungskonfiguration

AddLocalizationDirectory registriert Verzeichnisse mit Lokalisierungs-JSON-Dateien. Standardmäßig LocalizeAllAvailableTables ist true, sodass Labels, Spaltennamen und View-Namen automatisch aus jeder Dataverse-Tabelle gezogen werden. Setze es auf false und benutze AddTableToLocalize / AddTablesToLocalize um die Lokalisierung auf eine explizite Liste zu beschränken.

Identitätsoptionen

Der Abschnitt IdentityOptions konfiguriert ASP.NET Core Identity-Einstellungen, wie etwa die E-Mail-Bestätigung vor der Anmeldung.

components.PowerPortalsPro.Demo.Client.Customizations.Pages.GettingStarted.ProjectTemplatesPage.program-translation-title

components.PowerPortalsPro.Demo.Client.Customizations.Pages.GettingStarted.ProjectTemplatesPage.program-translation-description

Tipp

components.PowerPortalsPro.Demo.Client.Customizations.Pages.GettingStarted.ProjectTemplatesPage.program-translation-note

Registrierung des Sicherheitsbehandlers

Berechtigungshandler werden im DI-Container registriert, um den CRUD-Zugriff für jede Tabelle zu steuern. Die Vorlage enthält Handler für Account (Vollzugriff) und Contact (Schreibgeschützt mit besitzerbasierten Updates).

E-Mail-Konfiguration

Sie EmailServiceOptions konfigurieren die Absender-E-Mail-Adresse für Kontobestätigung und Passwort-Zurücksetzung. Dies wird über den Dataverse-E-Mail-Dienst gesendet.

Microsoft-Authentifizierung (Optional)

Die Vorlage enthält kommentierten Code zum Hinzufügen der Microsoft Entra ID (Azure AD) Authentifizierung. Entkommentieren und konfigurieren Sie Ihre Client-ID und Ihr Geheimnis, um eine externe Anmeldung über Microsoft-Konten zu ermöglichen.

Middleware-Pipeline

UsePowerPortalsProWebServer() fügt die PowerPortalsPro-Middleware hinzu. UseLocalization() ermöglicht das Lokalisierungssystem. MapAdditionalIdentityEndpoints() registriert den cookie-basierten Login-Endpunkt, der von den Identitätsseiten verwendet wird.

Zwei-Faktor-Authentifizierung (optional)

Die Vorlage enthält kommentierten Code zur Ermöglichung der Zwei-Faktor-Authentifizierung mittels e-mailbasierter Codes. Entkommentieren Sie die AuthenticatorTokenProvider Option und den AddDefaultTokenProviders() Anruf zur Aktivierung.

Häufige Anpassungen

Nachdem Sie das Projekt gerüstet haben, sind hier gängige nächste Schritte:

• Fügen Sie Berechtigungshandler für alle zusätzlichen Dataverse-Tabellen hinzu, auf die Ihr Portal Zugriff hat.
• Jede Dataverse-Tabelle ist standardmäßig lokalisiert. Um einen kleineren Footprint zu vermeiden, setzen LocalizeAllAvailableTables Sie die gewünschten Tische auf false und listen Sie sie auf AddTableToLocalize.
• Registerimplementierungen ITableRecordInterceptor für Geschäftslogik, die vor oder nach Datensatzoperationen läuft.
• Aktualisieren Sie die Navigationsmenüs in NavMenu.razor, DesktopNavMenu.razor, und MobileNavMenu.razor sie entsprechen den Seiten Ihres Portals.
• Fügen Sie neue Seiten mit RecordContext, Editoren und Rastern für Ihre benutzerdefinierten Dataverse-Tabellen hinzu.