服务器端控件使用客户端脚本

来源:互联网 发布:简明python教程中文版 编辑:程序博客网 时间:2024/04/26 14:47

我们做项目经常遇到一个服务器控件,既有服务器端的事件,又要结合客户端脚本,这里介绍几个好用的结合方式。

比如,我们页面上有一个按钮Button1,我们要实现当用户点击这个按钮的时候,先跳出确认的对话框,“您确定要按吗?”(或者其他的提示信息,这里只是举例),如果用户点击了“取消”,则取消这个动作,如果点击了“确定”,则执行确定的动作,这里我们要输出“您按了按钮Button1”。

一般的客户端脚本要结合服务器控件可以直接在服务器控件的标签内写即可。比如鼠标移动到按钮上,按钮的背景颜色改变成红色,只要这样写:

<asp:Button id="Button1" Text="Button" onmouseover="this.style.backgroundcolor='red'" runat="server" />

但是如果要做到上面说的那个按钮的功能,所遇到的最大问题是OnClick事件已经被服务器端用掉了,如:

<asp:Button id="Button1" Text="Button" OnClick="ATest" runat="server" />

这样就执行了服务器端的代码。那如何加入客户端的onclick事件呢?最常见的做法是:

protected void Page_Load(object sender, EventArgs e)    {  

Button1.Attributes["onclick"]="javascript:return confirm('您确定要按吗?')";

protected void Button1_Click(object sender, EventArgs e)    {

Response.Write("您按了按钮Button1");

如果客户端的代码没有这么简单,要复杂一点儿的话,比如,点击按钮的同时需要判断页面的某一个文本框是否有值,也可以改成如下格式:先写一个客户端脚本函数:

<script language="javascript">

function atest(){

if(form1.textbox1.value=="") { alert("您没有输入值"); return false; }

}

</script>

然后在.cs文件中调用:

protected void Page_Load(object sender, EventArgs e)

this.button1.attributes.add("onclick","javascript:return atest();");

还有第三种方式,就是直接在客户端脚本中写,.cs文件中不用写:

<script for="Button1" event="onclick()" language="javascript">

return confirm("您确定要按吗?");

</script>