1. ホーム
  2. asp.net

[解決済み] asp:CheckBoxのOnClickとOnClientClickの違い?

2023-06-06 15:43:48

質問

なぜ asp:CheckBox のクライアントサイド javascript ハンドラは asp:Button のように 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: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を見ることで、上記のことを確認することができます。

そうそう、これって全然直感的じゃないですよね。