{"id":55000132,"date":"2018-04-01T00:00:00","date_gmt":"2020-03-27T19:32:07","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=132"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Razor_Pages_mit_Datenbankanbindung","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Razor_Pages_mit_Datenbankanbindung\/","title":{"rendered":"Razor Pages mit Datenbankanbindung"},"content":{"rendered":"

Nachdem Sie in weiteren Artikeln einige Grundlagen zur Programmierung von Razor Pages mit ASP.NET Core kennengelernt haben, geht es nun einen Schritt weiter: Wir wollen eine erste kleine Anwendung für den Zugriff auf die Daten einer Datenbank programmieren. Dazu beginnen wir mit einer kleinen Tabelle, für die wir eine Übersicht und eine Detailseite zum Ansehen und Bearbeiten der einzelnen Felder erstellen. Die Übersicht soll natürlich auch eine Möglichkeit zum Hinzufügen und Löschen der Datensätze bieten.<\/b><\/p>\n

Voraussetzungen<\/h2>\n

Sie benötigen Visual Studio in der Version von 2017, die Sie mit den Komponenten wie im Artikel Visual Studio 2017 Community Edition beschrieben installieren.<\/p>\n

Projekt erstellen<\/h2>\n

Wir erstellen ein Projekt auf Basis der Vorlage Visual C#|Web|ASP.NET Core Webanwendung <\/b>(siehe Bild 1).<\/p>\n

\"Projekt<\/p>\n

Bild 1: Projekt anlegen<\/span><\/b><\/p>\n

Im folgenden Dialog wählen Sie den Eintrag Webanwendung <\/b>aus, da wir hier schon einige Elemente bekommen, die wir sonst manuell nachreichen müssten (siehe Bild 2).<\/p>\n

\"Projektvorlage<\/p>\n

Bild 2: Projektvorlage definieren<\/span><\/b><\/p>\n

Anpassen des Rahmens<\/h2>\n

Mit Rahmen meinen wir die Seite, welche die Navigationsleiste und den Fußbereich der Seite definiert. In unserem automatisch erstellten Demo-Projekt ist dies die Seite _Layout.cshtml<\/b>. Wie die enthaltenen Elemente einer Webanwendung anpassen können, erfahren Sie beispielsweise im Artikel ASP.NET Core-Anwendung anpassen<\/b>. In unserem Fall wollen wir die Bezeichnung unseres Projekts, das an verschiedenen Stellen in der Datei _Layout.cshtml <\/b>gelandet ist, durch die Bezeichnung unserer Anwendung ersetzen – also beispielsweise Kundenverwaltung<\/b>. Außerdem wollen wir das Navigationsmenü so ändern, dass es hinter den Einträgen Home <\/b>und About <\/b>den Eintrag Kunden <\/b>anzeigt.<\/p>\n

Damit dies geschieht, ändern wir in Bild 3 markierten Zeilen in der Datei _Layout.cshtml<\/b>. Die eingerahmten Stellen markieren die zu ändernden Stellen, der Pfeil zeigt den Befehl @RenderBody()<\/b>, an dem später die eigentlichen Inhalte eingefügt werden.<\/p>\n

\"Datei<\/p>\n

Bild 3: Datei _Layout.cshtml anpassen<\/span><\/b><\/p>\n

Den Inhalt der Index-Seite, also der Seite, die direkt beim Starten der Anwendung im Browser angezeigt wird, können Sie auch anpassen. Den ersten div<\/b>-Teil mit id=”myCarousel” <\/b>entfernen wir komplett. Im folgenden div<\/b>-Element entfernen wir die hinteren Auflistungen. Den vorderen Teil können wir wie folgt anpassen. Dabei wollen wir eine kleine Übersicht über die enthaltenen Funktionen bieten. Der Code sieht anschließend wie folgt aus:<\/p>\n

@page\r\n@model IndexModel\r\n@{\r\n     ViewData[\"Title\"] = \"Home page\";\r\n}\r\n<div class=\"row\">\r\n     <div class=\"col-md-3\">\r\n         <h2>Die Beispielanwendung Kundenverwaltung<\/h2>\r\n         <p>Diese Beispielanwendung zeigt, wie Sie eine Demo-Anwendung um Datenbankfunktionen erweitern. Dazu gehören:<\/p>\r\n         <ul>\r\n             <li>Übersichten für Kunden und andere Entitäten mit Schaltflächen zum Anzeigen oder Löschen von Kunden<\/li>\r\n             <li>Anzeige der Kundendetails zum Bearbeiten der Daten<\/li>\r\n             <li>Anzeige der Kundendetails zum Anlegen neuer Kundendatensätze<\/li>\r\n         <\/ul>\r\n     <\/div>\r\n<\/div><\/pre>\n
Wenn Sie die Anwendung danach starten, zeigt der Browser die Seite aus Bild 4 an. Für die wenigen Änderungen, die wir vorgenommen haben, sieht diese schon recht ordentlich aus. Ein Klick auf den Link Kunden in der Navigationsleiste zeigt nun leider noch keine Kundenseite an, was wir als Nächstes in Angriff nehmen werden.<\/p>\n
\"Die<\/p>\n
Bild 4: Die angepasste Startseite<\/span><\/b><\/p>\n
Kunden-Klasse hinzufügen<\/h2>\n
Nun wollen wir uns um die anzuzeigenden Daten kümmern. Dazu benötigen wir eine Datenbank und ein entsprechendes Entity Data Model mit den Klassen für die einzelnen Entitäten. Wir verwenden den Code First-Ansatz, bei dem wir erst die Entitätsklassen definieren und daraus dann automatisch die Datenbank erstellen lassen. Für die Entitätsklassen legen wir direkt unterhalb des Projektordners ein neues Verzeichnis namens Models <\/b>an.<\/p>\n
In diesem Verzeichnis erstellen wir mit dem Kontextmenü-Eintrag Hinzufügen|Klasse… <\/b>eine neue Klassendatei, der wir im folgenden Dialog Neues Element hinzufügen <\/b>den Namen Customer <\/b>geben. Wir könnten auch die deutsche Bezeichnung verwenden, aber beim Entity Framework ist es einfacher, wenn man die Bezeichnungen in englischer Sprache angibt. So kann man leichter Singular durch einfaches Anhängen des Buchstaben s <\/b>in Plural verwandeln. Außerdem muss man dort nicht aufpassen, ob eine Bezeichnung gleichzeitig Singular und Plural ist (im Deutschen beispielsweise Artikel<\/b>!).<\/p>\n
Die Klasse sieht wie folgt aus und wird in der Klassendatei Customer.cs <\/b>angelegt:<\/p>\n
namespace ASPNETCoreEF.Models {\r\n     public class Customer {\r\n         public int ID { get; set; }\r\n         public string FirstName { get; set; }\r\n         public string LastName { get; set; }\r\n         public string Street { get; set; }\r\n         public string Zip { get; set; }\r\n         public string City { get; set; }\r\n     }\r\n}<\/pre>\n
Das Feld ID <\/b>soll der Primärschüssel der noch zu erstellenden Tabelle sein, in der die Daten zu den Kunden gespeichert werden.  Die übrigen Felder benötigen keine weitere Erläuterung. Fremdschlüsselfelder und weitere Tabellen lassen wir aus Gründen der Übersicht zunächst außen vor.<\/p>\n
Beachten Sie, dass durch das Anlegen der Klassendatei im Verzeichnis Models <\/b>auch der Namespace auf ASPNETCoreEF.Models <\/b>eingestellt wurde (ASPNETCoreEF <\/b>ist der Name des Projekts und somit auch als Namespace des Projekts voreingestellt).<\/p>\n
Datenbankkontext erstellen<\/h2>\n
Nun benötigen wir noch die Klasse, welche die Informationen der einzelnen Entitätsklassen – hier nur eine – zusammenfasst und Informationen zum Erstellen des Datenmodells speichert. Dazu fügen wir dem Projekt zunächst einen weiteren neuen Ordner namens Data <\/b>hinzu. Hier legen wir eine neue Klasse namens CustomerManagementContext <\/b>an. Dieser fügen wir im Kopf der Klassendatei zunächst einen Verweis auf den Namespace Microsoft.EntityFrameworkCore <\/b>hinzu:<\/p>\n
using Microsoft.EntityFrameworkCore;<\/pre>\n
Da die Customer<\/b>-Klasse sich im Verzeichnis Models <\/b>und somit auch im Namespace ASPNETCoreEF.Models <\/b>befindet, fügen wir auch diesen Namespace noch hinzu:<\/p>\n
using ASPNETCoreEF.Models;<\/pre>\n
Die Klasse soll die Schnittstelle DbContext <\/b>implementieren. Außerdem erhält Sie ein DbSet<\/b>-Objekt namens Customers<\/b>, welches Elemente des Typs Customer <\/b>aufnehmen soll:<\/p>\n
public class CustomerManagementContext : DbContext {\r\n     public CustomerManagementContext(DbContextOptions<CustomerManagementContext> options) : base(options) {\r\n     }\r\n     public DbSet<Customer> Customers { get; set; }\r\n}<\/pre>\n
Wir überschreiben noch die Methode OnModelCreating <\/b>und geben dort an, dass die Tabelle für die Kunden nicht Customer <\/b>heißen soll, sondern im Plural Customers <\/b>angelegt werden soll:<\/p>\n
protected override void OnModelCreating(ModelBuilder modelBuilder) {\r\n     modelBuilder.Entity<Customer>().ToTable(\"Customers\");\r\n}<\/pre>\n
DbContext beim Anwendungsstart registrieren<\/h2>\n
Damit die Datenbank über das DbContext<\/b>-Objekt gleich nach dem Start zur Verfügung steht, fügen wir der Methode ConfigureServices <\/b>der Datei noch eine entsprechende Anweisung hinzu. Die Datei Startup.cs <\/b>erhält jedoch zuvor zwei zusätzliche Verweise auf die benötigten Namespaces:<\/p>\n
using Microsoft.EntityFrameworkCore;\r\nusing ASPNETCoreEF.Data;<\/pre>\n
Dann ergänzen wir ConfigureServices <\/b>wie folgt:<\/p>\n
public void ConfigureServices(IServiceCollection services) {\r\n     services.AddMvc();\r\n     services.AddDbContext<CustomerManagementContext>(options => \r\n         options.UseSqlServer(Configuration.GetConnectionString(\"DefaultConnection\")));\r\n}<\/pre>\n
Dadurch greift das Projekt auf die Verbindungszeichenfolge zu, die wir noch in der Datei appsettings.json <\/b>speichern müssen. Diese erweitern wir wie folgt:<\/p>\n
{\r\n   \"ConnectionStrings\": {\r\n     \"DefaultConnection\": \"Server=(localdb)<\/font>mssqllocaldb;Database=CustomerManagement;ConnectRetryCount=0;        Trusted_Connection=True;MultipleActiveResultSets=true\"\r\n   },\r\n   \"Logging\": {\r\n     \"IncludeScopes\": false,\r\n     \"LogLevel\": {\r\n       \"Default\": \"Warning\"\r\n     }\r\n   }\r\n}<\/pre>\n
Hier legen wir in der Einstellung ConnectionStrings <\/b>fest, dass die Standardverbindungszeichenfolge den Server localdb <\/b>verwenden soll und der Datenbankname CustomerManagement <\/b>lautet. Außerdem soll Windows-Authentifizierung für den Zugriff auf die Datenbank verwendet werden (Trusted_Connection=True<\/b>).<\/p>\n
Ein paar Daten vorbereiten<\/h2>\n
Nun wollen wir noch dafür sorgen, dass die Tabelle Customers<\/b> beim Start der Anwendung nicht völlig leer ist. Daher fügen wir der Anwendung im Verzeichnis Data <\/b>eine neue Klassendatei namens DbInitializer.cs <\/b>hinzu. Diese füllen wir wie folgt:<\/p>\n
public class DbInitializer {\r\n     public static void Initialize(CustomerManagementContext dbContext) {\r\n         dbContext.Database.EnsureCreated();\r\n         if (dbContext.Customers.Any()) {\r\n             return;\r\n         }\r\n         var customers = new Customer[] {\r\n             new Customer{FirstName=\"André\", LastName=\"Minhorst\", Street=\"Borkhofer Str. 17\", Zip=\"47137\", City=\"Duisburg\"},\r\n             new Customer{ FirstName=\"Klaus\", LastName=\"Müller\", Street=\"Teststr. 1\", Zip=\"12345\", City=\"Berlin\" },\r\n             new Customer{ FirstName=\"Herbert\", LastName=\"Meier\", Street=\"Beispielweg 2\", Zip=\"23456\", City=\"Bremen\"}\r\n         };\r\n         foreach (Customer c in customers) {\r\n             dbContext.Customers.Add(c);\r\n         }\r\n         dbContext.SaveChanges();\r\n     }\r\n}<\/pre>\n
Die Klasse enthält eine Methode namens Initialize<\/b>, welche mit dem Parameter dbContext <\/b>ein Objekt des Typs CustomerManagementContext <\/b>entgegennimmt. Sie prüft zunächst ob die Datenbank bereits erstellt wurde und erledigt dies gegebenenfalls im gleichen Schritt mit der Methode EnsureCreated<\/b>. Dann prüft sie, ob die Customers<\/b>-Tabelle bereits Daten enthält. Falls ja, bricht sie an dieser Stelle ab. Anderenfalls erstellt sie ein Array mit drei Elementen des Typs Customer<\/b>. Die folgende foreach<\/b>-Schleife durchläuft dieses Array und fügt die einzelnen Elemente des Typs Customer <\/b>zum DbSet <\/b>namens Customers <\/b>des dbContext <\/b>hinzu. Die Änderungen werden schließlich mit der SaveChanges<\/b>-Methode gespeichert.<\/p>\n
Nun müssen wir noch dafür sorgen, dass diese Methode zum Erstellen beziehungsweise Füllen der Datenbank auch ausgeführt wird. Dazu ändern wir in der Klassendatei Program.cs <\/b>die Methode Main <\/b>wie folgt:<\/p>\n
public static void Main(string[] args) {\r\n     \/\/            BuildWebHost(args).Run();\r\n     var host = BuildWebHost(args);\r\n     using (var scope = host.Services.CreateScope()) {\r\n         var services = scope.ServiceProvider;\r\n         var dbContext = services.GetRequiredService<CustomerManagementContext>();\r\n         DbInitializer.Initialize(dbContext);\r\n     }\r\n     host.Run();\r\n}<\/pre>\n
Dabei kommentieren wir die dort bereits vorhandene Anweisung aus. Diese ein neues Webhost-Objekt und führte direkt seine Run<\/b>-Methode aus. Hier wollen wir das Erstellen der Datenbank zwischenschalten. Dazu teilen wir die Anweisung auf, sodass diese zunächst das neue Objekt mit BuildWebHost <\/b>erstellt und in der neuen Variable namens host <\/b>speichert. Die Run<\/b>-Methode für die Variable host <\/b>wird dann als letzte Anweisung ausgeführt. Dazwischen fügen wir ein paar neue Anweisungen ein. Die erste erstellt ein neues Scope<\/b>-Element und speichert es in der Variablen scope<\/b>. Über die Eigenschaft ServiceProvider <\/b>holt die Prozedur dann ein Service<\/b>-Objekt und speichert es in der Variablen services<\/b>. Diees stellt dann über die Methode GetRequiredService <\/b>mit dem Typ CustomerManagementContext <\/b>den Datenbankkontext zur Verfügung und speichert diesen in der Variablen dbContext<\/b>. Dieses Objekt übergeben wir dann der Methode Initialize <\/b>der zuvor programmierten Klasse DbInitializer<\/b>.<\/p>\n
Damit alle als fehlerhaft markierten Stellen verschwinden, müssen Sie wieder die folgenden Namespaces referenzieren:<\/p>\n
using Microsoft.Extensions.DependencyInjection;\r\nusing ASPNETCoreEF.Data;<\/pre>\n
Datenbank erstellen<\/h2>\n
Damit ist es soweit: Sie können die Anwendung nun starten und damit die Datenbank erstellen. Sobald der Browser aufgerufen wurde und die Startseite der Anwendung anzeigt, können Sie diese wieder beenden. Wir blenden dann den SQL Server-Objekt-Explorer <\/b>ein (Menüeintrag Ansicht|SQL Server-Objekt-Explorer<\/b>) und klappen die Einträge wie in Bild 5 auf. Wenn die Datenbank CustomerManagement <\/b>dort angezeigt wird, navigieren Sie weiter zur Tabelle dbo.Customers <\/b>und wählen den Kontextmenü-Eintrag Daten anzeigen <\/b>aus. Damit sollten auch die soeben per Code hinzugefügten Datensätze erscheinen.<\/p>\n
\"Die<\/p>\n
Bild 5: Die neue Datenbank mit den frischen angelegten Datensätzen<\/span><\/b><\/p>\n
Die beiden Datenbankdateien CustomerManagement.mdf <\/b>und CustomerManagement.ldf <\/b>wurden auf dem lokalen Rechner im Verzeichnis C:\\Users\\ <\/b>gespeichert. Dabei wurde automatisch der Name als Datenbankname verwendet, den wir in der Verbindungszeichenfolge angegeben haben. Der Tabellenname entspricht wie von uns gewünscht der Plural-Form der verwendeten Klasse Customer<\/b>, also Customers<\/b>. Die Eigenschaftsnamen der Klasse Customer <\/b>wurden als Feldnamen verwendet und das Feld mit dem Namen ID <\/b>wurde automatisch als Primärschlüsselfeld festgelegt.<\/p>\n
Kundenübersicht hinzufügen<\/h2>\n
Da wir neben den Kunden später noch weitere Daten zur Anwendung hinzufügen werden, legen wir für jede Entität einen eigenen Ordner an. Als Erstes benötigen wir also einen Ordner für Kunden, der die Übersicht, die Detailseite et cetera aufnehmen soll. Diesen Ordner legen wir unterhalb des Ordners Pages <\/b>an, und zwar über dessen Kontextmenü-Eintrag Hinzufügen|Neuer Ordner<\/b>. Der neue Ordner soll analog zur englischen Bezeichnung der Tabelle Customers <\/b>heißen.<\/p>\n
Diesem Ordner fügen wir gleich eine neue Razor-Seite hinzu, die wir Index.cshtml <\/b>nennen. Eine neue Razor-Seite fügen Sie dem Ordner hinzu, indem Sie aus seinem Kontextmenü den Eintrag Hinzufügen|Razor-Seite… <\/b>auswählen. Im folgenden Dialog finden Sie dann drei Möglichkeiten (siehe Bild 6):<\/p>\n
\"Anlegen<\/p>\n
Bild 6: Anlegen einer neuen Razor-Seite<\/span><\/b><\/p>\n