ASP.NET 解决在点击Button执行服务器事件之前验…
2018-06-27 09:49:02来源:未知 阅读 ()
在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:“输入的值不符合规则,请重新输入”、“提交后无法修改,您确定要继续吗?”友好性的提示。
这时候我们想到了Button有一个客户端的点击事件(OnClientClick),大家知道,ASP.NET 页面ASPX页面被创建的时候会生成 一段代码
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDkwNjUxMzI3DxYCHglJblNoZWV0SWQFFTIwMTQwNzIxMDkxMDA2MTgxMDAwNRYCZg9kFgICAw9kFgICAQ9kFhgCAQ8+=" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script>
__doPostBack是一个javascript函数,eventTarget是标识将要引发页面PostBack的控件ID,eventArgument参数提供了在引发页面PostBack事件时所带的额外参数。这两个参数的值将赋值给页面的两个隐含变量__EVENTTARGET和__EVENTARGUMENT,然后调用页面的submit方法提交页面表单。现在我们用artDialog插件写了一段JS
<script type="text/javascript"> //阻塞按钮提示信息,调用系统doPostBack()方法 function onPostBackConfirm(obj, objmsg) { var objId = $(obj).attr("name"); //获取asp.net 控件Name属性的值 artDialog({ title: '系统提示', content: objmsg, lock: true, opacity: 0.1, icon: 'question', ok: function () { __doPostBack(objId, ''); }, cancelVal: '取消', cancel: true }); return false; } </script>
然后ASPX页面
<asp:Button ID="btnSave" CssClass="btn" runat="server" Text="保 存" OnClick="btnSave_Click" OnClientClick="return onPostBackConfirm(this,'您确定要保存吗?')" ClientIDMode="Static"/><!--注意这里的ClientIDMode的属性设置为Static,可以使用JS取得控件的唯一标识-->
我们再服务器点击事件中写了这样一段代码:
protected void btnSave_Click(object sender, EventArgs e) { DialogHelper.ShowDialog("测试", Page); }
运行,
我们去点击保存时,出现弹窗提示,效果很好。
当我们点击确定的时候,缺发现找不到doPostBack方法
所以,问题就来了,到底什么时候才会生成doPostBack方法呢,原来,ASP.NET有两种方法引发回传,
1、通过Button,ImageButton直接引发回传
2、其他控件通过__doPostBack 函数引发回传
第一种情况:
<body class="right_body"> <form name="aspnetForm" method="post" action="BuyCosting.aspx" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEyNjUxNDU4NDRkZO54SDP8/vp+PEw8W85kGFq9CqhFhpwTw3ujC0bgeI5a" /> </div> <div> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="4A46A59A" /> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAKI/mPqOFFsHAe435MJab21XXLxRrcG4xr1opytZqPyfqNnFopN+khg4IymQVAdRNBQmxh085hIM7qXOWkv0Nol" /> </div> <input type="submit" name="ctl00$Content$btnSave" value="保 存" onclick="return onPostBackConfirm(this;您确定要保存吗?');" id="btnSave" class="btn" /><!--注意这里的ClientIDMode的属性设置为Static,可以使用JS取得控件的唯一标示--> </form> </body>
点击btnSave,通过Request.Form,可以取到AllKeys,有三个key(1)__VIEWSTATE、(2)__EVENTVALIDATION、(3)ctl00$Content$btnSave; Button控件引发回传,会把Button的ID做为Request.Form的一个Key,通过枚举key值,查找控件实例,如果控件是Button控件,则判断是由该Button控件引发事件
第二种情况:
<body class="right_body"> <form name="aspnetForm" method="post" action="BuyCosting.aspx" id="aspnetForm"> <div> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTMwODc3MTQ5OGRk0331OCsOzyVuII0xpu5VKPKvo5vJYkQYK7Zmv/DZNzo=" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <div> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="4A46A59A" /> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAP+uoPhSYFm5G4yDZuuNE+8XXLxRrcG4xr1opytZqPyfqFis9PxNYbp8f2AZE9/LKv5Z0zAFdwsOFPhV5+TXIm9frWxYMQKVED7GIyarwi2uw==" /> </div> <a id="ctl00_Content_lbtnSave" href="javascript:__doPostBack('ctl00$Content$lbtnSave','')">保 存</a> </form> </body>
如果是LinkButton,ASP.NET会为其创建doPostBack函数,这样我们就可以调用了。
如果我们不希望使用LinkButton,而是只用Button,又希望调用__doPostBack函数,可以将Button的UseSubmitBehavior属性置为False,这时候ASPX页面就会生成__doPostBack函数了。我们来看效果:
<asp:Button ID="btnSave" CssClass="btn" runat="server" Text="保 存" OnClick="btnSave_Click" OnClientClick="return onPostBackConfirm(this,'您确定要保存吗?')" UseSubmitBehavior="false" ClientIDMode="Static" />
生成的代码如下,(我们会看到在input的onclick时间中,服务器会自动生成__doPostBack('ctl00$Content$btnSave','')这样一段代码)
<body class="right_body"> <form name="aspnetForm" method="post" action="BuyCosting.aspx" id="aspnetForm"> <div> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEyNjUxNDU4NDRkZO54SDP8/vp+PEw8W85kGFq9CqhFhpwTw3ujC0bgeI5a" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <div> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="4A46A59A" /> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAKI/mPqOFFsHAe435MJab21XXLxRrcG4xr1opytZqPyfqNnFopN+khg4IymQVAdRNBQmxh085hIM7qXOWkv0Nol" /> </div> <input type="button" name="ctl00$Content$btnSave" value="保 存" onclick="return onPostBackConfirm(this,'您确定要保存吗?');__doPostBack('ctl00$Content$btnSave','')" id="btnSave" class="btn" />
</form> <script src="../../JS/Base/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> //阻塞按钮提示信息,调用系统doPostBack()方法 function onPostBackConfirm(obj, objmsg) { var objId = $(obj).attr("name"); //获取asp.net 控件Name属性的值 artDialog({ title: '系统提示', content: objmsg, lock: true, opacity: 0.1, icon: 'question', ok: function () { __doPostBack(objId, ''); }, cancelVal: '取消', cancel: true }); return false; } </script> </body>
这时候我们再去点击确认的时候,就可以去执行服务器端的事件了。
下面是效果
第一次写博文,语言组织不好,还望博友们见谅。
本文参照了以下博文,供大家参考
http://www.cnblogs.com/50614090/archive/2012/03/28/2420870.html
http://www.cnblogs.com/hjf1223/archive/2006/07/05/443761.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 关于各种不同开发语言之间数据加密方法(DES,RSA等)的互通的 2020-06-07
- 算法训练 自行车停放 2020-02-27
- Qt5 error LNK2019 无法解析的外部符号的解决办法 2020-02-14
- 动态规划:最大子串和 2020-01-30
- C++引用计数设计与分析(解决垃圾回收问题) 2019-12-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash