1.探究html的button 的 onclick和onserverclick;
2.探究aspbutton的 OnClick和OnClientClick
打开VS,新建asp.net空项目,添加web窗体WebForm1 .
在form段添加一个html input button 和 一个 asp button
代码如下:
<input id="HtmlBtn" type="button" value="Html" />
<asp:Button ID="AspBtn" runat="server" Text="Asp" />
html input button实验
1.在head段添加一个js方法,代码如下
<script>
function jsShow() {
alert("jsShow");
}
</script>
给HtmlBtn绑定jsShow方法
<input id="HtmlBtn" type="button" value="Html" οnclick="jsShow()" />
运行一下。
运行结果为: 点击HtmlBtn时,弹出 “jsShow” 。
分析:嗯。。js方法调用成功了
2.
添加后台方法
protected void HtmlBtn_Click(object sender,EventArgs e)
{
Response.Write("<script>alert('HtmlBtn_Click')</script>");
}
改变HtmlBtn的代码
<input id="HtmlBtn" type="button" value="Html" οnclick="HtmlBtn_Click" />
运行一下。
运行结果为:点击HtmlBtn,无任何反应。
分析:HtmlBtn直接绑定后台方法是无效的。
3.
给HtmlBtn添加runat
<input id="HtmlBtn" runat="server" type="button" value="Html" οnclick="HtmlBtn_Click" />
运行一下。
运行结果为:点击HtmlBtn,无任何反应。
分析:HtmlBtn 添加runat=server后,onclick绑定后台方法是无效的。
4.
HtmlBtn的onclick 换成 onserverclick
<input id="HtmlBtn" runat="server" type="button" value="Html" onserverclick="HtmlBtn_Click" />
运行一下。
运行结果为:点击HtmlBtn,弹窗显示“HtmlBtn_Click”
分析:HtmlBtn 添加runat=server后,虽然onclick绑定后台方法无效,但是onserverclick绑定的后台方法有效
5.
在4的基础上,给HtmlBtn 的 onclick绑定js
<input id="HtmlBtn" runat="server" type="button" value="Html" οnclick="jsShow()" onserverclick="HtmlBtn_Click" />
运行一下。
运行结果为:点击HtmlBtn,无任何反应。
分析:HtmlBtn 添加runat=server后,同时绑定onclick和onserverclick时,两个都失效。
6.
在5的基础上,去掉onserverclick
<input id="HtmlBtn" runat="server" type="button" value="Html" οnclick="jsShow()" />
运行一下。
运行结果为:点击HtmlBtn,弹窗“jsShow”。
分析:HtmlBtn 添加runat=server后,单独onclick绑定js后,js函数会 执行,且在运行期间,浏览器查看源码时,发现此按钮上没有runat=server的属性。浏览器忽略了??
7.
在6的基础上,去掉runat ,重新绑定onserverclick
<input id="HtmlBtn" type="button" value="Html" οnclick="jsShow()" onserverclick="HtmlBtn_Click"/>
运行一下。
运行结果为:点击HtmlBtn,弹窗“jsShow”。
分析:HtmlBtn 无runat=server时,只会执行onclick的js方法。
总结:htmlBtn,可以单独执行js或者单独执行后台代码,但貌似不能onclick和onserverclick都执行??
asp button实验
1.
AspBtn OnClick绑定后台方法
<asp:Button ID="AspBtn" runat="server" Text="Asp" OnClick="HtmlBtn_Click"/>
运行一下。
运行结果为:点击AspBtn,弹窗“HtmlBtn_Click”。
分析:AspBtn OnClick直接绑定后台方法,可以执行。
2.
在1的基础上,添加OnClientClick绑定js
<asp:Button ID="AspBtn" runat="server" Text="Asp" OnClick="HtmlBtn_Click" OnClientClick="jsShow()"/>
运行一下。
运行结果为:点击AspBtn,先弹窗“jsShow”,后弹窗“HtmlBtn_Click”。
分析:AspBtn的OnClick绑定后台方法,同时OnClientClick绑定js时,两者都会执行,且先执行js,后执行后台方法。
3.
在2的基础上,去掉后台方法的绑定
<asp:Button ID="AspBtn" runat="server" Text="Asp" OnClientClick="jsShow()"/>
运行一下。
运行结果为:点击AspBtn,弹窗“jsShow”
分析:AspBtn可以单独给OnClientClick绑定js,可执行。
4.
在3的基础上,去掉runat
结果直接提示 asp:Button缺少必要的字段runat。。。
总结:AspButton,可以单独使用OnClientClick执行js,也可以单独使用OnClick执行后台方法,还可以两个都使用,这时候会先执行js,后执行后台方法。
补充:如果在Webform中,进行前台验证再来决定是否执行后台事件,当前端控件绑定了两个点击事件,
OnClick="Button1_Click" OnClientClick=""
如果前端验证不通过就不执行后台点击事件的情况下,我们在前端的js方法中需要return false;并且OnClientClick="return Search();"这样的话前端执行不通过就不会执行后台事件了。
---------------------
作者:Fanstorm丶
来源:CSDN
原文:https://blog.csdn.net/wf824284257/article/details/75799140