Mittwoch, Juni 06, 2007 |
Die erste Seite, die hier im Rahmen des Tutorial erstellt wird ist eine einfache Seite mit der du dir selbst eine Nachricht schreiben kannst die dann auf derselben Seite dargestellt wird.
Zum erstellen und bearbeiten der Seite verwenden wir einfach notepad. Für aufwendigere Projekte kannst du dann WebMatrix verwenden, ein hervorragender freeware editor oder Microsofts Visual Web Developer (ebenfalls umsonst).
Das meiner Meinung nach herausragendste (dafür aber auch teuerste) Tool ist Microsoft's "Visual Studio" (die nicht express edition).
Aber, wie bereits erwähnt, hier reicht einfach notepad.
Öffne also Notepad und schreibe ein html Grundgerüst:
<html>
<head>
<title>Meine erste ASP.NET Seite</title>
</head>
<body>
</body>
</html>
In dieses Grundgerüst werden wir im weiteren Verlauf die Elemente einfügen die wir benötigen. Dabei wirst du lernen was für Möglichkeiten dir ASP.NET bietet und wie du diese anwendest.
Damit dein Server erkennt, dass es sich um eine ASP.NET Seite und nicht etwa um eine gewöhnliche html Seite handelt muss die Datei mit einer bestimmten Endung - aspx - gespeichert werden.
Speicher diese Datei unter [Laufwerk und Ordner deiner lokalen Website]\Tutorial\default.aspx (falls du die Standardeinstellungen verwendest unter c:\inetpub\wwwroot\Tutorial\default.aspx). Du kannst die Seite jetzt in deinem Webbrowser unter http://localhost/Tutorial/default.aspx aufrufen.
ASP.NET stellt dir "server controls" zur Verfügung, die es dir erlauben sehr einfach Elemente auf deine Seite zu stellen welche dann serverseitig verarbeitet werden.
Diese Element müssen innerhalb eines <form runat="server"> tags sein um verarbeitet zu werden, und sie sind folgendermaßen aufgebaut:
<asp:ELEMENTNAME runat="server" [weitere Attribute] />
Beispiele sind zum Beispiel <asp:TextBox> (eine textbox) und <asp:Button> (ein Button)
Diese beiden werden wir in unserem Beispiel verwenden, außerdem noch <asp:Label>, das dazu verwendet werden kann text auf einer Seite darzustellen.
Zuerst wollen wir uns anschauen wie überhaupt sowas wie ein Klick auf den Button funktioniert und wie man daraus etwas machen kann.
Dafür wollen wir auf unserer Seite einen Button haben und ein Label, in das wir dann zur bestätigung das was passiert ist einen kurzen Text reinschreiben.
Die Seite sollte dann etwa folgendermaßen aussehen:
<html>
<head>
<title>Meine erste ASP.NET Seite</title>
</head>
<body>
<center>
<asp:Button id="Btn_Submit" text="Mein erster Button" runat="Server" />
<br>
<asp:Label id="Label_Message" runat="server" />
</center>
</body>
</html>
Wenn du die Seite jetzt speicherst und wieder auf http://localhost/Tutorial/default.aspx ansiehst (vergiss nicht die Seite neu zu laden indem du F5 drückst) erkennst du auf der Seite bereits den Button. Allerdings passiert noch nix wenn du drauf klickst.
Das werden wir jetzt ändern.
Wie am Anfang erwähnt arbeitet man bei ASP.NET mit Programmiersprachen, und da werden wir jetzt auch anfangen.
Wir werden jetzt eine Funktion schreiben in der wir sagen, dass, nachdem wir den Button geklickt haben ein Text in dem Label stehen soll.
Wie du siehst wird der Text, der auf der Seite in dem Button steht mit dem "text" Attribut definiert. Auf ebendieses Attribut können wir auch in dem Programmcode zugreifen.
So können wir in der Zeile
Label_Message.Text = "Ein Testtext";
einen text für das Label definieren. In einer Funktion würde das folgendemaßen aussehen:
private void Button_Click() {
Label_Message.Text = "<i>Du hast den Button geklickt!</i><br>";
}
Dem Button können wir mittels des "onClick" Attributes eine Funktion zuweisen, die aufgerufen werden soll wenn der Button geklickt wird.
Damit eine Funktion dann aber von einem Button verwendet werden kann müssen wir sie etwas ändern. Denn die vom Button aufgerufene Funktion benötigt zwei Parameter, einen vom Typ Object (der Sender, in unserem Fall der Button) und einen vom Typ EventArgs.
Die Funktion verwandelt sich also in folgendes:
private void Button_Click(Object sender, EventArgs e) {
Label_Message.Text = "<i>Du hast den Button geklickt!</i><br>";
}
Fügen wir jetzt die Funktion in einem Scriptblock zusammen mit dem onClick Attribut beim Button auf der Seite ein, speichern sie und schauen sie uns wieder auf http://localhost/Tutorial/default.aspx an.
Wenn du jetzt den Button klickst sollte unter dem Button eine kursive Schrift mit dem Text "Du hast den Button geklickt!" erscheinen!
Hier noch einmal der Quellcode der fertigen Seite (letzte Änderungen sind in rot):
<html>
<head>
<title>Meine erste ASP.NET Seite</title>
</head>
<script language="C#" runat="server">
private void Button_Click(Object sender, EventArgs e) {
Label_Message.Text = "<i>Du hast den Button geklickt!</i>";
}
</script>
<body>
<center>
<asp:Button id="Btn_Submit" text="Mein erster Button" onClick="Button_Click"
runat="Server" /><br>
<asp:Label id="Label_Message" runat="server" />
</center>
</body>
</html>
Jetzt bauen wir die Seite noch etwas aus um uns selbst eine Nachricht zu schicken. Dafür benötigen wir ein Eingabefeld, eine Textbox.
Gleich wie wir den Text in das Label eingefügt haben können wir in aus einer Textbox abfragen:
string text = TextBox_Message.Text;
speichert den Inhalt der Textbox in der Variabel text. Fügen wir nun einfach eine Textbox nach dem bekannten schema ein und statt dem Standardtext verwenden wir einen eigenen (Änderungen wieder rot):
<html>
<head>
<title>Meine erste ASP.NET Seite</title>
</head>
<script language="C#" runat="server">
private void Button_Click(Object sender, EventArgs e) {
Label_Message.Text = "<i>Du hast dir folgendes zu sagen:</i>" +
TextBox_Message.Text;
}
</script>
<body>
<center>
<asp:textbox id="TextBox_Message" runat="server" />
<asp:Button id="Btn_Submit" text="Abschicken" onClick="Button_Click"
runat="Server" /><br>
<asp:Label id="Label_Message" runat="server" />
</center>
</body>
</html>
Herzlichen Glückwunsch! Du hast soeben deine erste ASP.NET Seite erstellt!