ASP.NET Core-Anwendung anpassen

Wenn Sie ein Abonnement des Magazins 'DATENBANKENTWICKLER' besitzen, können Sie sich anmelden und den kompletten Artikel lesen.
Anderenfalls können Sie das Abonnement hier im Shop erwerben.

ASP.NET Core-Anwendung anpassen

Wenn Sie ein neues Projekt auf Basis der Vorlage »Visual C#|Web|ASP.NET Core-Webanwendung« mit dem Typ »Webanwendung« erstellt haben, finden Sie eine komplette Beispielanwendung vor. Im Gegensatz dazu steht der Typ »Leer«, mit dem Sie eine komplett leere Anwendung erstellen, der allerdings auch jegliche Infrastruktur wie etwa das Menü, die CSS-Dateien und vieles mehr fehlen. Wir wollen einmal von einer Anwendung des Typs »Webanwendung« ausgehend betrachten, welche Anpassungen notwendig sind, um die Beispielinhalte, -menüs und -designs in eigene Elemente umzuwandeln.

Für die Beispiele dieses Artikels legen Sie wieder ein Projekt auf Basis der Vorlage Visual C#|Web|ASP.NET Core-Webanwendung an. Wählen Sie im Dialog Neue ASP.NET Core Webanwendung den Eintrag Webanwendung aus. Dies liefert eine Anwendung, die nach dem Starten ein Menü und entsprechende Inhalte im Webbrowser anzeigt (siehe Bild 1). Allerdings ist es gar nicht so einfach, zu identifizieren, wo die einzelnen Bestandteile der Anwendung wie die Inhalte, das Menü und das Layout definiert sind. Somit ist auch die Anpassung etwas kompliziert. Aber genau das beleuchtet der vorliegende Artikel: Wir sehen uns an, wo die verschiedenen Elemente, die Sie nach dem Start der Beispielanwendung sehen, angepasst werden können und wie Sie eine für eigene Zwecke vorbereitete Vorlage daraus erstellen können.

So sieht die Anwendung nach dem ersten Start aus.

Bild 1: So sieht die Anwendung nach dem ersten Start aus.

Startseite anpassen

Wir beginnen mit der Seite, die zu Beginn angezeigt wird. In einem Projekt, das auf Basis der oben genannten Vorlage erstellt wurde, sind die Seiten mit den Inhalten im Ordner Pages untergebracht. Hier finden wir auch gleich die Seite Index.cshtml. Die Index-Seite ist normalerweise die zuerst angezeigte Seite einer Webanwendung, wenn keine anderen Seite in der URL angegeben wurde. Nach einem Doppelklick auf den entsprechenden Eintrag im Projektmappen-Explorer zeigt dann auch gleich den Code der Seite an (siehe Bild 2). Interessanterweise finden wir hier ganz oben nicht etwa den Code für die Menüleiste, sondern den für den Slider, der durchlaufend verschiedene Inhalte anzeigt. Um zu prüfen, welche Inhalte nun überhaupt in der Seite Index.cshtml gespeichert werden, kommentieren wir einfach einmal alle HTML-Inhalte dieser Seite aus. Das erledigen Sie in .cshtml-Seiten auf eine der folgenden Arten: Entweder Sie verwenden die unter HTML üblichen Elemente zum Auskommentieren () oder Sie nutzen die dafür vorgesehenen Tags der Razor Pages, nämlich @*...*@. Ich nutze gern immer die zum Auskommentieren vorgesehene Tastenkombination Strg + K, Strg + C und zum Einkommentieren Strg + K, Strg + U. Dies schließt den markierten Text in @*...*@ ein und kommentiert diesen so aus.

Code der Seite Index.cshtml

Bild 2: Code der Seite Index.cshtml

Danach starten wir die Webanwendung erneut und schauen uns an, was von der Startseite übrig bleibt. Das Ergebnis sehen Sie in Bild 3 – es bleiben nur das Menü und die Fußzeile übrig. Damit wissen wir schon einmal, welchen Teil der Webanwendung wir über die Seite Index.cshtml manipulieren können. Darüber hinaus stellt sich heraus, dass Index.cshtml nicht den kompletten Inhalt der angezeigten Startseite enthält, sondern nur den zwischen Navigationsleiste und Fußzeile erscheinenden Inhalt. Den Rest müssen wir also an anderen Stellen im Projekt suchen.

Was von Index.cshtml übrig bleibt ...

Bild 3: Was von Index.cshtml übrig bleibt ...

Navigationsleiste ändern

Als Nächstes wollen wir herausfinden, wo sich der Code für die Navigationsleiste befindet. Dazu schauen wir uns den Quellcode der Webseite an. Dazu klicken Sie beispielsweise unter Google Chrome mit der rechten Maustaste auf die Webseite und wählen den Kontextmenü-Eintrag Seitenquelltext anzeigen aus. Dies öffnet dann eine neue Registerseite im Browser mit dem Inhalt aus Bild 4. Die Einträge für die Navigationsleiste finden wir dann im unteren Bereich. Die relativen Links, die zu den übrigen Seiten führen und die in den -Elementen unter dem Attribut href angegeben sind, heißen etwa /About und /Contact. Davon ausgehend, dass der Code der Navigationsleiste nicht dynamisch auf Basis der Daten etwa aus einer Datenbank generiert wird, müssten sich also in den Dateien des Projekts die Zeichenfolgen /About und /Contact finden lassen. Die passenden Dateien dazu befinden sich dann im gleichen Verzeichnis wie die Datei, welche diese Links enthält – darauf weist der relative Pfad mit /About hin.

Dies war die Leseprobe dieses Artikels.
Melden Sie sich an, um auf den vollständigen Artikel zuzugreifen.

Bitte geben Sie die Zeichenfolge in das nachfolgende Textfeld ein

Die mit einem * markierten Felder sind Pflichtfelder.

Neues aus unseren Magazinen
Listenfeld: Reihenfolge mehrerer Einträge...

Wir haben bereits in mehreren Beiträgen beschrieben, wie Sie die individuelle Reihenfolge von Elementen einer Tabelle über den Inhalt eines Feldes etwa namens »ReihenfolgeID« einstellen können –... [mehr]

Diagramme mit gefilterten Daten

In Ausgabe 2/2019 haben wir in zwei Artikeln die modernen Diagramme von Access vorgestellt. Im vorliegenen Beitrag zeigen wir Ihnen, wie Sie diese abhängig von den in einem Formular angezeigten... [mehr]

Benutzerverwaltung mit verschlüsselten...

Wenn Sie in einer Access-Anwendung Benutzer verwalten wollen, die sich per Benutzername und Kennwort an die Anwendung anmelden, sollten Sie sehr sensibel mit den in der Anwendung gespeicherten... [mehr]

HTML-Tabellen mit fester Kopfzeile

In den vorherigen Ausgaben von Access im Unternehmen und in der aktuellen Ausgabe arbeiten wir in einigen Beiträgen mit dem Webbrowser-Steuerelement und stellen Daten, die wir mit den Bordmitteln... [mehr]

Flexible HTML-Tabellen mit fester Kopfzeile

Im Beitrag »HTML-Tabellen mit fester Kopfzeile« haben wir gezeigt, wie Sie Daten aus einer bestimmten Abfrage in einem Webbrowser-Steuerelement so anzeigen, dass die Spaltenköpfe oben fixiert... [mehr]

Berechtigungen per HTML verwalten

Im Beitrag »Benutzerverwaltung mit verschlüsselten Kennwörtern« stellen wir eine Lösung vor, in der wir die Berechtigungen von Benutzergruppen an Datenbankobjekten definieren. Dort benötigen wir... [mehr]

Benutzer und Berechtigungen ermitteln

In den Beiträgen »Benutzerverwaltung mit verschlüsselten Kennwörtern« und »Berechtigungen per HTML verwalten« haben wir die Voraussetzungen für eine Benutzerverwaltung geschaffen. Im vorliegenden... [mehr]

Zugriffsrechte mit Datenmakros

Es gibt verschiedene Möglichkeiten, auf Basis des aktuell angemeldeten Benutzers sicherzustellen, dass dieser nur die für ihn vorgesehenen Aktionen mit Daten durchführen darf – beispielsweise durch... [mehr]

Kennwörter generieren

Für den einen oder anderen Zweck möchten Sie vielleicht Kennwörter generieren oder in einer Benutzeroberfläche die Möglichkeit zum Generieren von Kennwörtern anbieten. Wenn Sie etwa Benutzer zu... [mehr]

Neuer Datensatz von Frontend zu Backend

Für manche Themen gibt es keine kurze, prägnante Überschrift. In diesem Fall wollen wir zeigen, wie Sie einen neuen Datensatz anlegen, der in einer temporären Tabelle im Frontend gespeichert wird,... [mehr]