Add detailed comments and app flow documentation for BlazorWasm
Added comprehensive inline comments (mainly in German) to key files (index.html, Program.cs, App.razor, MainLayout.razor, NavMenu.razor, Catalogs.razor, CatalogApiClient.cs) to clarify their roles and the overall application flow. Updated Home.razor with a clearer heading and intro. Introduced Ablauf.cs, which documents the loading order and responsibilities of each major component. These changes enhance codebase clarity and maintainability, especially for German-speaking developers.
This commit is contained in:
OlgunR
60
DbFirst.BlazorWasm/Ablauf.cs
Normal file
60
DbFirst.BlazorWasm/Ablauf.cs
Normal file
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
Ablauf und die Rolle jeder Datei in der Blazor WebAssembly-Anwendung:
|
||||
|
||||
1.index.html
|
||||
• Reihenfolge: Wird als erstes geladen, wenn die Anwendung im Browser geöffnet wird.
|
||||
• Purpose:
|
||||
• Lädt die Blazor WebAssembly-Umgebung (blazor.webassembly.js).
|
||||
• Definiert den Platzhalter <div id="app">, in dem die Blazor-Komponenten gerendert werden.
|
||||
• Bindet Stylesheets und Skripte ein, die für das Styling und die Funktionalität der Anwendung benötigt werden.
|
||||
|
||||
2. Program.cs
|
||||
• Reihenfolge: Wird nach index.html ausgeführt, sobald die Blazor-Umgebung initialisiert ist.
|
||||
• Purpose:
|
||||
• Initialisiert die Blazor WebAssembly-Anwendung.
|
||||
• Registriert Root-Komponenten (App) und Abhängigkeiten (z. B. HttpClient, CatalogApiClient).
|
||||
• Konfiguriert die Basis-URL für API-Aufrufe.
|
||||
|
||||
3. App.razor
|
||||
• Reihenfolge: Wird als nächstes geladen, nachdem die Anwendung initialisiert wurde.
|
||||
• Purpose:
|
||||
• Definiert die Routing-Logik der Anwendung.
|
||||
• Entscheidet, welche Komponente basierend auf der URL gerendert wird.
|
||||
• Stellt sicher, dass ein Standardlayout (MainLayout) verwendet wird.
|
||||
|
||||
4.MainLayout.razor
|
||||
• Reihenfolge: Wird geladen, wenn eine Seite gerendert wird, da es das Standardlayout ist.
|
||||
• Purpose:
|
||||
• Definiert das Hauptlayout der Anwendung.
|
||||
• Enthält die Navigationsleiste (NavMenu) und den Platzhalter für den Seiteninhalt (@Body).
|
||||
|
||||
5. NavMenu.razor
|
||||
• Reihenfolge: Wird als Teil des Layouts (MainLayout) geladen.
|
||||
• Purpose:
|
||||
• Stellt die Navigationsleiste bereit.
|
||||
• Enthält Links zu verschiedenen Seiten der Anwendung (z. B. Home, Catalogs).
|
||||
• Ermöglicht das Ein- und Ausklappen des Menüs.
|
||||
|
||||
6. Catalogs.razor
|
||||
• Reihenfolge: Wird geladen, wenn der Benutzer die URL /catalogs aufruft.
|
||||
• Purpose:
|
||||
• Stellt die Benutzeroberfläche für die Verwaltung von Katalogen bereit.
|
||||
• Nutzt CatalogApiClient, um Daten von der API zu laden, zu erstellen, zu aktualisieren oder zu löschen.
|
||||
• Verwendet DevExpress-Komponenten für ein modernes UI.
|
||||
|
||||
7. CatalogApiClient.cs
|
||||
• Reihenfolge: Wird verwendet, wenn Catalogs.razor API-Aufrufe ausführt.
|
||||
• Purpose:
|
||||
• Kapselt die Kommunikation mit der API.
|
||||
• Bietet Methoden für CRUD-Operationen (Create, Read, Update, Delete) auf Katalog-Daten.
|
||||
• Behandelt Fehler und gibt benutzerfreundliche Fehlermeldungen zurück.
|
||||
|
||||
Zusammenfassung des Ablaufs:
|
||||
1.index.html: Lädt die Blazor-Umgebung und startet die Anwendung.
|
||||
2. Program.cs: Initialisiert die Anwendung und registriert Abhängigkeiten.
|
||||
3. App.razor: Definiert die Routing-Logik und lädt das Standardlayout.
|
||||
4. MainLayout.razor: Stellt das Hauptlayout bereit.
|
||||
5. NavMenu.razor: Lädt die Navigationsleiste.
|
||||
6. Seiten wie Catalogs.razor: Werden basierend auf der URL gerendert.
|
||||
7. CatalogApiClient.cs: Führt API-Aufrufe aus, wenn die Seite Daten benötigt.
|
||||
*/
|
||||
@@ -1,4 +1,11 @@
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
@*
|
||||
• Ist der logische Einstiegspunkt der Blazor-Anwendung.
|
||||
• Sie definiert die Routing-Logik und das Standardlayout der Anwendung.
|
||||
• Der Router-Komponent in App.razor entscheidet, welche Blazor-Komponente basierend auf der URL geladen wird.
|
||||
kurz: Steuert die Navigation und das Rendering der Blazor-Komponenten.
|
||||
*@
|
||||
|
||||
<Router AppAssembly="@typeof(App).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
@inherits LayoutComponentBase
|
||||
@* Definiert das Hauptlayout der Anwendung.
|
||||
Enthält die Navigationsleiste und den Hauptinhalt. *@
|
||||
|
||||
@inherits LayoutComponentBase
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
<NavMenu /> <!-- Einbindung der Navigationsleiste -->
|
||||
</div>
|
||||
|
||||
<main>
|
||||
@@ -10,7 +13,7 @@
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
@Body
|
||||
@Body <!-- Platzhalter für den Seiteninhalt -->
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
@* Definiert die Navigationsleiste, die Links zu verschiedenen Seiten der Anwendung enthält. *@
|
||||
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">DbFirst.BlazorWasm</a>
|
||||
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
|
||||
@@ -25,8 +27,10 @@
|
||||
@code {
|
||||
private bool collapseNavMenu = true;
|
||||
|
||||
// CSS-Klasse für die Navigation, die den Zustand (eingeklappt/ausgeklappt) steuert.
|
||||
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
|
||||
|
||||
// Methode zum Umschalten des Navigationsmenüs.
|
||||
private void ToggleNavMenu()
|
||||
{
|
||||
collapseNavMenu = !collapseNavMenu;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@* Stellt die Catalog-Verwaltung bereit.
|
||||
Nutzt CatalogApiClient für API-Interaktionen und DevExpress-Komponenten für die Benutzeroberfläche. *@
|
||||
|
||||
@page "/catalogs"
|
||||
@inject CatalogApiClient Api
|
||||
|
||||
@@ -111,6 +114,9 @@ else
|
||||
|
||||
private async Task LoadCatalogs()
|
||||
{
|
||||
// Lädt die Liste der Kataloge aus der API.
|
||||
// Setzt Ladezustand und behandelt Fehler.
|
||||
|
||||
isLoading = true;
|
||||
errorMessage = null;
|
||||
try
|
||||
@@ -155,6 +161,9 @@ else
|
||||
|
||||
private async Task HandleSubmit()
|
||||
{
|
||||
// Behandelt das Absenden des Formulars.
|
||||
// Führt entweder eine Aktualisierung oder das Anlegen eines neuen Eintrags durch.
|
||||
|
||||
errorMessage = null;
|
||||
infoMessage = null;
|
||||
|
||||
@@ -201,6 +210,9 @@ else
|
||||
|
||||
private async Task DeleteCatalog(int id)
|
||||
{
|
||||
// Löscht einen Katalogeintrag basierend auf der ID.
|
||||
// Aktualisiert die Liste nach erfolgreichem Löschen.
|
||||
|
||||
errorMessage = null;
|
||||
infoMessage = null;
|
||||
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
<h1>Db First approach</h1>
|
||||
|
||||
Welcome to your new app.
|
||||
This is a Blazor WebAssembly application demonstrating the Database First approach using DevExpress components.
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
/* Initialisiert die Blazor WebAssembly-Anwendung.
|
||||
Registriert Root-Komponenten
|
||||
Konfiguriert Abhängigkeiten */
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using DbFirst.BlazorWasm;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
/* Kapselt die Kommunikation mit der API für den Catalog-Endpunkt.
|
||||
Bietet Methoden für CRUD-Operationen auf Catalog-Daten */
|
||||
|
||||
using System.Net;
|
||||
using System.Net.Http.Json;
|
||||
using System.Text.Json;
|
||||
@@ -65,6 +68,9 @@ public class CatalogApiClient
|
||||
|
||||
private static async Task<string> ReadErrorAsync(HttpResponseMessage response)
|
||||
{
|
||||
// Liest und analysiert Fehlerdetails aus der API-Antwort.
|
||||
// Gibt eine benutzerfreundliche Fehlermeldung zurück.
|
||||
|
||||
string? problemTitle = null;
|
||||
string? problemDetail = null;
|
||||
|
||||
@@ -116,6 +122,9 @@ public class CatalogApiClient
|
||||
|
||||
private static string FormatSuffix(string? title, string? detail, string? reason)
|
||||
{
|
||||
// Formatiert zusätzliche Informationen für Fehlermeldungen.
|
||||
// Kombiniert Titel, Details und Grund in einer lesbaren Form.
|
||||
|
||||
var parts = new List<string>();
|
||||
if (!string.IsNullOrWhiteSpace(title)) parts.Add(title);
|
||||
if (!string.IsNullOrWhiteSpace(detail)) parts.Add(detail);
|
||||
|
||||
@@ -1,34 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--
|
||||
• Ist der technische Einstiegspunkt der Blazor WebAssembly-Anwendung.
|
||||
• Sie lädt die notwendigen Ressourcen (z. B. das Blazor-Skript blazor.webassembly.js)
|
||||
und definiert den Platzhalter <div id="app">, in dem die Blazor-Komponenten gerendert werden.
|
||||
• Ohne diese Datei könnte die Blazor-Anwendung nicht starten, da sie die Verbindung
|
||||
zwischen der statischen HTML-Welt und der Blazor-Welt herstellt.
|
||||
kurz: Startet die Anwendung und lädt die Blazor-Umgebung.
|
||||
-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DbFirst.BlazorWasm</title>
|
||||
<base href="/" />
|
||||
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
|
||||
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
|
||||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<link href="DbFirst.BlazorWasm.styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<svg class="loading-progress">
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
</svg>
|
||||
<div class="loading-progress-text"></div>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DbFirst.BlazorWasm</title>
|
||||
<base href="/" />
|
||||
|
||||
<div id="blazor-error-ui">
|
||||
An unhandled error has occurred.
|
||||
<a href="" class="reload">Reload</a>
|
||||
<a class="dismiss">🗙</a>
|
||||
</div>
|
||||
<script src="_framework/blazor.webassembly.js"></script>
|
||||
</body>
|
||||
<!-- Stylesheets für DevExpress und Bootstrap -->
|
||||
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
|
||||
<link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
|
||||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
|
||||
<!-- Favicon und App-spezifische Styles -->
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<link href="DbFirst.BlazorWasm.styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Einstiegspunkt der Blazor-Anwendung -->
|
||||
<div id="app">
|
||||
<svg class="loading-progress">
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
<circle r="40%" cx="50%" cy="50%" />
|
||||
</svg>
|
||||
<div class="loading-progress-text"></div>
|
||||
</div>
|
||||
|
||||
<!-- Fehler-UI für unvorhergesehene Fehler -->
|
||||
<div id="blazor-error-ui">
|
||||
An unhandled error has occurred.
|
||||
<a href="" class="reload">Reload</a>
|
||||
<a class="dismiss">🗙</a>
|
||||
</div>
|
||||
|
||||
<!-- Blazor WebAssembly-Skript -->
|
||||
<script src="_framework/blazor.webassembly.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user