OnClick和OnClientClick for asp:CheckBox?

时间:2009-07-16 02:27:32

标签: asp.net javascript checkbox onclick onclientclick

有谁知道为什么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不能以同样的方式工作......)

9 个答案:

答案 0 :(得分:103)

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

是的,这根本不直观。

答案 1 :(得分:9)

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

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

如果有疑问,请始终查看输出源,因为它被发送到浏览器......您可以看到整个调试信息世界。

答案 2 :(得分:8)

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

而Button确实有OnClick - 所以ASP.NET需要引用OnClick标记中的事件。

答案 3 :(得分:5)

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

答案 4 :(得分:1)

我正在清理警告和消息,并看到VS确实警告过它: 验证(ASP.Net):属性'OnClick'不是元素'CheckBox'的有效属性。使用html输入控件指定客户端处理程序,然后您将不会获得额外的span标记和两个元素。

答案 5 :(得分:0)

你可以这样做:

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

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

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

答案 6 :(得分:0)

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 :(得分:0)

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

在我的情况下,我还在转发器(或网格)中使用 ASP .Net 复选框,并具有 Autopostback="True" 属性,因此在服务器端,我需要比较提交的值与当前在 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();
    }
}

答案 8 :(得分:-1)

一个解决方案是使用JQuery:

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