{"id":55000125,"date":"2018-04-01T00:00:00","date_gmt":"2020-03-27T19:31:08","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=125"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Einfache_ASPNET_CoreAnwendungen_erstellen","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Einfache_ASPNET_CoreAnwendungen_erstellen\/","title":{"rendered":"Einfache ASP.NET Core-Anwendungen erstellen"},"content":{"rendered":"

ASP.NET-Webanwendungen gibt es schon, seit Microsoft .NET vorgestellt hat. Mit .NET Core und Bootstrap wird dies noch interessanter, vor allem für die Programmierung moderner Webanwendungen mit Responsive Webdesign – also mit einem Design, das auf die Gegebenheiten des jeweiligen Endgerätes reagiert und die Darstellung darauf optimiert. Dies wird möglich mit dem neuen ASP.NET Core und der Bootstrap-Bibliothek. Dieser Artikel zeigt, wie Sie eine einfache Anwendung auf Basis von ASP.NET Core mit Bootstrap erstellen.<\/b><\/p>\n

Voraussetzungen<\/h2>\n

Voraussetzung für das Reproduzieren der in diesem Artikel vorgestellten Abläufe ist das Vorhandensein von Visual Studio Community 2017. Daneben stellt sich an dieser Stelle heraus, dass es gut war, in diesem Magazin zunächst die Programmiersprache C# vorzustellen. ASP.NET Core unterstützt nämlich aktuell noch kein Visual Basic, sondern nur C#.<\/p>\n

Projekt anlegen<\/h2>\n

Um das neue Projekt anzulegen, starten Sie Visual Studio und öffnen den Dialog zum Erstellen eines neuen Projekts. Hier wählen Sie als Projektvorlage den Eintrag Visual C#|Web|ASP.NET Core-Webanwendung<\/b> aus (siehe Bild 1).<\/p>\n

\"Erstellen<\/p>\n

Bild 1: Erstellen einer Webanwendung für .NET Core<\/span><\/b><\/p>\n

Nach dem Festlegen des gewünschten Projektnamens sowie des Speicherorts legt Visual Studio das Projekt allerdings noch nicht direkt an. Zuvor erscheint noch der Dialog aus Bild 2. Hier behalten wir den Eintrag Webanwendung <\/b>sowie die übrigen Einstellungen bei und klicken auf die Schaltfläche OK<\/b>.<\/p>\n

\"Festlegen<\/p>\n

Bild 2: Festlegen weiterer Parameter für die neue Weblösung<\/span><\/b><\/p>\n

Anschließend wird das Projekt erstellt. Ein Blick in den Projektmappen-Explorer liefert die erstellten Projektdateien, die sich – wenig überraschend – in ihrer Zusammensetzung weitgehend von denen einer Desktop-Anwendung unterscheiden (siehe Bild 3). Interessant ist für uns zunächst der Ordner wwwroot<\/b>, der .css<\/b>-Dateien, Bilder und weitere Dateien enthält. Die eigentlichen Internetseiten werden im Verzeichnis Pages <\/b>gespeichert. Hier finden Sie die bekannte Bezeichnungen wie Index<\/b>, Contakt<\/b>, About <\/b>und so weiter, allerdings nicht mit einer Dateiendung wie .html<\/b>, sondern mit der Dateiendung .cshtml<\/b>.<\/p>\n

\"Projektmappen-Explorer<\/p>\n

Bild 3: Projektmappen-Explorer der Webanwendung<\/span><\/b><\/p>\n

ASP.NET Core-Projekt starten<\/h2>\n

Bevor wir näher auf die einzelnen Dateien eingehen, sind wir neugierig, was geschieht, wenn wir einfach einmal auf die Starten<\/b>-Schaltfläche klicken. Diese enthält in diesem Fall die Beschriftung IIS Express<\/b>, was darauf hindeutet, dass wir uns mit der neuen Version von Visual Studio auch gleich noch einen Internet Informationen Server in der Express-Variante installiert haben. Ein Klick auf die Starten<\/b>-Schaltfläche blendet dann in Visual Studio die Diagnose-Tools ein, welche die Speicherauslastung anzeigen. Interessanter ist aber, dass die Anwendung in einem neuen Browser-Fenster angezeigt wird (sofern nicht bereits ein Browser geöffnet ist). Hier finden wir bereits einen Header-Bereich mit der Seitennavigation sowie ein Slide-Element, das verschiedene Features für Web-Anwendungen anpreist (siehe Bild 4). Die Links funktionieren wir erwartet und liefern die entsprechenden weiterführenden Seiten im Browser.<\/p>\n

\"Erster<\/p>\n

Bild 4: Erster Start der Beispielanwendung<\/span><\/b><\/p>\n

In der URL-Leiste finden wir eine Adresse wie localhost:12345<\/b>. localhost <\/b>ist der Standardhostname für den lokalen Computer. Hinter dem Doppelpunkt folgt die Angabe des Ports in Form einer fünfstelligen Zahl. Diese Zahl wird beim Starten des Projekts zufällig vergeben. Unter Application uses <\/b>finden wir bereits einen Hinweis auf die verwendeten Techniken. ASP.NET Core Razor Pages <\/b>bieten einen einfacheren Ansatz zur Programmierung von Web-Anwendungen als es mit den bisherigen ASP.NET basierten Anwendungen nach dem MVC-Pattern der Fall war. Die zweite Technik heißt Bootstrap<\/b>. Dabei handelt es sich um eine Bibliothek, welche das Design von Anwendungen für verschiedene Endgeräte vereinfacht. Wenn Sie unter Verwendung von Bootstrap nun beispielsweise das Browser-Fenster viel schmaler machen, verschwinden die Einträge der Navigationsleiste und werden in Form eines kleinen Icons rechts oben angezeigt, welches dann per Mausklick die Menüeinträge liefert (siehe Bild 5).<\/p>\n

\"Vorteil<\/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