Asp.Net中OnClientClick与OnClick

最新推荐文章于 2024-06-20 15:00:51 发布

转载最新推荐文章于 2024-06-20 15:00:51 发布 · 905 阅读

C# 专栏收录该内容

12 篇文章

订阅专栏

本文详细解析OnClientClick与OnClick的区别及应用技巧，强调OnClientClick作为客户端事件用于初步验证，而OnClick作为服务器端事件负责进一步处理。指出OnClientClick需返回true或false以决定是否触发OnClick。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

onclientClick是客戶端事件﹐onclick是服務器端事件
OnClientClick里面的是js的方法，如果返回true，页面postback，执行OnClick的事件处理函数（后台）
如果返回false，就不会postback

在web开发中,经常要用到控件的OnClientClick与OnClick事件.

如果使用不当,经常会遇到一些意料之外的事情发生,让人摸不着头脑.下面就将我的一些小小总结道来:

首先我们要了解这两个事件:

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

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

如果一个按钮上我们同时有客户端的OnClientClick方法又有OnClick事件处理方法,如何才能按照正常的逻辑运行呢.

OnClientClick中我们常用来做一些客户端的检测.当然放在服务器也可以做同样的检测,但这样做的代价是与服务器进行交互,消耗资源,而且用户体验不好...

例:

//jsDel()为一javascript函数.

<asp:Button ID="btnDel" Width="80px" CssClass="buttonstyle" runat="server" Text="删除" OnClientClick="return jsDel();" OnClick="btnDel_Click1" />

需要注意的是当我们当击这个按钮时,自动先执行的客户端,再执行服务器端的.如果客户端返回的是false,那么服务器端对应的方法永远不会执行.这样就达到检测,只有通过才去执行服务器端的方法.

也就是说如果我们上面写成:

<asp:Button ID="btnDel" Width="80px" CssClass="buttonstyle" runat="server" Text="删除" OnClientClick="jsDel(); return false;" OnClick="btnDel_Click1" />

那么不管jsDel执行的结要如何.服务器端对应的btnDel_Click1方法都永远不会执行.因为return false使得始终使客户端返回false

如果我们写成:

<asp:Button ID="btnDel" Width="80px" CssClass="buttonstyle" runat="server" Text="删除" OnClientClick="jsDel();"OnClick="btnDel_Click1" />

那么btnDel_Click1都有会发生.同样也就达不到效果.也就是说你没有通过检测也去执行服务器的方法了.

所以必须注意了.

当然我们还可以通过btn.Attribute.add()的方法来进行类似的处理

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/shiling_02404/archive/2009/03/27/4028268.aspx

OnClick是button的服务器端事件 OnClientClick是button的客户端事件

一般我们用 OnClientClick验证我们的提交数据，但是这个一定要返回ture或者false，即一定要加上return，否则OnClick失效。当OnClientClick返回false时OnClick服务器端事件才被中止。当没有return时，当你的js验证有错误，也会跳过验证，直接执行服务器端事件OnClick。为了避免这样的错误，可以考虑用服务端验证这样就省去了OnClientClick事件，就不用考虑和OnClick的冲突了。但是从性能上，服务端验证，耗费了服务器资源，呵呵，一般是没问题的，只是和客户端验证比较而已，各有所长，各有所短。

例如下： try2.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="try2.aspx.cs" Inherits="try2" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题</title>
    <script type="text/javascript">
    function checkname()
    {
    var name=document.getElementById('TextBox1');
    if(name.value=="")
    {
    alert("姓名不能为空！");
    return false;
    }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         
        <table>
            <tr>
                <td>
                    姓名：</td>
                <td>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td >
                </td>
                <td >
        <asp:Button ID="Button1" runat="server" Text="确定" OnClientClick="return checkname()" OnClick="Button1_Click" /></td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

后台代码：try2.aspx.cs：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class try2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write("最后执行了！");
    }
}

可测试发现如果try2.aspx 中OnClientClick="checkname()" ，没有"return ",客户端和服务器端都执行操作。

所以上例应带“return”，当姓名输入为空时，不至于执行服务器端的"Button1_Click"事件。即OnClientClick="return checkname()" 。

来自: http://hi.baidu.com/ashen331/blog/item/e6d844176a05af4220a4e930.html

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看