ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞

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

我们再服务器点击事件中写了这样一段代码：

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执行服务器事件之前验证用户输入并阻塞的更多相关文章

每日学习心得：CustomValidator验证控件验证用户输入的字符长度、Linq 多字段分组统计、ASP.NET后台弹出confirm对话框，然后点击确定，执行一段代码
2013-9-15 1. CustomValidator验证控件验证用户输入的字符长度在实际的开发中通常会遇到验证用户输入的字符长度的问题,通常的情况下,可以写一个js的脚本或者函数,在ASP ...
制作登录页面，点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确
查看本章节查看作业目录需求说明: 制作登录页面点击键盘的 Enter 键或者单击"登录"按钮,验证用户输入的邮箱和密码是否正确实现思路: 准备登录的静态页面在页面中嵌入脚 ...
ASP.NET 多次点击button后事件执行多次并发解决频繁操作解决办法
首先让我们体验一下频繁操作: 1)打开项目,在后台aspx.cs等服务器页面,设置断点. 2)点击页面按钮 3)调试开始进入断点,然后重复点击页面按钮 4)服务器第一次事件已经处理完毕,调试再次进入了 ...
解决浏览器点击button出现边框问题
发现问题本人不懂浏览器的HTML代码不知道怎么在chrome浏览器的F12之后点到了哪里点击button的时候就会出现黑色边框解决终于发现不是因为动了调试页面,而是动了谷歌浏览器的高级选项, ...
点击button触发onclick事件判空后依旧自动跳转
这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; v ...
解决WCF 调用方未由服务器进行身份验证或消息包含无效或过期的安全上下文令牌
错误描述: 1. WCF:调用方未由服务器进行身份验证 2. 无法处理消息.这很可能是因为操作“http://tempuri.org/ISCCLSvc/GetCarriersByWareHouse”不 ...
cocos2dx 3.x(多个按钮button执行同一事件的区分)
// // ATTGamePoker.hpp // MalaGame // // Created by work on 2016/10/18. // // #ifndef ATTGamePoker_h ...
OWASP Top 10 – 2013, 最新十大安全隐患（ASP.NET解决方法）
OWASP(开放Web软体安全项目- Open Web Application Security Project)是一个开放社群.非营利性组织,目前全球有130个分会近万名会员,其主要目标是研议协助解 ...
解决点击cell执行动画导致的重用问题
解决点击cell执行动画导致的重用问题说明: 动画的细节都是裸露的,并没有封装,靠看官来优化了. 效果: 源码: https://github.com/YouXianMing/UITableView ...

随机推荐

net项目总结一（1）
中小型新闻发布系统代码结构:分为实体层,数据层与接口,数据工厂层,业务逻辑层,公共层,UI层(由于图片上传实在麻烦,所以只上传少量而已),项目中用到了工厂模式,解耦BLL层和DLL层 1.登录功能, ...
SpringCloud学习笔记(一)——基础
什么是微服务架构简单地说,微服务是系统架构上的一种设计风格,它的主旨是将一个原本独立的系统拆分成多个小型服务,这些小型服务都在各自独立的进程中运行,服务之间通过基于HTTP的RESTful API进 ...
使用hexo+coding搭建免费个人博客
1.检测node和npm 先检测一下有没有node.js和npm $ node -v //如果有,说明node.js安装成功! $ node -v v8.4.0 //如果有,说明npm安装成功! $n ...
InfluxDB概念和基本操作二
InfluxDB概念和基本操作 InfluxDB基本概念数据格式在 InfluxDB 中,我们可以粗略的将要存入的一条数据看作一个虚拟的 key 和其对应的 value(field value ...
Codeforces Round #555 (Div. 3) D. N Problems During K Days 【数学思维】
一题面 D. N Problems During K Days 二分析对于这题,刚开始我就是陷入了对公式的执着,企图用公式直接确定第一个数,然后试着去找序列.经过思考和手动模拟后发现是很难保证正 ...
django.db.utils.OperationalError: (1071, 'Specified key was too long; max key length is 767 bytes')
环境介绍 Django (2.1) Python 3.5.5 mysqlclient (1.4.2.post1) Mysql 5.6.28 RHEL 7.3 在migrate时候报错 model代码 ...
e的理解
1. e是一个重要的常数,但是我一直不知道,它的真正含义是什么. 它不像π.大家都知道,π代表了圆的周长与直径之比3.14159,可是如果我问你,e代表了什么.你能回答吗? 维基百科说: " ...
java transient 和Volatile关键字
Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的同一 ...
java翻译到mono C#实现系列(4) 利用CountDownTimer类实现倒计时功能 mono版
群里的朋友问利用CountDownTimer类实现倒计时功能怎么实现,我就百度了,参考http://blog.csdn.net/qq344429461/article/details/7521361写 ...
FindLine把多行查找改为多行替换
Sub FindLine() Dim textSelection As TextSelection textSelection = DTE.ActiveDocument.Selection textS ...

ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞

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

随机推荐

热门专题