TextBox设置OnTextChanged后验证控件失效问题的解决

简介: 做前台功能设计的时候,遇到以下需求:文本框显示数据库中原来的文本,鼠标点击文本框即变为编辑状态,编辑结束时执行内容存储的后台事件。显示文本时的样式和与编辑状态时的样式风格也要求有不同。实验中遇到以下问题:初次页面展现时,如果文本框输入不正确,触发了验证控件。

做前台功能设计的时候,遇到以下需求:
文本框显示数据库中原来的文本,鼠标点击文本框即变为编辑状态,编辑结束时执行内容存储的后台事件。
显示文本时的样式和与编辑状态时的样式风格也要求有不同。

实验中遇到以下问题:初次页面展现时,如果文本框输入不正确,触发了验证控件。改变文本框的输入正确后,焦点离开事件顺利执行。当再次将文本框的值输入异常时,验证控件没有显示异常,后台事件依然进行了。显然与逻辑不符合了,用验证控件的目的就是如果前台页面验证不满足的情况下,肯定不允许执行后台事件的。

辛苦一番之后,问题解决:
验证控件需设置以下2个属性,让其不做客户端脚本处理,直接调后台事件,但又要显示错误信息
EnableClientScript="False"
Display="Dynamic"

同时在后台TextChanged事件中也应检查页面验证的情况

img_a6339ee3e57d1d52bc7d02b338e15a60.gif      protected   void  TextBox1_TextChanged( object  sender, EventArgs e)
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif    
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif {
img_33d02437d135341f0800e3d415312ae8.gif        
if (Page.IsValid)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif            [YourCode]
img_105a1e124122b2abcee4ea8e9f5108f3.gif       }

img_05dd8d549cff04457a6366b0a7c9352a.gif    }

img_a6339ee3e57d1d52bc7d02b338e15a60.gif

为了让使用效果更加友好,把这些控件又放在了UpdatePanel中。不闪的才是最好的。 img_70a5bbbf4afde2cc77268c9091beaf3e.gif

测试项目
ASP.NET代码:(TextBox的样式变更,放在了皮肤文件中)

img_405b18b4b6584ae338e0f6ecaf736533.gif img_1c53668bcee393edac0d7b3b3daff1ae.gif <% img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<% img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif @ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1"  %>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< html  xmlns ="http://www.w3.org/1999/xhtml" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< head  runat ="server" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< title > Untitled Page </ title >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ head >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
< body >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
< form  id ="form1"  runat ="server" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server"   />
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
< div >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
< asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                
< ContentTemplate >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                    
< table  id ="table1"  border ="0"  cellpadding ="0"  cellspacing ="0"  width ="500" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        
< tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  style ="width:47px; font-size: 9pt;"  align ="center" > 标题1 </ td >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  style ="width:124px;"  align ="left" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                                
< asp:TextBox  ID ="TextBox1"  runat ="server"  SkinID ="txtchange"  OnTextChanged ="TextBox1_TextChanged"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        CausesValidation
="True"  AutoPostBack ="True" > 你好啊! </ asp:TextBox >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
</ td >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  style ="width:200px;"  align ="left" >< asp:RequiredFieldValidator  id ="RequiredFieldValidator1"  runat ="server"  Width ="155px"  ErrorMessage ="必须输入"  Display ="Dynamic"  EnableClientScript ="False"  ControlToValidate ="TextBox1"  Font-Size ="Small" ></ asp:RequiredFieldValidator ></ tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        
< tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  style ="width:47px; font-size: 9pt;"  align ="center" > 标题2 </ td >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  style ="width:124px;"  align ="left" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                                
< asp:TextBox  ID ="TextBox2"  runat ="server"  OnTextChanged ="TextBox1_TextChanged"  SkinID ="txtchange"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        CausesValidation
="True"  AutoPostBack ="True" > heekui </ asp:TextBox ></ td >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  style ="width:200px;"  align ="left" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                    
< asp:RequiredFieldValidator  ID ="RequiredFieldValidator2"  runat ="server"  ControlToValidate ="TextBox2"
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        EnableClientScript
="False"  Display ="Dynamic"  ErrorMessage ="必须输入"  Width ="155px"  Font-Size ="Small" ></ asp:RequiredFieldValidator ></ td >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        
</ tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        
< tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  style ="width:100%;"  colspan ="3"  align ="left" >< asp:Label  ID ="Label1"  runat ="server"  Width ="166px"  Font-Size ="Small"  ForeColor ="#C04000" ></ asp:Label >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
</ td >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        
</ tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        
< tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                            
< td  align ="left"  colspan ="3"  style ="width: 100%; font-size: 9pt;" >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                                点击黄色区域,可进行编辑
</ td >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                        
</ tr >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                    
</ table >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif                
</ ContentTemplate >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif            
</ asp:UpdatePanel >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif        
</ div >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif    
</ form >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ body >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</ html >
img_a6339ee3e57d1d52bc7d02b338e15a60.gif


文本框皮肤文件:

img_a6339ee3e57d1d52bc7d02b338e15a60.gif < asp:TextBox  SkinId ="txtchange"  onblur ="this.style.backgroundColor='#FFFACD';this.style.border='solid 0px';"  onfocus ="this.style.backgroundColor='#FFFFFF';this.style.border='solid 1px';"  runat ="server"  BackColor ="#FFFACD"  BorderStyle ="Solid"  BorderWidth ="0px"   />


后台代码:

img_a6339ee3e57d1d52bc7d02b338e15a60.gif using  System;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Data;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Configuration;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Web;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Web.Security;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Web.UI;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Web.UI.WebControls;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Web.UI.WebControls.WebParts;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
using  System.Web.UI.HtmlControls;
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
public  partial  class  _Default : System.Web.UI.Page 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif {
img_33d02437d135341f0800e3d415312ae8.gif    
protected void Page_PreInit(object sender, EventArgs e)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif        
this.Theme = "default";
img_105a1e124122b2abcee4ea8e9f5108f3.gif    }

img_33d02437d135341f0800e3d415312ae8.gif    
protected void Page_Load(object sender, EventArgs e)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif
img_105a1e124122b2abcee4ea8e9f5108f3.gif    }

img_33d02437d135341f0800e3d415312ae8.gif    
protected void TextBox1_TextChanged(object sender, EventArgs e)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif        
if (Page.IsValid)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif            
string strOut = this.TextBox1.Text + " " + this.TextBox2.Text;
img_33d02437d135341f0800e3d415312ae8.gif            
this.Label1.Text = strOut;
img_105a1e124122b2abcee4ea8e9f5108f3.gif        }

img_105a1e124122b2abcee4ea8e9f5108f3.gif    }

img_05dd8d549cff04457a6366b0a7c9352a.gif}

示例工程下载:
/Files/heekui/TxtChange.rar

目录
相关文章
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1723 0
|
8月前
|
前端开发
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
(css必看)禁止用户拖动,禁止选中复制,禁止输入框输入
341 1
|
JavaScript
layUI日期控件无效、一闪而过的解决方案
layUI日期控件无效、一闪而过的解决方案
234 0
|
存储 JSON JavaScript
Easyui datagrid combobox输入框非法输入判断与事件总结
Easyui datagrid combobox输入框非法输入判断与事件总结
196 0
SwiftUI—如何激活表单以及如何使表单失效
SwiftUI—如何激活表单以及如何使表单失效
165 0
SwiftUI—如何激活表单以及如何使表单失效
【layer】ifreme弹出层问题,导致代码失效 ——关闭当前弹出层
【layer】ifreme弹出层问题,导致代码失效 ——关闭当前弹出层
133 0
【layer】ifreme弹出层问题,导致代码失效 ——关闭当前弹出层
|
JavaScript 前端开发
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令
|
JavaScript 前端开发 搜索推荐
禁止 浏览器title属性的默认效果
正好回答了一个问题,浏览器哪个事件里可以 禁止 浏览器对title显示默认行为? 。 今天整理一下相关的测试 demo。
534 0
如何不让input输入框显示或禁止历史记录
如何不让input输入框显示或禁止历史记录
846 0
|
C#
【WPF】设置TextBox内容为空时的提示文字
原文:【WPF】设置TextBox内容为空时的提示文字 ...
4708 0

热门文章

最新文章