OnClick vs OnClientClick für einen Asp: CheckBox?


83

Weiß jemand, warum ein clientseitiger Javascript-Handler für asp: CheckBox ein OnClick = "" -Attribut und kein OnClientClick = "" -Attribut sein muss, wie für asp: Button?

Zum Beispiel funktioniert dies:

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

und das nicht (kein Fehler):

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

aber das funktioniert:

<asp:Button runat="server" OnClientClick="alert('Hi');" />

und das nicht (Kompilierungszeitfehler):

<asp:Button runat="server" OnClick="alert('hi');" />

(Ich weiß, wofür Button.OnClick ist; ich frage mich, warum CheckBox nicht auf die gleiche Weise funktioniert ...)

Antworten:


105

Das ist sehr komisch. Ich habe die CheckBox-Dokumentationsseite überprüft, die lautet

<asp:CheckBox id="CheckBox1" 
     AutoPostBack="True|False"
     Text="Label"
     TextAlign="Right|Left"
     Checked="True|False"
     OnCheckedChanged="OnCheckedChangedMethod"
     runat="server"/>

Wie Sie sehen, sind keine OnClick- oder OnClientClick-Attribute definiert.

Vor diesem Hintergrund denke ich, dass dies der Fall ist.

Wenn Sie dies tun,

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

ASP.NET ändert das OnClick-Attribut nicht und rendert es so, wie es im Browser ist. Es würde gerendert werden als:

  <input type="checkbox" OnClick="alert(this.checked);" />

Offensichtlich kann ein Browser 'OnClick' verstehen und eine Warnung ausgeben.

Und in diesem Szenario

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

Auch hier ändert ASP.NET das OnClientClick-Attribut nicht und rendert es als

<input type="checkbox" OnClientClick="alert(this.checked);" />

Da der Browser OnClientClick nicht versteht, passiert nichts. Es wird auch kein Fehler ausgelöst, da es sich nur um ein weiteres Attribut handelt.

Sie können dies oben bestätigen, indem Sie sich das gerenderte HTML ansehen.

Und ja, das ist überhaupt nicht intuitiv.


Guter Anruf. Ich habe gerade das generierte HTML überprüft und es setzt tatsächlich Attribute, die es nicht versteht, in einen Bereich um die Checkbox-Eingabe, aber ansonsten haben Sie Recht ...
Stobor

Das ist eine andere Sache, ich mag die Tatsache nicht, dass asp: checkbox eine zusätzliche Spanne unnötig macht.
SolutionYogi

1
Nun, einige von ihnen. Es setzt onclick in die Eingabe selbst, onClientClick in die Spanne. Seltsam!
Stobor

Beeindruckend. Es ist schon eine Weile her, seit ich Web-Steuerelemente verwendet habe, sodass mein Gedächtnis verblasst. Ich bevorzuge die Verwendung von HTML-Steuerelementen, da ich steuern möchte, wie mein gerendertes HTML aussieht.
SolutionYogi

2
Diese Dokumentation stammt tatsächlich aus .Net 1.1. Soweit ich weiß, hat ASP .Net kein serverseitiges OnClick-Ereignis für CheckBox. Wenn Sie also OnClick oder OnClientClick schreiben, weil es es nicht kennt, wird genau das gerendert, was Sie geschrieben haben, da es das Standardverhalten ist ( wenn ich mich nicht irre)
Sergio Rosas

9

Weil es sich um zwei verschiedene Arten von Steuerelementen handelt ...

Sie sehen, Ihr Webbrowser weiß nichts über serverseitige Programmierung. Es kennt nur sein eigenes DOM und die von ihm verwendeten Ereignismodelle ... und für Klickereignisse von Objekten, die darauf gerendert wurden. Sie sollten das endgültige Markup untersuchen, das tatsächlich von ASP.Net an den Browser gesendet wird, um die Unterschiede selbst festzustellen.

<asp:CheckBox runat="server" OnClick="alert(this.checked);" />

rendert zu

<input type="check" OnClick="alert(this.checked);" />

und

<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />

rendert zu

<input type="check" OnClientClick="alert(this.checked);" />

Soweit ich mich erinnern kann, gibt es in ihrem DOM nirgendwo Browser, die das Ereignis "OnClientClick" unterstützen ...

Zeigen Sie im Zweifelsfall immer die Quelle der Ausgabe an, wenn diese an den Browser gesendet wird. Es gibt eine ganze Welt von Debug-Informationen, die Sie sehen können.



6

Für diejenigen unter Ihnen, die hierher gekommen sind und nach dem serverseitigen OnClick Handler suchen, ist dies der FallOnCheckedChanged


1
Dies ist das serverseitige Ereignis, nicht das clientseitige Ereignis. was nicht existiert.
Beschützer ein

1

Ich habe Warnungen und Meldungen bereinigt und festgestellt, dass VS davor warnt: Validierung (ASP.Net): Das Attribut 'OnClick' ist kein gültiges Attribut des Elements 'CheckBox'. Verwenden Sie das HTML-Eingabesteuerelement, um einen clientseitigen Handler anzugeben. Anschließend erhalten Sie nicht das zusätzliche span-Tag und die beiden Elemente.


Interessant ... Das war ein Projekt, das ich für eine Weile übernommen habe, und es hatte zu viele Warnungen, um irgendetwas Nützliches darin zu sehen ... Wenn ich mich richtig erinnere, ist der Nachteil bei der Verwendung des HTML-Steuerelements, dass Sie keinen Server ausführen können -seitige Manipulationen damit ...
Stobor

1

Asp.net CheckBox unterstützt die Methode OnClientClick nicht.
Wenn Sie ein Javascript-Ereignis zu asp: CheckBox hinzufügen möchten, müssen Sie verwandte Attribute für "Pre_Render" - oder "Page Load" -Ereignisse im Servercode hinzufügen:

C #:

    private void Page_Load(object sender, EventArgs e)
    {
        SomeCheckBoxId.Attributes["onclick"] = "MyJavaScriptMethod(this);";
    }

Hinweis: Stellen Sie sicher, dass Sie im Seitenkopf nicht AutoEventWireup = "false" setzen.

VB:

    Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        SomeCheckBoxId.Attributes("onclick") = "MyJavaScriptMethod(this);"
    End Sub

0

Sie können das Tag folgendermaßen ausführen:

<asp:CheckBox runat="server" ID="ckRouteNow" Text="Send Now" OnClick="checkchanged(this)" />

Die Eigenschaft .checked im aufgerufenen JavaScript ist korrekt ... der aktuelle Status des Kontrollkästchens:

  function checkchanged(obj) {
      alert(obj.checked)
  }

-2

Eine Lösung ist mit JQuery:

$(document).ready(
    function () {
        $('#mycheckboxId').click(function () {
               // here the action or function to call
        });
    }
);

Seconf Funktion} fehlt
Mahdi Jokar
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.