OnClick 与 OnClientClick 的 asp:CheckBox？

Posted 2023-02-22

【中文标题】OnClick 与 OnClientClick 的 asp:CheckBox？

【英文标题】：OnClick vs OnClientClick for an asp:CheckBox?

【发布时间】：2010-11-11 05:33:11

【问题描述】：

有谁知道为什么 asp:CheckBox 的客户端 javascript 处理程序需要是 OnClick="" 属性而不是 OnClientClick="" 属性，就像 asp:Button 一样？

例如，这是有效的：

<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 不能以同样的方式工作......）

【参考方案1】：

这很奇怪。我检查了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 来确认上述内容。

是的，这根本不直观。

【讨论】：

好电话。我刚刚检查了生成的 html，它实际上将它不理解的属性放入了复选框输入周围的跨度中，但否则你是对的......

那是另一回事，我不喜欢 asp:checkbox 不必要地渲染一个额外的跨度。

嗯，其中一些。它将 onclick 放入输入本身，但将 onClientClick 放入跨度。奇怪！

哇。自从我使用网络控件以来已经有一段时间了，所以我的记忆正在消退。我更喜欢使用 HTML 控件，因为我想控制呈现的 HTML 的外观。

该文档实际上来自 .Net 1.1。据我所知，ASP .Net 没有 CheckBox 的 OnClick 服务器端事件，因此当您编写 OnClick 或 OnClientClick 时，因为它不知道它，所以它会完全呈现您编写的内容，因为它是默认行为（如果我没记错的话）

【参考方案2】：

因为它们是两种不同的控件...

您知道，您的网络浏览器不了解服务器端编程。它只知道它自己的 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”事件...

如有疑问，请始终在将输出发送到浏览器时查看其来源...您可以看到整个世界的调试信息。

【参考方案3】：

你是对的，这是不一致的。发生的事情是 CheckBox 没有服务器端 OnClick 事件，因此您的标记会呈现给浏览器。 http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox_events.aspx

而 Button 确实有一个 OnClick - 因此 ASP.NET 期望在您的 OnClick 标记中引用一个事件。

【参考方案4】：

对于那些来这里寻找服务器端 OnClick 处理程序的人来说，它是OnCheckedChanged

【讨论】：

那是服务端事件，不是客户端事件；不存在。

【参考方案5】：

我正在清理警告和消息，发现 VS 确实发出警告： 验证 (ASP.Net)：属性“OnClick”不是元素“CheckBox”的有效属性。使用 html 输入控件指定客户端处理程序，然后您将不会获得额外的 span 标签和两个元素。

【讨论】：

有趣...这是我接管了一段时间的项目，它有太多警告，看不到任何有用的东西...如果我没记错的话，使用 HTML 控件的缺点是你不能用它做服务器端操作......

【参考方案6】：

Asp.net CheckBox 不支持方法 OnClientClick。 如果你想向 asp:CheckBox 添加一些 javascript 事件，你必须在服务器代码中的“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

【参考方案7】：

你可以这样做：

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

被调用的 JavaScript 中的 .checked 属性将是正确的...复选框的当前状态：

  function checkchanged(obj) 
      alert(obj.checked)
  

【参考方案8】：

您可以将功能分配给所有复选框，然后在其中要求确认。如果他们选择是，则允许更改复选框，如果否则保持不变。

在我的情况下，我还在具有 Autopostback="True" 属性的转发器（或网格）内使用 ASP .Net 复选框，因此在服务器端我需要比较提交的值与当前在 db 中的值以了解什么他们选择的确认值并仅在“是”时更新 db。

$(document).ready(function () 
    $('input[type=checkbox]').click(function()                
        var areYouSure = confirm('Are you sure you want make this change?');
        if (areYouSure) 
            $(this).prop('checked', this.checked);
         else 
            $(this).prop('checked', !this.checked);
        
    );
); 


<asp:CheckBox ID="chk" AutoPostBack="true" onCheckedChanged="chk_SelectedIndexChanged" runat="server" Checked='<%#Eval("FinancialAid") %>' />

protected void chk_SelectedIndexChanged(Object sender, EventArgs e)

    using (myDataContext db = new myDataDataContext())
    
        CheckBox chk = (CheckBox)sender;
        RepeaterItem row = (RepeaterItem) chk.NamingContainer;            
        var studentID = ((Label) row.FindControl("lblID")).Text;
        var z = (from b in db.StudentApplicants
        where b.StudentID == studentID
        select b).FirstOrDefault();                
        if(chk != null && chk.Checked != z.FinancialAid)
            z.FinancialAid = chk.Checked;                
            z.ModifiedDate = DateTime.Now;
            db.SubmitChanges();
            BindGrid();
        
        gvData.DataBind();
    

【参考方案9】：

一种解决方案是使用 JQuery：

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

【讨论】：

Seconf 函数 丢失