web-dev-qa-db-ja.com

asp：CheckBoxのOnClick対OnClientClick？

Asp：Buttonのように、asp：CheckBoxのクライアント側javascriptハンドラーがOnClientClick = ""属性ではなくOnClick = ""属性である必要がある理由を誰もが知っていますか。

たとえば、これは機能します：

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

そして、これはそうではありません（エラーなし）：

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

しかし、これは動作します：

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

そして、これはありません（コンパイル時エラー）：

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

（私はButton.OnClickの目的を知っています。なぜCheckBoxが同じように機能しないのか疑問に思っています...）

asp.netjavascriptcheckboxonclickonclientclick
83
Stobor

それは非常に奇妙です。 CheckBox documentation page をチェックしました

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

ご覧のとおり、OnClick属性またはOnClientClick属性は定義されていません。

これを念頭に置いて、私はこれが起こっていることだと思います。

これを行うと、

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

ASP.NETはOnClick属性を変更せず、ブラウザー上でそのまま表示します。次のようにレンダリングされます。

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

明らかに、ブラウザは「OnClick」を理解して警告を発します。

そしてこのシナリオでは

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

繰り返しますが、ASP.NETはOnClientClick属性を変更せず、次のようにレンダリングします。

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

ブラウザはOnClientClickを理解しないため、何も起こりません。また、単なる別の属性であるため、エラーも発生しません。

レンダリングされたHTMLを見ると、上記を確認できます。

はい、これはまったく直感的ではありません。

104
SolutionYogi

それらは2種類のコントロールであるため...

おわかりのように、Webブラウザーはサーバー側のプログラミングを認識していません。自身のDOMとそれが使用するイベントモデルについてのみ知っています...そして、レンダリングされたオブジェクトのクリックイベントについて。 ASP.Netから実際にブラウザに送信される最終的なマークアップを調べて、自分の違いを確認する必要があります。

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

にレンダリングする

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

そして

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

にレンダリングする

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

今、思い出す限り、DOMの「OnClientClick」イベントをサポートするブラウザはどこにもありません...

疑わしい場合は、ブラウザに送信される出力のソースを常に表示してください...デバッグ情報の全世界を見ることができます。

9
datacop

あなたは正しい、これは矛盾しています。起こっているのは、CheckBoxがサーバー側のOnClickイベントを持たないため、マークアップがブラウザーにレンダリングされることです。 http://msdn.Microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

一方、ボタンにはOnClickがあります-ASP.NETは、OnClickマークアップ内のイベントへの参照を期待します。

8
russau

サーバーサイドOnClickハンドラーを探してここに来た人は、OnCheckedChangedです

5
Serj Sagan

警告とメッセージをクリーンアップして、VSがそれについて警告することを確認しました：検証（ASP.Net）：属性「OnClick」は、要素「CheckBox」の有効な属性ではありません。 html入力コントロールを使用してクライアント側ハンドラーを指定すると、余分なspanタグと2つの要素を取得できません。

1
BrianK

次のようにタグを実行できます。

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

呼び出されたJavaScriptの.checkedプロパティは正しくなります...チェックボックスの現在の状態：

  function checkchanged(obj) {
      alert(obj.checked)
  }
0
Alan Simpson

Asp.net CheckBoxは、OnClientClickメソッドをサポートしていません。
javascriptイベントをasp：CheckBoxに追加する場合は、サーバーコードの「Pre_Render」または「Page_Load」イベントに関連する属性を追加する必要があります。

C＃：

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

注：ページヘッダーにAutoEventWireup = "false"を設定しないでください。

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
Ярослав Белобородов