Ich programmiere im Moment viele Web-Anwendungen unter Mono, und hab mich am Anfang echt schwer getan mit der Interaktion zwischen den ASP-Seiten und Javascript, denn das Eine läuft auf eben dem Server und das Javascript auf dem Client.
Und es hat echt ein wenig gedauert, bis ich herausgefunden habe, wie man einem Button beibringt, bei einem Click kein simples Postback zu machen, sondern eine Javascript-Funktion aufzurufen.
Manchmal macht es eben doch Sinn, mal in den generierten HTML-Code zu schauen :-)
Hier kommt nämlich der kleine aber feine Unterschied zwischen OnClick und OnClientClick zum tragen.
Als Beispiel eine ganz simple Seite mit zwei Buttons:
<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script runat="server">
public virtual void button1Clicked (object sender, EventArgs args)
{
serverButton.Text = "You clicked me";
}
</script>
<body>
<form id="form1" runat="server">
<asp:Button id="serverButton" runat="server" Text="Click me!" OnClick="button1Clicked" />
<asp:Button id="clientButton" runat="server" Text="Client Click" OnClientClick="alert('You clicked me')" />
</form>
</body>
</html>Dem ersten Button, dem "serverButton", wird der OnClick-Event-Handler zugewiesen, dem "clientButton" der OnClientClick-Event-Handler.
Kompiliert man jetzt die Seite, kommt folgendes dabei heraus:
<html>
<body>
<form method="post" action="Default.aspx" id="form1">
<input type="submit" name="serverButton" value="Click me!" id="serverButton" />
<input type="submit" name="clientButton" value="Client Click" onclick="alert('You clicked me');" id="clientButton" />
</form>
</body>
</html>Wenn die Seite gerendert wurde, ist aus dem "serverButton" ein simpler Submit-Button geworden, der lediglich ein PostBack auf seine eigene Seite macht.
Der "clientButton" dagegen hat noch den Event-Handler 'onclick' mitbekommen, der dann auf der Client-Seite verarbeitet wird. Damit können jetzt beliebige Javascript-Funktionen aufgerufen werden, die dann auf der Client-Seite verarbeitet werden.
Wenn die Zuweisung dynamisch aus dem Code-Behind erfolgen soll, kann man den entsprechenden Elementen weitere Attribute zuordnen.
Das Gleiche aus dem Code-behind heraus sieht dann so aus:
<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.clientButton.Attributes.Add("onClick", "alert('You clicked me')");
}
public virtual void button1Clicked (object sender, EventArgs args)
{
serverButton.Text = "You clicked me";
}
</script>
<html>
<body>
<form id="form1" runat="server">
<asp:Button id="serverButton" runat="server" Text="Click me!" OnClick="button1Clicked" />
<asp:Button id="clientButton" runat="server" Text="Client Click" />
</form>
</body>
</html>Hier wird dem "clientButton" beim Laden der Seite Event-Handler "onclick" zugewiesen und der Name der Javascript-Funktion, die dann ausgeführt werden soll.
Das Ganze geht natürlich auch für andere Input-Typen wie RadioButton oder Checkboxen.
Add comment