OnClick,OnClientClick和OnServerClick的区别

来源：互联网发布：淘宝优惠券转化器编辑：程序博客网时间：2024/05/22 06:42

OnClientClick是客户端事件处理方法，一般采用JavaScript来进行处理，也就是直接在IE端运行，一点击就运行

OnClick是服务器端事件处理方法，在服务器端也就是IIS中运行，点击后，先执行postback，再运行

OnClientClick常用来做一些客户端的检测。当然也可以放在服务器端检测，但是需要与服务器进行交互，消耗资源，而且用户体验也不好。

当一个控件上同时有OnClick和OnClientClick时，OnClientClick先于OnClick执行

正确的写法应该是：

<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" OnClientClick="return saveFunc();" />

saveFunc对数据进行验证，当验证通过返回true时，执行服务器端方法进行保存，验证不通过返回false，服务器端的保存方法就不会执行。

错误的写法：

<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" OnClientClick="saveFunc();" />


<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" OnClientClick="saveFunc(); return false;" />

下面以 HTML的按钮(system.web.ui.htmlcontrols) 和 ASP.NET服务端按钮 (system.web.ui.webcontrols) 为例：
1. HTML控件，如IMG的输入按钮等的 onclick ( 客户端) 和 onserverclick(服务端) 事件，

注意 runat="server"

此处的onclick先于onserverclick执行。
2.WEB控件，如<asp:button 按钮等的 onclientclick (客户端) 和 onclick (服务端) 事件。。。

<asp:Button ID="btn" text="button" runat="server" OnClick="SideScript" OnClientClick="ClientSideScript" />

此处的onclientclick先于onclick执行。
onclientclick 事件来自2.0，它用来取代下列代码。。。

btn.Attributes.Add("onclick","SideScript");

总之，客户端点击事件先于服务器端点击事件执行。也就是说，先执行客户端的Javascript，然后

到服务器端执行服务器的相关代码。

<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="WebForm2.aspx.cs"Inherits="CaiPiao.WebForm2"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
    <scripttype="text/javascript">
        function fnIsSearch() {
            return true;
        }
    </script>
</head>

<body>
    <formid="form1"runat="server">
    <div>
    <inputid="btnImport"type="submit"runat="server"value="导出"onserverclick="btnImport_Click"/>
    </div>
    </form>
</body>
</html>

后台代码
[code=C#]
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CaiPiao
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.btnImport.Attributes.Add("onclick", "return fnIsSearch();");
        }
        public void btnImport_Click(object sender, EventArgs e)
        {
            Response.Write("测试");
        }
    }
}