{"id":55000144,"date":"2018-08-01T00:00:00","date_gmt":"2020-03-27T19:33:39","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=144"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"RazorPages_Daten_aus_LookupTabellen","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/RazorPages_Daten_aus_LookupTabellen\/","title":{"rendered":"Razor-Pages: Daten aus Lookup-Tabellen"},"content":{"rendered":"

Im Artikel “Razor Pages mit Datenbankanbindung” haben wir gezeigt, wie Sie Daten aus einfachen Tabellen in einer Übersichtliste anzeigen, Details bearbeiten, neue Datensätze anlegen und vorhandene Datensätze ändern. In diesem Artikel nun wollen wir eine Lookup-Tabelle hinzunehmen, mit der wir die Anreden der Kunden aus der bereits vorhandenen Tabelle abbilden. Diese sollen dann in den Details per Nachschlagefeld ausgewählt werden. Eine kleine Schaltfläche neben dem Nachschlagefeld soll es dann ermöglichen, die Lookup-Daten zu bearbeiten.<\/b><\/p>\n

Lookup-Entität hinzufügen<\/h2>\n

Im Artikel EDM: 1:n-Beziehungen per Code First<\/b> erfahren Sie im Detail, wie Sie 1:n-Beziehungen zwischen zwei Entitäten aufbauen.<\/p>\n

Für den vorliegenden Artikel wollen wir der bisher verwendeten Klasse Customer <\/b>eine weitere Klasse namens Salutation <\/b>hinzufügen, die wir dazu im Ordner Models <\/b>anlegen:<\/p>\n

public class Salutation {\r\n     public int ID { get; set; }\r\n     public string Name { get; set; }\r\n     public ICollection<Customer> Customers { get; set; }\r\n}<\/pre>\n
Um die Beziehung zwischen den beiden Klassen herzustellen, fügen wir der Klasse Customer <\/b>auch noch zwei Elemente hinzu:<\/p>\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     public int SalutationID { get; set; }\r\n     public Salutation Salutation { get; set; }\r\n}<\/pre>\n
Schließlich fügen wir die neue Klasse noch als DbSet <\/b>zur Klasse CustomerManagementContext <\/b>im Verzeichnis Data <\/b>hinzu:<\/p>\n
public class CustomerManagementContext : DbContext {\r\n     ...\r\n     public DbSet<Customer> Customers { get; set; }\r\n     public DbSet<Salutation> Salutations { get; set; }\r\n     ...\r\n}<\/pre>\n
Danach übernehmen Sie die Änderungen durch das Absetzen der folgenden beiden Anweisungen in der Paket-Manager-Konsole in die Datenbank, die in der Verbindungszeichenfolge der Datei appsettings.json <\/b>angegeben ist:<\/p>\n
Add-Migration Init\r\nUpdate-Database<\/pre>\n
Um die Datenbank frisch anzulegen, löschen Sie die Datenbank zuvor aus dem SQL Server-Objekt-Explorer und entfernen auch alle Einträge im Verzeichnis Migrations <\/b>im Projektmappen-Explorer.<\/p>\n
Daten hinzufügen<\/h2>\n
Und damit beim Starten der Anwendung und beim Initialisieren auch noch ein paar Daten in der Tabelle Salutations <\/b>landen und das Feld Salutation <\/b>der Datensätze der Tabelle Customers <\/b>mit Werten aus der Tabelle Salutations <\/b>gefüllt wird, passen wir auch noch die Methode Initialize <\/b>in der Klasse DbInitializer <\/b>an:<\/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 salutations = new Salutation[] {\r\n             new Salutation { Name = \"Herr\" },\r\n             new Salutation { Name = \"Frau\" },\r\n             new Salutation { Name = \"Firma\" }\r\n         };\r\n         foreach (Salutation s in salutations)             {\r\n             dbContext.Salutations.Add(s);\r\n         }\r\n         var customers = new Customer[] {\r\n             new Customer{FirstName=\"André\", LastName=\"Minhorst\", Street=\"Borkhofer Str. 17\", Zip=\"47137\", \r\n                 City=\"Duisburg\", Salutation=salutations[0] }, ...\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
Diese legt nun zuerst einige Anreden an, bevor die Kunden mit dem jeweiligen Verweis auf die Anrede mit dem namens Herr <\/b>hinzugefügt werden. Danach speichert die Methode die hinzugefügten Elemente mit der SaveChanges<\/b>-Methode.<\/p>\n
Anzeigen der Anreden in der Übersicht der Kunden<\/h2>\n
Als Erstes wollen wir die Seite Pages|Customers|Index.cshtml <\/b>so anpassen, dass sie die Anrede der Kunden anzeigt. Dazu fügen wir der Tabelle auf der Seite Index.cshtml <\/b>jeweils eine Spalte zum Element thead|tr <\/b>und zum Element tbody|tr <\/b>hinzu. Dabei geben wir als Wert zunächst das Feld SalutationID <\/b>an:<\/p>\n
<table class=\"table\">\r\n     <thead>\r\n         <tr>\r\n             ... andere Überschriften ...\r\n             <th>\r\n                 @Html.DisplayNameFor(model => model.Customer[0].Salutation)\r\n             <\/th>\r\n             <th><\/th>\r\n         <\/tr>\r\n     <\/thead>\r\n     <tbody>\r\n@foreach (var item in Model.Customer) {\r\n         <tr>\r\n             ... andere Feldinhalte ...\r\n             <td>\r\n                 @Html.DisplayFor(modelItem => item.SalutationID)\r\n             <\/td>\r\n             ...\r\n         <\/tr>\r\n}\r\n     <\/tbody>\r\n<\/table><\/pre>\n
Die Übersichtsseite zeigt nun eine neue Spalte mit dem Fremdschlüsselwert des Feldes SalutationID<\/b> an (siehe Bild 1). Das ist zwar ein erster Schritt, aber nicht das, was wir erreichen wollen – wir möchten ja den Wert des Feldes Name<\/b> des Datensatzes der Tabelle Salutations<\/b>, der mit dem aktuellen Datensatz der Tabelle Customers <\/b>verknüpft ist, anzeigen. Dazu ändern wir schlicht und einfach das Feld:<\/p>\n
\"Ein<\/p>\n
Bild 1: Ein erster Schritt – die Anzeige des Fremdschlüsselwertes<\/span><\/b><\/p>\n
     @Html.DisplayFor(modelItem => item.Salutation.Name)\r\n<\/td><\/pre>\n
Dies führt allerdings nicht zum gewünschten Ergebnis – auf diese Weise bleibt die Spalte schlicht leer. Auch die einfache Verwendung von item.Salutation <\/b>liefert eine leere Spalte. Allerdings wird auch keine Ausnahme ausgelöst – wo liegt also das Problem Es liegt daran, dass wir nur die Daten der Tabelle Customers <\/b>laden, aber nicht die der verknüpften Tabelle Salutations <\/b>– und diese beherbergt nun einmal das Feld Name<\/b>, mit dem wir die Anrede in der Tabelle ausgeben wollen.<\/p>\n
Um diese Daten zu laden, gibt es verschiedene Möglichkeiten. Die einfachste ist diese hier, bei der wir einfach die Daten des Salutation<\/b>-Elements zum jeweiligen Customer<\/b>-Objekt auslesen, und zwar indem wir mit der Include<\/b>-Methode arbeiten (mittlere Anweisung):<\/p>\n
public async Task OnGetAsync(string firstName, string firstNamePart) {\r\n     var customers = from m in _context.Customers select m;\r\n     customers = customers.Include(c => c.Salutation);\r\n     Customer = await customers.ToListAsync();\r\n}<\/pre>\n
Dies liefert endlich die gewünschten Anreden in der Auflistung der Kunden (siehe Bild 2).<\/p>\n
\"Kundenliste<\/p>\n
Bild 2: Kundenliste mit Anreden<\/span><\/b><\/p>\n
Anrede beim Anlegen oder Ändern auswählen<\/h2>\n
Nun gehen wir einen Schritt weiter und schauen uns den Dialog zum Bearbeiten eines Kunden an. Hier wollen wir das Steuer-element für die Auswahl der Anrede ebenfalls integrieren.<\/p>\n
In diesem Fall benötigen wir kein einfaches Textfeld, sondern ein Auswahlfeld. Unter HTML heißen diese Steuer-elemente Select<\/b>-Felder.<\/p>\n
Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span>
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t
\n\n\t\t\n\t\t