Websiteentwicklung mit ASP.NET/ Hallo Welt in ASP.NET

Aus Wikibooks

Hallo Welt[Bearbeiten]

Es 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.

Datei:Aspnetvwd neuews.jpg
Ein leeres Projekt im Visual Web Developer auswählen
  • 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:

Hallo Welt