您的位置：首页 > 编程语言 > ASP

asp.net button的OnClick和OnClientClick事件

2012-12-24 11:57 246 查看

一、二者的区别：

OnClick是button的服务器端事件

OnClientClick是button属性，它里面执行的是js代码，是在客户端运行。

一般我们用 OnClientClick验证我们的提交数据，但是这个一定要返回ture或者false，即一定要加上return，否则在客户端验证失效。如果是true那么就会执行后台的c#代码，页面也会进行提交刷新；否则就不执行，只会执行客户端js代码。

前台代码：

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

<!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 clickBtn() {
//            alert("被点击了！");
//            return false;

var yesORNo = confirm("确定点击？");
if (yesORNo) {
return true;//如果用户点击“确定”，就返回true，开始执行后台代码！
} else {
return false; //如果用户点击“取消”，就返回false，不执行后台代码！
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" ID="btnok" Text="点击" onclick="btnok_Click" OnClientClick="return clickBtn()"/><%--方法1：在控件中添加js代码--%>
<asp:Button runat="server" ID="btnok2" Text="点击2" onclick="btnok_Click" OnClientClick="return confirm('确定？')"/><%--方法2：在控件中添加js代码--%>
</div>
</form>
</body>
</html>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

}
protected void btnok_Click(object sender, EventArgs e)
{
Response.Write("这里是后台，按钮被点击了");
}
}
}

二、服务器控件调用js代码

做网页经常要和JavaScript打交道，经常要用JavaScript做一些客户端的验证，但是如果我们的按钮用的是HTML控件的话，验证通过后无法调用后台代码，如果用服务器端控件，验证不通过有要刷新页面，这个有时候挺烦人的，能不能让服务器端的按钮调用客户端的验证，如果验证成功后在调用服务器端的方法，这样既减少了网路传输，给用户感觉也好。
当我们用模板列做删除数据的时候一般都会返回一个对话框询问用户是否确认，其实我们是通过修改模板列里的button的OnClientClick属性将其值设为 return confirm("你确认删除该条记录吗"); 我们可以分析一下，confirm返回的是个bool值，如果我的button返回的结果也是个bool应该也可以吧，我猜对了，比如有下面一些代码：

function judgeUserInput()
{
bool result = true;
if(验证未通过)
{
result = false;
alert("请检查您的输入是否正确");
}
return result;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航