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

ere12 · 发表于 2014-7-23 09:03:50

在网站项目开发时，为了减少用户的错误性的操作，很多时候我们都需要做一些必要的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 ExePostBackConfirm(objId, objmsg) {
         objId = $("#" + objId).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="保存" 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="保存" id="btnSave" class="btn" />

</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="保存"
      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="保存" 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 ExePostBackConfirm(objId, objmsg) {
         objId = $("#" + objId).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>

这时候我们再去点击确认的时候，就可以去执行服务器端的事件了。

下面是效果

账号		自动登录	找回密码
密码			立即注册

wirelessnetview好用的无线分析工具

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

RH199 RHCSA Rapid Track

Red Hat RHCE 8 (EX294) Cert Guide

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

相关帖子

扫码加入运维网微信交流群