OnClick、OnClientClick、OnServerClick之间的关系

最新推荐文章于 2026-05-22 11:06:02 发布

原创最新推荐文章于 2026-05-22 11:06:02 发布 · 2.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#server #button #function #html #javascript

这篇博客详细解释了ASP.NET中按钮控件的OnClick、OnClientClick和OnServerClick事件的区别。OnClientClick执行客户端JavaScript代码，如果返回false则阻止服务端代码执行。OnServerClick仅执行服务端代码。文中通过示例代码展示了这些事件如何交互，并提到了HTML控件在服务端运行的情况。

        今天快下班的时候做了一个Web界面。有个功能刚好要求控件需要既完成客户端事件，又要完成服务端事件。所以晚上回到家，在网上查了点资料，感觉都比较零散。说得不是很明确，所以花了点时间示例做了下总结。
1. HTML控件中Click事件，只是为了单纯的运行客户端脚步事件。
2. ASP.NET服务端控件中Click事件，要分为两点来看：
   1)OnClick：运行服务端代码，并且不需要加()。
   2)OnClientClick：如果允许服务端控件运行客户端Click脚步事件，那么需要采用该事件进行处理。但该事件处理完毕，执行return true时，那么接着会执行OnClick服务

端代码。如果执行return false 时，那么将放弃OnClick服务端代码的执行。
     注释：OnClientClick是在.net2.0开始支持的。
3. HTML控件运行在服务端(runat="server")时，也有下面两点：
   1)OnClick:单纯执行客服端Click脚本代码。
   2)OnServerClick：运行服务端代码，并且不需要加()。
   但是在OnClick事件中，如果有return false或return true，都将不执行OnServerClick事件。
下面是示例，可以帮助理解：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
</head>
<body>
    <script type="text/javascript" language="javascript">
        function clientCall() {
            alert("ClientCall");
        }

//可以用来代替OnClientClick
//        $(function() {
//            $("#btnServer").click(function() {
//                alert("ClientCall");
//                return true;
//            })
//        })
    </script>
    <form id="form1" runat="server">
    <div>
        <input id="btnClient" type="button" value="客户端调用" onclick="clientCall()" />
        <asp:Button ID="btnServer" runat="server" OnClick="btnServer_Click" OnClientClick="clientCall();return true;" Text="服务端调用" />
        <%--<asp:Button ID="btnServer" runat="server" OnClick="btnServer_Click" Text="服务端调用" />--%>
        <input id="btnClientAtServer" type="button" value="运行在服务端HTML控件" runat="server" onclick="clientCall();"

onserverclick="btnClientAtServerClick" />
</div>
</form>
</body>
</html>

以上是我的一些总结，如果有描述不妥之处，还请指正。