Internetanwendungen mit C# und ASP.NET
Bei .NET handelt es sich um ein umfangreiches Framework von Microsoft zur Erstellung von Anwendungsprogrammen. Sollen diese Programme auf einem Internetserver laufen, kommt das spezialisierte Framework ASP.NET zum Einsatz. Damit lassen sich dynamische Websites entwickeln. Der Begriff ASP steht für Active Server Pages, also für interaktive Webseiten, die von einem Internetserver generiert werden.
Falls Sie bereits eine der Sprachen beherrschen, die innerhalb des .NET-Frameworks eingesetzt werden können, lassen sich diese Kenntnisse leicht auf die Website-Programmierung mit ASP.NET erweitern. Vorzugsweise kommen dabei VB.NET oder C# zum Einsatz. Nachfolgend werden die Grundlagen und einige wichtige Aspekte von ASP.NET mithilfe von C#-Programmen vermittelt:
- Aus welchen Elementen besteht eine Internetanwendung?
- Wie arbeite ich mit einer lokalen Entwicklungs- und Testumgebung?
- Wie baue ich eine Website mit Server- und Clientelementen auf?
Grundlagen von Internetanwendungen
Eine Internetanwendung wird mithilfe eines Browsers (Firefox, Chrome, Edge, Safari, ...) aufgerufen. Nach Eingabe einer Adresse wird die gewünschte Startseite von einem Webserver angefordert und erscheint im Browser.
Statische Internetanwendungen
Der einfachste Typ einer solchen Anwendung besteht aus statischen Internetseiten, die über Hyperlinks miteinander verbunden sind. Statisch bedeutet in diesem Fall, dass sich die Inhalte nicht aufgrund von Benutzeraktionen verändern. Diese Seiten werden mithilfe der Markierungssprache HTML erstellt.
Zur Formatierung von Internetseiten kommt CSS zum Einsatz. CSS steht für Cascading Style Sheets. Hierbei handelt es sich um einander ergänzende Formatvorlagen, die dazu dienen, Internetseiten ein einheitliches Aussehen zu geben. Das ist z. B. bei Unternehmenspräsentationen besonders wichtig. Außerdem können mithilfe von CSS weitergehende Formatierungen als in HTML durchgeführt werden.
Dynamische Internetanwendungen
Dynamische Internetanwendungen können sich aufgrund von Aktionen des Benutzers verändern. Hier kommen die Programmiersprachen ins Spiel. Man muss dabei zwischen clientseitiger Programmierung und serverseitiger Programmierung unterscheiden.
Ein Beispiel für clientseitige Programmierung: Falls der Benutzer die Maus über ein Bild auf einer Internetseite bewegt, wird das Bild gegen ein anderes Bild getauscht. Ein solcher Rollover-Effekt kann z. B. mit der clientseitigen Programmiersprache JavaScript erstellt werden.
Clientseitig bedeutet, dass das gesamte Programm, das HTML-Code und JavaScript-Code beinhaltet, beim Aufruf der Seite auf den Rechner des Benutzers geladen wird. Bewegt er die Maus über das Bild, ist das ein Ereignis. Dazu gibt es, ähnlich wie in C#, eine Ereignismethode. Es wird ein JavaScript-Programm aufgerufen, das sich bereits auf seinem Rechner befindet. Für diesen Ablauf ist keine weitere Kommunikation über das Internet mit dem Webserver notwendig.
Ein Beispiel für serverseitige Programmierung: Wenn der Benutzer auf der Internetseite einer Suchmaschine einen Suchbegriff eingibt und den Senden-Button betätigt, erscheint eine Seite mit Suchergebnissen. Ein solches Programm kann mit serverseitiger Programmierung erstellt werden, z. B. mit C# unter ASP.NET oder mit Java, PHP oder Perl.
Serverseitig bedeutet, dass das gesamte Programm, das HTML-Code und C#-Code beinhaltet, beim Aufruf der Seite zunächst auf dem Server abläuft. Der C#-Code generiert wiederum HTML-Code. Das Ergebnis, das nur noch aus HTML-Code besteht, wird auf den Rechner des Benutzers geladen. Zur Verarbeitung des Suchbegriffs und zur Erzeugung der Seite mit den Suchergebnissen ist diesmal eine weitere Kommunikation über das Internet mit dem Webserver notwendig.
Vorteile von ASP.NET
Reale Internetseiten enthalten häufig sowohl serverseitig verarbeiteten Code als auch HTML-Code, CSS-Code und JavaScript-Code. Sie wären also gezwungen, zur Erstellung solcher Seiten theoretisch gleich mehrere Sprachen zu erlernen und ihren Einsatz sinnvoll miteinander zu kombinieren. Hier bietet die Erstellung von Seiten mithilfe von ASP.NET folgende Vorteile:
- Es sind nur einfache HTML-Kenntnisse notwendig.
- Die vorhandenen Kenntnisse in C# (oder einer anderen .NET-Sprache) können genutzt werden.
- CSS-Code und JavaScript-Code werden automatisch generiert. Weder das eine noch das andere muss erlernt werden.
- Dem Programmierer steht das .NET-Framework mit seinen Klassen zur Verfügung, das ihm z. B. den gewohnten Zugriff auf Datenbanken ermöglicht, die auf dem Webserver liegen.
Die erforderlichen einfachen HTML-Kenntnisse lernen Sie in diesem Artikel ganz nebenbei bei der Erstellung der Programme für ASP.NET.
Ein lokaler Webserver
Dynamische Internetanwendungen, die unter ASP.NET erstellt werden, laufen nur mithilfe von Webservern, die mit dem .NET-Framework zusammenarbeiten können. Während der Entwicklung einer solchen Anwendung wird daher zum Testen ein lokaler Webserver benötigt. Sie möchten sicherlich nicht jede Seite, die Sie programmieren, nach jeder Änderung ins Internet hochladen und erst danach testen. In Visual Studio wird beim Start einer Web-Anwendung automatisch ein interner Webserver aufgerufen,
Eine erste Internetanwendung
Anhand eines ersten statischen Beispiels soll das Erstellen und Ausführen einer Internetanwendung erläutert werden. Zunächst rufen Sie in Visual Studio wie gewohnt den Menüpunkt Datei/Neu/Projekt auf. Anschließend wählen Sie in der Kategorie Installiert/Vorlagen/Visual C#/Web die Vorlage ASP.NET Web-Anwendung aus. In das Feld Name geben Sie den Projektnamen ein, hier WebHalloWelt. Im Dialogfeld Neue ASP.NET-Web-Anwendung wählen Sie Leer aus, damit Sie eine leere Projektvorlage erhalten, und betätigen abschließend den Button Ok. Im Dialogfeld App-Service erstellen betätigen Sie den Button Überspringen.
Nun muss der Anwendung noch eine Datei hinzugefügt werden, die später im Browser angezeigt wird. Dazu markieren Sie im Projektmappen-Explorer das Projekt. Anschließend rufen Sie über das Kontextmenü den Menüpunkt Hinzufügen/Neues Element auf und wählen in der Kategorie Installiert/Visual C#/Web das Template HTML-Seite aus. Die Datei soll den Namen index.htm haben.
In der Datei index.htm wird der nachfolgende Code ergänzt und gespeichert. Dabei werden Sie feststellen, dass beim Eingeben einige Elemente automatisch erstellt bzw. ergänzt werden.
Listing 1: Projekt "WebHalloWelt", Datei index.htm
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>WebHalloWelt</title> </head> <body> Hallo Welt </body> </html>
Das ist eine rein statische, unveränderliche Internetanwendung – nur in HTML, noch ohne C#. Sie hätten sie natürlich auch ohne die Entwicklungsumgebung entwickeln können.
Zum Betrachten des Ergebnisses starten Sie die Anwendung wie gewohnt über das Menü Debuggen/Debugging starten (oder über die Funktionstaste F5 bzw. den grünen Pfeil). Dadurch wird der Entwicklungswebserver aufgerufen, und es erscheint nach kurzer Zeit Ihr Standardbrowser mit der Ausgabe.
Die Adresse http://localhost:xxxx/index.htm in der Adressleiste des Browsers setzt sich zusammen aus:
- http: dem Namen des Übertragungsprotokolls
- localhost: dem Namen des lokalen Webservers
- xxxx: einer vom lokalen Webserver gewählten Portnummer
- index.htm: dem Namen der Datei mit dem HTML-Code
Wenn Sie Änderungen im Code vornehmen und die Datei speichern, reicht es aus, die Browserseite zu aktualisieren, um das neue Ergebnis zu sehen. Die Anwendung muss dazu nicht beendet werden.
Möchten Sie die Anwendung beenden, wird das wie gewohnt von der Entwicklungsumgebung aus durchgeführt über das Menü Debuggen/Debugging Beenden (oder über das dunkelrote Quadrat in der Symbolleiste). Alternativ können Sie auch den Browser schließen. Je nachdem, welchen Browser Sie nutzen, müssen Sie beides einzeln durchführen.
HTML-Dateien bestehen aus Text und HTML-Markierungen. Diese Markierungen sind meist Container, d. h., sie bestehen aus einer Start- und einer Endmarkierung:
- Zu Beginn der Datei index.htm wird festgehalten, dass es sich um ein HTML-Dokument nach dem sogenannten W3C-Standard handelt.
- In den meta-Angaben wird die Zeichenkodierung UTF-8 festgelegt. Sie vereinfacht unter Anderem die Nutzung der deutschen Umlaute.
- Im Container <html> ... </html> steht der gesamte HTML-Code.
- Zwischen <head> und </head> stehen der Titel und Informationen über das Dokument.
- Der Container <title> ... </title> beinhaltet den Titel, der in der Titelleiste des Browsers angezeigt wird.
- Im Container <body> ... </body> steht der Code für die Inhalte, die im Browserfenster angezeigt werden.
Eine erste ASP.NET-Anwendung
Der Code der ersten dynamisch generierten ASP.NET-Anwendung erscheint zunächst etwas umfangreich und verwirrend – besonders im Vergleich zum Ausgabeergebnis. Er enthält aber viele wichtige Elemente, die auch in den nachfolgenden Programmen vorkommen werden. Abb.2 zeigt die Ausgabe.
Zur Erstellung: Wie im vorigen Abschnitt wird eine neue leere ASP.NET-Web-Anwendung mit dem Namen WebErstes erzeugt. Dem Projekt wird wiederum eine HTML-Seite aus der Kategorie Internet, diesmal mit dem Namen default.aspx, hinzugefügt. Das ist die Standardstartdatei innerhalb des Verzeichnisses einer ASP.NET-Anwendung. Es folgt der Code dieser Datei
Listing 2: Projekt "WebErstes", Datei default.aspx
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title>WebErstes</title>
<%@ page language="C#" %>
<script runat="server">
private void Page_Load()
{
int x, y, z;
x = 5;
y = 12;
z = x + y;
ergebnis.InnerText = "Ergebnis: " + z;
}
</script>
</head>
<body>
<p id="ergebnis" runat="server"></p>
</body>
</html>Zur Erläuterung des C#-Blocks:
- Der C#-Block beginnt nach dem Dokumenttitel. Mithilfe der sogenannten Page-Direktive wird dem lokalen Webserver mitgeteilt, dass die Sprache C# verwendet werden soll. ASP.NET kann nämlich auch mit anderen Sprachen aus Visual Studio arbeiten.
- Der nächste Container <script runat="Server"> ... </script> beinhaltet den C#-Code.
- runat="Server" bewirkt, dass der Code auf dem Server ausgeführt wird. Nur in diesem Fall kann die Seite erfolgreich generiert werden.
- Innerhalb des Blocks mit dem C#-Code befinden Sie sich bereits innerhalb einer Klassendefinition. Die vorliegende Klasse ist von der Klasse Page abgeleitet. Jede Internetseite ist ein Objekt dieser Klasse. Es können klassenweit gültige Variablen deklariert und Methoden geschrieben werden, so wie es auch bei der Programmierung mit C# geschieht.
- Die Methode Page_Load() wird durchlaufen, falls die Seite geladen wird. Sie entspricht der Methode Form1_Load() bei einer Windows-Anwendung. In der Methode werden die Starteinstellungen für die Seite vorgenommen.
- Innerhalb der Page_Load-Methode wird serverseitig eine Berechnung mithilfe von drei Variablen durchgeführt. Das Ergebnis wird als Eigenschaft des Elements ergebnis festgelegt, das erst weiter unten im Body des Dokuments aufgeführt wird. Es handelt sich um die Eigenschaft InnerText, diese steht für den Inhalt eines HTML-Elements.
Zur Erläuterung des HTML-Containers:
- Die Container html und body sind bereits bekannt.
- Innerhalb von body steht ein p-Container. Damit wird ein eigener Absatz gebildet. Über id="ergebnis" erhält der Absatz eine eindeutige ID. Diese ID und runat="Server" werden benötigt, damit der Absatz von C# aus mit Inhalt gefüllt und gegebenenfalls formatiert werden kann.
Wie bereits am Anfang erwähnt, wird durch ASP.NET HTML-Code generiert und mit dem vorhandenen HTML-Code verbunden. Das Ergebnis ist reiner HTML-Code, der vom Webserver zum Benutzer gesandt wird.
Falls Sie sich den Quelltext im Browser anschauen (im Internet Explorer über das Kontextmenü und Quellcode anzeigen), sehen Sie innerhalb des Absatzes nur noch Folgendes:
Listing 3: Projekt "WebErstes", Browser, Quellcodeansicht
... <body> <p id="ergebnis">Ergebnis: 17</p> ... </body> ...
Die Anwendung kann wie die anderen Internetanwendungen aus Visual Studio heraus nach Markierung der Datei default.aspx mithilfe der Taste F5 gestartet werden. Lassen Sie sich nicht von den Fehlermeldungen beim Starten im Visual Studio-Fenster Fehlerliste irritieren. Im Browser wird die Internetseite mit ihren Inhalten korrekt angezeigt.
Fehlerhafte Programmierung
Ein weiterer Vorteil von ASP.NET kommt bei Programmierfehlern zum Tragen. Im Codefenster der Entwicklungsumgebung wird bereits auf Fehler in C# und fehlerhaftes HTML aufmerksam gemacht. Im Browser wird anschließend eine detaillierte Fehlermeldung angezeigt mit Zeilennummer und optischer Hervorhebung. In Abb.3 sehen Sie die Fehleranzeige, welche erscheint, wenn die Deklaration der drei Variablen fehlt.
Da die Zeile mit der Deklaration auskommentiert ist, ist die Variable x unbekannt. Dementsprechend wird eine Fehlermeldung mit Datei und Zeilennummer ausgegeben.
Fazit
Sie wissen nun, aus welchen Elementen eine Internetanwendung besteht, wie Sie mit einer lokalen Entwicklungs- und Testumgebung arbeiten und wie Sie eine Webseite mit Server- und Clientelementen aufbauen. Die Beschäftigung mit ASP.NET, C# (oder VB.NET) und ein wenig HTML bietet Ihnen weitere Möglichkeiten:
- Formatieren Sie Ihre Internetseiten.
- Erstellen Sie Formulare für Benutzereingaben und werten Sie diese aus.
- Nutzen Sie vorgefertigte Serversteuerelemente aus ASP.NET, wie zum Beispiel einen komfortablen Kalender.
- Greifen Sie auf die Inhalte von internetbasierten Datenbanken zu und integrieren Sie diese in Ihre Webseite.
Dieser Artikel ist ein Auszug aus dem Buch "Einstieg in C# mit Visual Studio 2017: Ideal für Programmieranfänger" von Thomas Theis.
