Kurse:News Site erstellen

Um ein neues News-Projekt mit ASP.NET Core MVC und individueller Authentifizierung zu erstellen, führe folgenden Befehl in der Kommandozeile aus:

dotnet new mvc --auth Individual -n News

Dadurch wird ein neues ASP.NET Core MVC-Projekt mit individueller Benutzer-Authentifizierung im Ordner `News` erstellt. Wechsle anschließend in das Projektverzeichnis:

cd News
code .

Jetzt müssen wir eine Datenbank einrichten:

<!-- Installiere das Entity Framework Core CLI-Tool -->
dotnet tool install --global dotnet-ef

Nun erstellen wir die SQLite-Datenbank und führen die Migrationen aus:

dotnet add package Microsoft.EntityFrameworkCore.Sqlite
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet ef database update

Dadurch wird die SQLite-Datenbank entsprechend der aktuellen Migrationen erstellt.

Jetzt installieren wir das Tool `dotnet aspnet-codegenerator`, das für die Gerüstgenerierung (Scaffolding) benötigt wird:

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

Diese Tools werden benötigt, um automatisch Code für Controller, Views und andere Komponenten zu generieren. Das erleichtert die Entwicklung und spart Zeit, besonders wenn du die Benutzeroberfläche (z.B. Formulare für die Benutzerverwaltung) anpassen oder übersetzen möchtest. Um die Login-Seite für die Benutzeranmeldung zu generieren und anschließend ins Deutsche zu übersetzen, führe folgenden Befehl aus:

dotnet aspnet-codegenerator identity -dc ApplicationDbContext --files "Account.Login"

Dadurch wird die Datei `Login.cshtml` im Verzeichnis `Areas/Identity/Pages/Account` erstellt. Öffne diese Datei und passe die Texte an, um sie ins Deutsche zu übersetzen, z.B.:

dotnet aspnet-codegenerator identity -dc ApplicationDbContext --files "Account.Register"

Dadurch wird die Datei `Register.cshtml` im Verzeichnis `Areas/Identity/Pages/Account` erstellt. Öffne diese Datei und passe die Texte an, um sie ins Deutsche zu übersetzen, z.B.:

Gehe zu Views/Shared/_Layout.cshtml und Views/Shared/_LoginPartial.cshtml, um diese ins Deutsche zu übersetzen.

Modell für News-Artikel erstellen

Um ein Modell für News-Artikel zu erstellen, füge im Projektordner `Models` eine neue Datei namens `Artikel.cs` hinzu mit folgendem Inhalt:

using System.ComponentModel.DataAnnotations;

namespace News.Models
{
    public class Artikel
    {
        public int Id { get; set; }
        [Required(ErrorMessage = "Der Titel ist erforderlich.")]
        [StringLength(200, ErrorMessage = "Der Titel darf maximal 200 Zeichen lang sein.")]
        [RegularExpression(@"^(?!.*(<|>|script|iframe|object|embed|form|input|button|link|style|svg|on\w+=|javascript:|data:|SELECT |INSERT |UPDATE |DELETE )).*$", ErrorMessage = "Der Titel darf keinen HTML-, JavaScript- oder SQL-Code enthalten.")]
        public string Titel { get; set; }

        [Required(ErrorMessage = "Der Inhalt ist erforderlich.")]
        [DataType(DataType.MultilineText)]
        [RegularExpression(@"^(?!.*(<script|<iframe|<object|<embed|<form|<input|<button|<link|<style|<svg|on\w+=|javascript:|data:|SELECT |INSERT |UPDATE |DELETE )).*$", 
            ErrorMessage = "Der Inhalt darf keinen JavaScript-Code, keine SQL-Befehle und keine gefährlichen HTML-Tags enthalten.")]
        public string Inhalt { get; set; }

        [DataType(DataType.DateTime)]
        public DateTime VeröffentlichtAm { get; set; }

        [StringLength(100, ErrorMessage = "Der Autor darf maximal 100 Zeichen lang sein.")]
        [RegularExpression(@"^(?!.*(<|>|script|iframe|object|embed|form|input|button|link|style|svg|on\w+=|javascript:|data:|SELECT |INSERT |UPDATE |DELETE )).*$", ErrorMessage = "Der Autor darf keinen HTML-, JavaScript- oder SQL-Code enthalten.")]
        public string Autor { get; set; }
    }
}

Ergänze auf Data/ApplicationDbContext.cs ergänze

using News.Models;

public DbSet<Artikel> Artikel { get; set; }

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using News.Models;
namespace News.Data;

public class ApplicationDbContext : IdentityDbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
        : base(options)
    {
    }

    public DbSet<Artikel> Artikel { get; set; }
}

Jetzt müssen wir folgende Migrations-Befehle ausführen

dotnet ef migrations add ArtikelErstellen
dotnet ef database update

Grud Operations

Um CRUD-Operationen für das Modell `Artikel` zu ermöglichen, generiere einen Controller und die zugehörigen Views mit Scaffolding:

dotnet aspnet-codegenerator controller -name ArtikelController -m Artikel -dc ApplicationDbContext --relativeFolderPath Controllers --useDefaultLayout --referenceScriptLibraries

Dadurch werden der Controller `ArtikelController` im Ordner `Controllers` und die Views im Ordner `Views/Artikel` erstellt.

Jetzt kannst du im Browser unter `/Artikel` die Übersicht, Details, Erstellen-, Bearbeiten- und Löschen-Seiten für News-Artikel aufrufen und verwenden.

Passe die generierten Views (`Views/Artikel/*.cshtml`) an, um die Texte ins Deutsche zu übersetzen und das Layout nach deinen Wünschen zu gestalten.