OnClick vs OnClientNhấp vào một asp: CheckBox?

Question

Có ai biết tại sao trình xử lý javascript phía máy khách cho asp không: CheckBox cần phải là thuộc tính OnClick = "" chứ không phải thuộc tính OnClientClick = "", như đối với asp: Button?

Ví dụ, công trình này:

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

và điều này không (không có lỗi):

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

nhưng công trình này:

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

và điều này không (lỗi thời gian biên dịch):

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

(Tôi biết những gì Button.OnClick là dành cho; Tôi tự hỏi tại sao CheckBox không hoạt động theo cùng một cách ...)

Answer 1

Điều đó rất lạ. Tôi đã kiểm tra số CheckBox documentation page đọc

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

Như bạn thấy, không có thuộc tính OnClick hoặc OnClientClick được xác định.

Lưu ý điều này, tôi nghĩ rằng đây là những gì đang xảy ra.

Khi bạn làm điều này,

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

ASP.NET không sửa đổi các thuộc tính OnClick và làm cho nó như là trên trình duyệt. Nó sẽ được hiển thị dưới dạng:

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

Rõ ràng, một trình duyệt có thể hiểu 'OnClick' và đặt cảnh báo.

Và trong kịch bản này

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

Một lần nữa, ASP.NET sẽ không thay đổi OnClientClick thuộc tính và sẽ làm cho nó như

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

Vì trình duyệt sẽ không hiểu gì OnClientClick sẽ xảy ra. Nó cũng sẽ không gây ra bất kỳ lỗi nào vì nó chỉ là một thuộc tính khác.

Bạn có thể xác nhận ở trên bằng cách xem HTML được hiển thị.

Và có, điều này không trực quan chút nào.

Answer 2

Bạn đúng là điều này không phù hợp. Điều gì đang xảy ra là CheckBox không có sự kiện OnClick phía máy chủ, do đó đánh dấu của bạn được hiển thị cho trình duyệt. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

Trong khi nút có OnClick - vì vậy ASP.NET dự kiến ​​tham chiếu đến sự kiện trong đánh dấu OnClick của bạn.

Answer 3

Bởi vì họ là hai loại khác nhau của các điều khiển ...

Bạn thấy đấy, trình duyệt web của bạn không biết về lập trình phía máy chủ. nó chỉ biết về DOM của riêng nó và các mô hình sự kiện mà nó sử dụng ... Và đối với các sự kiện nhấp chuột của các đối tượng được hiển thị cho nó.Bạn nên kiểm tra đánh dấu cuối cùng mà thực sự được gửi đến trình duyệt từ ASP.Net để xem sự khác biệt của bạn.

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

ám vào

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

và

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

ám vào

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

Bây giờ, khi gần như tôi có thể nhớ lại, không có trình duyệt bất cứ nơi nào có hỗ trợ Sự kiện "OnClientClick" trong DOM của họ ...

Khi nghi ngờ, luôn xem nguồn đầu ra khi nó được gửi đến trình duyệt ... có cả thế giới gỡ lỗi thông tin mà bạn có thể thấy.

Answer 4

Tôi đã dọn dẹp cảnh báo và thông báo và thấy rằng VS cảnh báo về điều đó: Xác thực (ASP.Net): Thuộc tính 'OnClick' không phải là thuộc tính hợp lệ của yếu tố 'CheckBox'. Sử dụng điều khiển nhập html để chỉ định trình xử lý phía ứng dụng và sau đó bạn sẽ không nhận được thẻ span span và hai phần tử.

Answer 5

Đối với những người bạn của những người đã ở đây tìm kiếm các server-side OnClick xử lý nó là OnCheckedChanged

Answer 6

Một giải pháp là với JQuery:

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

Answer 7

Bạn có thể làm thẻ như thế này:

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

Thuộc tính được chọn trong JavaScript được gọi là chính xác ... trạng thái hiện tại của hộp kiểm:

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