Websiteentwicklung mit ASP.NET/ Hallo Welt in ASP.NET
Hallo Welt
BearbeitenEs hat sich eingebürgert, Programmierkurse mit einem 'Hallo-Welt'-Programm zu beginnen. Um sich nicht mit Details der Webserverkonfiguration aufzuhalten, beziehen sich die Beispiele auf den Visual Web Developer in der kostenlosen Express-Version.
- Eine neue Webseite wird im Menu 'Datei','Neue Website' erstellt
- Im nun erscheinenden Dialog wähle die Vorlage 'Leere Website'. Der Webdeveloper legt eine sogenannte Projektmappe an.
- Rechtsklicke im 'Projektexplorer' auf die Webseite und wähle den Unterpunkt 'Neues Element hinzufügen'
- Wähle anschließen die Vorlage 'Web Form'
Es wurde nun eine neue .aspx-Datei angelegt. In diese kann der folgende Code eingefügt werden.
<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Hallo Welt</title> </head> <body> <form id="halloForm" runat="server"> Hallo Welt ASP.NET </form> </body> </html>
Bereits dieses erste Beispiel zeigt, dass eine .aspx-Datei im Grunde genommen nur eine gewöhnliche HTML-Datei ist. Dabei steht es dem Webprogrammierer frei, ob er sich wie hier im Beispiel eher am XHTML hält oder andere HTML-Standards verwendet. Dem HTML-Kenner dürften zwei Zeilen aufgefallen sein, die im gewöhnlichen HTML so nicht vorkommen:
- in der ersten Zeile befindet sich die Direktive '<%@ Page ... %>', diese legt u.a. die Programmiersprache für die zugehörigen Programmcode fest
- im Form-Element findet sich das sogenannte Attribut 'runat="server"' wieder; das Attribut runat markiert die Elemente einer Webseite welche dynamisch und serverseitig gerendert werden sollen.
Durch drücken der Tastenkombination Strg+F5 wird der Entwicklungs-Webserver des Visual Web Developers gestartet. Die Webseite besteht natürlich nur aus der Zeile
Hallo Welt ASP.NET
Das bisherige Beispiel ist gegenüber einer statischen Seite wohl eher ein Rückschritt: Mehr HTML-Code für eine trotzem statische Seite. Daher folgt jetzt eine dynamische Variante, sozusagen das erste richtige "Hallo,Welt":
<%@ Page Language="C#" CodeFile="default.aspx.cs" Inherits="_Default" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Hallo Welt</title> </head> <body> <form id="halloForm" runat="server"> Dein Name: <asp:TextBox id="TbName" runat="server" /> <br /> <asp:Button ID="ButtonOk" Text="Ausführen" runat="server" OnClick="ButtonOk_Click" /> <br /> <asp:Label ID="LabelHallo" runat="server"/> </form> </body> </html>
Neu sind hier die in den HTML-Code eingefügten ASP.NET Steuerelemente. Diese beginnen mit dem Tag <asp:...> und werden entsprechend durch </asp:...> geschlossen. In XHTML ist es gebräuchlich Elemente ohne Inhalt in sich selbst zu schließen, also in der Form
<tag /> oder <br /> oder <asp:TextBox ... />
Die Attribute haben dabei folgende Bedeutung:
- ID: Name des Steuerelements, wird später im Programmcode zur Identifizierung benötigt
- Text: Beschriftung bzw. Titel des Steuerelements
- runat="server": ASP.NET erstellt jeweils ein Objekt dieses Typs
- OnClick: legt eine Prozedur für die Behandlung des Click-Ereignisses fest. Ereignisse werden durch einen Neuaufruf der Webseite mit POST-Daten an den Server übergeben.
Zudem hat sich die Page-Direktive geändert: Zum einen wird mit Hilfe des Attributs Inherits der Name des Objekts, das mit der Webseite verbunden ist festgelegt. Zum anderen das Attribut CodeFile: hier wird nun eine Datei (default.aspx.cs) angegeben, in welcher der Programmcode vom Kompiler gesucht wird. Diese ist bisher nicht in Projekt vorhanden, kann aber wieder mit einem Rechtsklick im Projekt-Explorer mit der Funktion 'Neues Element hinzufügen' erstellt werden.
using System; using System.Web; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void ButtonOk_Click(object sender, EventArgs e) { LabelHallo.Text = "Hallo, " + TbName.Text+ ", wie gehts?"; } }
Unsere ASP.NET Seite ist also ein Objekt (mit dem Namen _Default), das von System.Web.UI.Page geerbt hat. Das Schlüsselwort partial deutet an, dass nicht der gesamte Code von _Default in dieser Datei vorliegt: der Rest ist ja in der .aspx-Datei gespeichert. Hinzugefügt wurde eine Prozedur 'ButtonOk_Click', die nach einem Klick auf den "Ausführen"-Button einen Gruss auf dem Label-Steuerelement 'LabelHallo' ausgibt. Das Ergebnis sieht Folgendem ähnlich: