Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 26 JavaScript goes .NET
  gp 26.1 Erste Schritte
  gp 26.2 HTML Controls
  gp 26.3 Web Controls
  gp 26.4 Validation Controls
  gp 26.5 Fazit


Rheinwerk Computing

26.2 HTML Controls  toptop

Was Sie gerade in Aktion gesehen haben, sind die so genannten HTML Controls von ASP.NET: Durch das Hinzufügen von runat="server" kann (fast) jedes HTML-Element serverseitig ausgelesen und auch modifiziert werden. Sie müssen nie wieder serverseitigen und clientseitigen Quellcode mischen: Ein Designer erstellt das HTML-Gerüst einer Seite, und der Programmierer fügt den Skriptcode hinzu und »füllt« somit das HTML-Grundgerüst mit Daten.

Besonders von Vorteil ist das Ganze natürlich bei Formularen. Hier gibt es allerdings eine Besonderheit: Damit Sie auf die einzelnen Elemente eines Formulars serverseitig zugreifen können, müssen Sie nicht nur diese mit dem Attribut runat="server" versehen – sondern auch das Formular muss mit dem runat-Attribut für den serverseitigen Zugriff freigeschaltet werden.

Auf die entsprechenden Daten in den Formularfeldern können Sie dann mit den Eigenschaften Value zugreifen (bei einigen Formularfeldtypen gibt es Besonderheiten, aber das ist zunächst nicht von Interesse). Denken Sie nur daran, jeweils eine eindeutige ID zu vergeben.

Für das nächste Beispiel ebenfalls noch von Interesse ist das Attribut OnServerClick für HTML-Schaltflächen (<input type="button">). Hier können Sie als Wert den Namen einer ASP.NET-Funktion angeben, die dann – serverseitig – beim Klicken auf die Schaltfläche ausgeführt werden wird:

<input type="button" value="Versenden"
   OnServerClick="Ausgabe" runat="server" />

Die Funktion Ausgabe() steht dann im <script>-Block und hat folgendes Aussehen:

function Ausgabe(o: Object, e: EventArgs) {
   // Code ...
}

Hier sehen Sie eine weitere Besonderheit von ASP.NET und auch eine von JScript.NET: Die Funktion erhält automatisch zwei Parameter, hier o und e genannt. Es ist jedoch eine Vorschrift von .NET, dass jede Variable einen Typ hat. Der Typ ist hier hinter dem Doppelpunkt angegeben. JavaScript kennt eine solche Typisierung von Variablen nicht, deswegen haben alle anderen Kapitel dieses Buches Variablen ohne Typ.

Unser nächstes Beispiel ist etwas länger: Ein Formular mit ein paar Feldern wird erzeugt; auf Mausklick werden dann die Feldeingaben ausgegeben. Dies ist natürlich nur eine Demonstration von ASP.NET; in einer »wirklichen« Anwendung würden die Formulardaten beispielsweise in eine Datenbank geschrieben oder per E-Mail versandt werden. Sie sehen aber bereits hier, wie einfach das eigentlich geht:

<%@ Page Language="JScript" %>
<script runat="server">
function Ausgabe(o: Object, e: EventArgs) {
   var s: String;
   s  = "Name: " + Name.Value + "<br />";
   s += "E-Mail: " + Email.Value + "<br />";
   s += "Buch: " + Buch.Value;
   Absatz.InnerHtml = s;
}
</script>

<html>
<head>
   <title>ASP.NET</title>
</head>
<body>
<form runat="server">
Name: <input type="text" id="Name" runat="server" /><br />
E-Mail: <input type="text" id="Email" runat="server" /><br />
Buch: <select id="Buch" runat="server">
   <option value="JS7">JavaScript-Handbuch, 7. Auflage</option>
   <option value="AS">Einstieg in ActionScript</option>
   <option value="WS">Web Services – Grundlagen</option>
   <option value="WSPHP">Web Services mit PHP</option>
</select>
<input type="button" value="Versenden"
   OnServerClick="Ausgabe" runat="server" />
</form>
<p id="Absatz" runat="server"></p>
</body>
</html>

In der Funktion Ausgabe() wird zunächst eine String-Variable deklariert. Auch hier muss der Datentyp angegeben werden:

   var s: String;

Dann werden die einzelnen Formularangaben in dieser Variablen gesammelt, und diese wird dann am Ende im <p>-Element ausgegeben:

   Absatz.InnerHtml = s;

In Abbildung 26.3 sehen Sie das Ergebnis. Es hat den angenehmen Nebeneffekt, dass die Formularfelder nach dem Formularversand automatisch wieder mit den zuvor eingegebenen Werten vorausgefüllt werden. Das ist insbesondere dann wichtig, wenn der Anwender noch Angaben korrigieren muss, beispielsweise fehlende Pflichtfelder.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 26.3     Formulardaten werden ruckzuck ausgegeben.

 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern