在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的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

ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞的更多相关文章

  1. 每日学习心得:CustomValidator验证控件验证用户输入的字符长度、Linq 多字段分组统计、ASP.NET后台弹出confirm对话框,然后点击确定,执行一段代码

    2013-9-15 1.    CustomValidator验证控件验证用户输入的字符长度 在实际的开发中通常会遇到验证用户输入的字符长度的问题,通常的情况下,可以写一个js的脚本或者函数,在ASP ...

  2. 制作登录页面,点击键盘的 Enter 键或者单击“登录”按钮,验证用户输入的邮箱和密码是否正确

    查看本章节 查看作业目录 需求说明: 制作登录页面 点击键盘的 Enter 键或者单击"登录"按钮,验证用户输入的邮箱和密码是否正确 实现思路: 准备登录的静态页面 在页面中嵌入脚 ...

  3. ASP.NET 多次点击button后事件执行多次 并发解决 频繁操作解决办法

    首先让我们体验一下频繁操作: 1)打开项目,在后台aspx.cs等服务器页面,设置断点. 2)点击页面按钮 3)调试开始进入断点,然后重复点击页面按钮 4)服务器第一次事件已经处理完毕,调试再次进入了 ...

  4. 解决浏览器点击button出现边框问题

    发现问题 本人不懂浏览器的HTML代码 不知道怎么在chrome浏览器的F12之后点到了哪里 点击button的时候就会出现黑色边框 解决 终于发现不是因为动了调试页面,而是动了谷歌浏览器的高级选项, ...

  5. 点击button触发onclick事件判空后依旧自动跳转

    这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; v ...

  6. 解决WCF 调用方未由服务器进行身份验证或消息包含无效或过期的安全上下文令牌

    错误描述: 1. WCF:调用方未由服务器进行身份验证 2. 无法处理消息.这很可能是因为操作“http://tempuri.org/ISCCLSvc/GetCarriersByWareHouse”不 ...

  7. cocos2dx 3.x(多个按钮button执行同一事件的区分)

    // // ATTGamePoker.hpp // MalaGame // // Created by work on 2016/10/18. // // #ifndef ATTGamePoker_h ...

  8. OWASP Top 10 – 2013, 最新十大安全隐患(ASP.NET解决方法)

    OWASP(开放Web软体安全项目- Open Web Application Security Project)是一个开放社群.非营利性组织,目前全球有130个分会近万名会员,其主要目标是研议协助解 ...

  9. 解决点击cell执行动画导致的重用问题

    解决点击cell执行动画导致的重用问题 说明: 动画的细节都是裸露的,并没有封装,靠看官来优化了. 效果: 源码: https://github.com/YouXianMing/UITableView ...

随机推荐

  1. Delphi XE7编译安卓程序出错了

    昨天编译一个先前可以正常运行的程序,忽然就不能编译了,总是提示这个错误,经过一番排查,终于搞定了,原因:删除了安卓lib引用的JAR和单元文件.如果你也出现这个问题,打开工程全部目录,看一下是否有打小 ...

  2. kali linux之无线渗透

    无线技术变化大,难度大,既新鲜刺激,又压力山大.一半协议  一半理论 无线技术特点: 行业发展迅猛 互联网的重要入口 边界模糊 安全实施缺失而且困难 对技术不了解造成配置不当 企业网络私自接入ap破坏 ...

  3. linuxea:ELK5.5-elasticsearch-x-pack破解

    本站采用知识共享署名-非商业性使用-相同方式共享国际许可协议4.0 进行许可 本文作者:www.linuxea.com for Mark 文章链接:https://www.linuxea.com/17 ...

  4. 【vue】——CDN或全局引入CSS、JS。

    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. JDK下载与安装、 Eclipse下载与使用的总结心得_20173311118_牛明旺

     一.JDK下载与安装心得: ① 从官网http://www.oracl.com/technetwork/java上下载JDK,注意一定要同意该网站上的协议,否则下载不了(即点击“Accept Lic ...

  6. 钉钉机器人集成Jenkins推送消息模板自定义发送报告

    一.由于公司同样也使用了钉钉.那么在做Jenkins集成自动化部署的时候,也是可以集成钉钉的. 那种Jenkins下载钉钉插件集成,简单设置就可以完成了.我们今天要做的是,定制化的发送消息. 钉钉推送 ...

  7. L04-VirtualBox中CentOS7网络配置(可连外网)

    本文所述的方法在RHEL6.5.RHEL7和CentOS6.5中同样适用. 1.工具:VirtualBox,虚拟机:CentOS7 2.VirtualBox工具中的网络配置 (1)VirtualBox ...

  8. linux 多线程之间信号传递

    函数 sigwait sigwait的含义就如同它的字面意思:等待某个信号的到来.如果调用该函数的线程没有等到它想等待的信号那么该线程就休眠.要达到等到一个信号,我们得做下面的事: 首先,定义一个信号 ...

  9. 基础概念——理解IP地址和域名

    从程序员角度,可以把因特网看做是世界范围内的主机集合: 1)主机集合被映射为一组32位的IP地址. 2)这个IP地址被映射为一组称为因特网域名的标识符. 3)因特网主机上的进程能够通过连接和任何其他因 ...

  10. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...