您的位置：首页 > 其它

OnClick OnClientClick OnServerCick 的区别与使用

2015-02-27 17:48 513 查看

使用web服务器控件提交处理后台数据时，有时需要验证前台Html控件的值是否满足，若满足则进行后台交互，若不满足则不进行后台交互，这时候可以使用OnClientClick事件。

说明：

对于服务器按钮控件（即<asp:Button>类型的按钮）：
服务器响应事件：OnClick
客户端响应属性：OnClientClick

对于html按钮控件（即<input type="button" runat="server">）
服务器响应事件：OnServerClick
客户端响应事件：onclick

代码示例：

1.前台html

<pre name="code" class="html"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<input type="text" id="txtName" value="" /><br />
密 码：<input type="text" id="txtPwd" />
<asp:Button ID="Button2" ToolTip="点击提交信息" runat="server" OnClientClick="return checkUser()"
OnClick="Button2_Click" Text="Button" />
<br />
</div>
<div>
<button id="btnHtml" type='button' runat='server' onserverclick='ShowInfo'>
OnServerClick</button>
<button id="btnHtm2" type='button' runat='server'  onclick="ToOther()" >
OtherClick</button>
</div>
<div id="divT" runat="server">
</div>
</form>
</body>
</html>
<script type="text/javascript">
//前台验证或数据处理
function checkUser() {
var sName = $('#txtName').val();
if (sName == "") {
alert("用户名不可为空！");
return false;
}
return true;
}

//通过按钮2来调用按钮1的后台事件
function ToOther() {
alert("OtherClick按下，将调用OnServerClick事件");
__doPostBack('btnHtml', '');
}
</script>

2.后台cs事件

<pre name="code" class="csharp">protected void Button2_Click(object sender, EventArgs e)
{
divT.InnerText = "欢迎用户体验";
}

public void ShowInfo(object obj, EventArgs e)
{
divT.InnerText = "后台处理事件返回值！";
}

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

标签：

相关文章推荐

新的分享

章节导航