Status: 15.05.2017
Hallo zusammen,
ich habe vor einigen Tagen hier im Forum die Frage gestellt, ob Interesse an einem Guide, bzw. How-To besteht, wie man eine Website statt mit PHP und HTML in ASP.Net aufbauen kann. Auf diese Frage kam leider gar keine Reaktion, aber da ich Lust darauf habe mich außerhalb meines Jobs mit der Technik zu beschäftigen werde ich hier in diesem How-To Schritt für Schritt eine simple Homepage bauen.
Aufgrund meiner begrenzten Zeit kann ich dieses How-To nicht auf einen Schlag abfrühstücken, sondern werde immer mal wieder wenn ich die Zeit finde diesen Beitrag erweitern.
Vielleicht kann ich einige von euch begeistern und für das Thema interessieren, das ist mein primäres Ziel hierbei.
In dieser ersten Version des Beitrags, oder in dem ersten Schritt der Entwicklung, möchte ich ein paar Worte über die Funktionsweise von ASP.Net verlieren und zeigen, wie man damit arbeitet. Im Anschluss an die Erklärungen wird eine ganz einfache Programmierung gezeigt.
Schritt 1: Vorbereitung ist alles!
Bevor wir mit irgendwelchen Programmierungen oder Designs anfangen müssen einige technische Voraussetzungen erfüllt werden.Wir benötigen einen IDE! Ich benutze Microsoft Visual Studio in der Community Edition, diese gibt es Bitte melden Sie sich an, um diesen Link zu sehen. zum kostenlosen Download. Achtet bei der Installation darauf, dass ihr die ASP.Net und Webentwicklungstools mitnehmt.
Bitte melden Sie sich an, um dieses Bild zu sehen.
Nach der erfolgreichen Installation müsst ihr Visual Studio über den NuGet-Paket-Manager noch ein Paket hinzufügen, damit Verbindungen zu MySQL-Datenbanken ermöglicht werden. Öffnet dazu in Visual Studio den Reiter Extras und sucht dort nach dem Menüpunkt NuGet-Paket-Manager. Von diesem Menüpunkt öffnet ihr die Paket-Manager-Konsole, welche sich im unteren Bereich von Visual Studio öffnet.
Bitte melden Sie sich an, um dieses Bild zu sehen.
In der Konsole gebt ihr den Befehl Install-Package MySql.Data ein. Befolgt dann die Anweisungen auf dem Bildschirm.
Das war es auch schon mit den Voraussetzungen, nun erstellen wir ein neues Projekt und schauen uns Grundlagen von ASP.Net an 
.
Schritt 2: Das ASP.Net Projekt
Nachdem wir erfolgreich Visual Studio heruntergeladen haben und die MySQL Erweiterung installiert haben, erstellen wir ein neues Projekt. Geht dazu im Menüband von Visual Studio unter Datei -> Neu -> Projekt.
Unter dem Reiter Vorlagen finden wir einen Menüpunkt, der Visual C# heißt. Erweitert die Ansicht mit einem Klick auf den Pfeil links neben dem Menüpunkt und wählt den Unterpunkt Web aus. In der mittleren Anzeige des Fensters habt ihr nun drei Auswahlmöglichkeiten, wählt dort das oberste Ergebnis, die ASP.NET Webanwendung, aus.
Bitte melden Sie sich an, um dieses Bild zu sehen.
Gebt dem Projekt nun noch einen Namen, ändert falls ihr wollt den Speicherort und bestätigt anschließend mit dem Button OK.
Nachdem ihr auf OK gedrückt habt erscheint ein neues Fenster, in dem ihr aus diversen Vorlagen für Websiten auswählen könnt. Da wir für unsere Website ja ein eigenes Design verwenden werden wählen wir in dieser Maske die leere Vorlage aus. Alle anderen Einstellungen lassen wir unberührt.
Bitte melden Sie sich an, um dieses Bild zu sehen.
Auch hier bestätigen wir unsere Auswahl wieder mit dem Button OK. Nun erstellt uns Visual Studio unser Projekt.
Wie rechts in dem Projektmappen-Explorer zu sehen, ist unsere Website eigentlich noch gar keine echte Website, da wir noch keine Seite haben. Diese muss manuell hinzugefügt werden.
Dies erreichen wir mit der Tastenkombination STRG + SHIFT + A. Sucht in dem sich öffnenden Fenster nach der Auswahlmöglichkeit "Webformular".
Bitte melden Sie sich an, um dieses Bild zu sehen.
Gebt dem Objekt den Namen Default.aspx. Dies ist das Gegenstück zu den index.html oder index.php Dateien, die als Startseite fungieren.
Die Datei Default.aspx wird nun dem Projekt hinzugefügt und der Code öffnet sich im IDE.
Nun sind ein paar Erklärungen nötig.
In der ersten Zeile des Codes sind schon die ersten Unbekannten zu finden. Diese müsste etwa so aussehen:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Metin2WebsiteTutorial.Default" %>
Was bedeutet das nun alles?
Mit den spitzen Klammern und dem Prozent Zeichen werden Codeblöcke definiert. In diesen Codeblöcken kann mit C# programmiert werden. In diesem Fall finden wir dort aber keine Programmierung, sondern die grundlegenden Einstellungen der Website. Von diesen Einstellungen sollte nichts entfernt werden, da sie die Funktionsweise der Website beeinflussen oder sogar stören können. Wir beschäftigen uns erstmal mit den Eigenschaften "Page Language" und "CodeBehind". Die "CodeBehind" Eigenschaft gibt an, in welcher Datei der Quellcode von Funktionen geschrieben wird. Dazu im folgenden mehr. Mit der "Page Language" Eigenschaft wird definiert, welche Programmiersprache in der CodeBehind-Datei verwendet wird.
Zu CodeBehind:
ASP.NET unterstützt zwei Verfahren für das Verfassen von Seiten:
- Inline-Code
- Hinterlegter Code (CodeBehind)
Inline-Code ist der Code, der direkt in die ASP.NET-Seite eingebettet ist, wie in der ersten Zeile der Website zu sehen.
Der hinterlegte Code ist der Code, der in einer separaten Klassendatei enthalten ist. Dies erlaubt eine saubere Trennung des HTML-Codes vom logischen Code der Website. Die CodeBehind-Datei wird vor der eigentlichen Website kompiliert, dadurch stehen die Funktionalitäten zur Laufzeit bereit.
Die CodeBehind-Datei, oder Klassendatei, kann über den Projektmappen-Explorer geöffnet werden, indem die Ansicht der Default-Website erweitert wird.
Bitte melden Sie sich an, um dieses Bild zu sehen.
Mit einem Doppelklick wird die Datei geöffnet.
Schritt 3: Eine erste Programmierung
In diesem Schritt wollen wir eine erste Programmierung vornehmen, um das Zusammenspiel zwischen der CodeBehind-Datei und der Website zu veranschaulichen. Dazu wollen wir ganz unspektakulär ein Label mit einer Eingabe aus einer Textbox füllen, wenn ein Button auf der Website gedrückt wird.
In der Default.aspx Datei fügen wir dazu dem HTML-Formular drei Objekte hinzu, eine Textbox, ein Label und einen Button. In dem <div>-Tag schrieben wir dazu folgendes:
- <asp:TextBox ID="myTextbox" runat="server"></asp:TextBox>
- <br />
- <asp:Button ID="myButton" runat="server" Text="Anzeigen" OnClick="myButton_Click" />
- <br />
- <asp:Label ID="myLabel" runat="server"></asp:Label>
Dazu ein paar Erklärungen. Objekte werden mit dem Tag <asp:> begonnen und mit </asp:> wieder geschlossen, ähnlich wie in HTML. Ebenfalls werden den Objekten Attribute mitgegeben. Die unbedingt nötigen Attribute um mit den Objekten arbeiten zu können ist die "ID" und "runat". Das "runat"-Attribut gibt an, dass der Code auf dem Server, also dem Webspace, ausgeführt wird.
Alle ASP.NET-Steuerelemente erfordern eine Verarbeitung auf dem Server und werden aus dem ASP.NET-Markup in das tatsächliche HTML-Markup übersetzt, das im Browser des Clients gerendert werden kann. Ein <asp: button> Tag kann von dem Internetbrowser nicht verarbeitet werden, aber ein <input type = "submit"> dagegen schon.
ASP.NET Markup ist im Grunde eine Abstraktion von HTML. runat="server" ist also eine Richtlinie für ASP.NET, die mitteilt, dass eine bestimmte Steuerung die Verarbeitung auf dem Server erfordert. Jedes Objekt, das diese Richtlinie nicht enthält, wird ignoriert, wenn die Seite kompiliert und ausgeführt wird.
Mit dem Attribut "ID" kann im Code auf das Objekt, bzw. Control zugegriffen werden. Ein Beispiel wird gleich in der Programmierung verwendet.
Eure Default.aspx Datei sollte nun folgendermaßen aussehen:
Bitte melden Sie sich an, um dieses Bild zu sehen.
Um zu testen, ob die Objekte, oder auch Controls, richtig angezeigt werden könnt ihr die Website mit STRG + F5 ausführen. Durch das Drücken von STRG wir der Debugger nicht gestartet.
Das Label wird logischerweise noch nicht angezeigt, da es noch keinen Text besitzt. Das ändern wir nun.
Dem Button wurde schon ein OnClick-Event hinzugefügt. Das bedeutet, dass beim Drücken des Knopfes eine Aktion ausgeführt wird. Um diese Aktion zu programmieren öffnen wir die CodeBehind-Datei Default.aspx.cs. Die Datei sollte wie folgt aussehen:
Bitte melden Sie sich an, um dieses Bild zu sehen.
In dem myButton_Click-Event fügen wir nun folgenden Code ein
- if (!String.IsNullOrEmpty(myTextbox.Text))
- {
- myLabel.Text = myTextbox.Text;
- }
- else
- {
- myLabel.Text = "Bitte einen Text in die Textbox eingeben.";
- }
Spiechert nun den Code mit STRG + S und führt die Website nochmal aus. Probiert aus was passiert!
Dies sind die ersten Schritte des Tutorials. Leider muss ich gleich wieder los, die nächsten Tage werde ich hier aber wie schon am Anfang geschrieben immer wieder etwas erweitern.
Ich hoffe, dass euch das Konzept gefällt und ich euch schon ein wenig interessieren konnte. Falls ihr nicht auf meine Fortführung warten wollt könnt ihr gerne im Internet nach Tutorials, Erklärungen usw. suchen, das wäre für mich schon ein Erfolg.
Bitte teilt mir eure Meinungen, Gedanken, Anmerkungen mit damit ich besser auf eure Wünsche und Interessen eingehen kann. Bitte bedenkt dabei, dass sich das How-To hier an alle Benutzer des Forums richten soll und ich deshalb auch alle Basics im Umgang mit Visual Studio erkläre.
Viele Grüße
