做前台功能设计的时候,遇到以下需求:
文本框显示数据库中原来的文本,鼠标点击文本框即变为编辑状态,编辑结束时执行内容存储的后台事件。
显示文本时的样式和与编辑状态时的样式风格也要求有不同。
实验中遇到以下问题:初次页面展现时,如果文本框输入不正确,触发了验证控件。改变文本框的输入正确后,焦点离开事件顺利执行。当再次将文本框的值输入异常时,验证控件没有显示异常,后台事件依然进行了。显然与逻辑不符合了,用验证控件的目的就是如果前台页面验证不满足的情况下,肯定不允许执行后台事件的。
辛苦一番之后,问题解决:
验证控件需设置以下2个属性,让其不做客户端脚本处理,直接调后台事件,但又要显示错误信息
EnableClientScript="False"
Display="Dynamic"
同时在后台TextChanged事件中也应检查页面验证的情况
protected
void
TextBox1_TextChanged(
object
sender, EventArgs e)
{
if (Page.IsValid)
{
[YourCode]
}
}
{
if (Page.IsValid)
{
[YourCode]
}
}
为了让使用效果更加友好,把这些控件又放在了UpdatePanel中。不闪的才是最好的。
测试项目
ASP.NET代码:(TextBox的样式变更,放在了皮肤文件中)
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<% @ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > Untitled Page </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" />
< div >
< asp:UpdatePanel ID ="UpdatePanel1" runat ="server" >
< ContentTemplate >
< table id ="table1" border ="0" cellpadding ="0" cellspacing ="0" width ="500" >
< tr >
< td style ="width:47px; font-size: 9pt;" align ="center" > 标题1 </ td >
< td style ="width:124px;" align ="left" >
< asp:TextBox ID ="TextBox1" runat ="server" SkinID ="txtchange" OnTextChanged ="TextBox1_TextChanged"
CausesValidation ="True" AutoPostBack ="True" > 你好啊! </ asp:TextBox >
</ td >
< 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 >
< tr >
< td style ="width:47px; font-size: 9pt;" align ="center" > 标题2 </ td >
< td style ="width:124px;" align ="left" >
< asp:TextBox ID ="TextBox2" runat ="server" OnTextChanged ="TextBox1_TextChanged" SkinID ="txtchange"
CausesValidation ="True" AutoPostBack ="True" > heekui </ asp:TextBox ></ td >
< td style ="width:200px;" align ="left" >
< asp:RequiredFieldValidator ID ="RequiredFieldValidator2" runat ="server" ControlToValidate ="TextBox2"
EnableClientScript ="False" Display ="Dynamic" ErrorMessage ="必须输入" Width ="155px" Font-Size ="Small" ></ asp:RequiredFieldValidator ></ td >
</ tr >
< tr >
< td style ="width:100%;" colspan ="3" align ="left" >< asp:Label ID ="Label1" runat ="server" Width ="166px" Font-Size ="Small" ForeColor ="#C04000" ></ asp:Label >
</ td >
</ tr >
< tr >
< td align ="left" colspan ="3" style ="width: 100%; font-size: 9pt;" >
点击黄色区域,可进行编辑 </ td >
</ tr >
</ table >
</ ContentTemplate >
</ asp:UpdatePanel >
</ div >
</ form >
</ body >
</ html >
<% @ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > Untitled Page </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< asp:ScriptManager ID ="ScriptManager1" runat ="server" />
< div >
< asp:UpdatePanel ID ="UpdatePanel1" runat ="server" >
< ContentTemplate >
< table id ="table1" border ="0" cellpadding ="0" cellspacing ="0" width ="500" >
< tr >
< td style ="width:47px; font-size: 9pt;" align ="center" > 标题1 </ td >
< td style ="width:124px;" align ="left" >
< asp:TextBox ID ="TextBox1" runat ="server" SkinID ="txtchange" OnTextChanged ="TextBox1_TextChanged"
CausesValidation ="True" AutoPostBack ="True" > 你好啊! </ asp:TextBox >
</ td >
< 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 >
< tr >
< td style ="width:47px; font-size: 9pt;" align ="center" > 标题2 </ td >
< td style ="width:124px;" align ="left" >
< asp:TextBox ID ="TextBox2" runat ="server" OnTextChanged ="TextBox1_TextChanged" SkinID ="txtchange"
CausesValidation ="True" AutoPostBack ="True" > heekui </ asp:TextBox ></ td >
< td style ="width:200px;" align ="left" >
< asp:RequiredFieldValidator ID ="RequiredFieldValidator2" runat ="server" ControlToValidate ="TextBox2"
EnableClientScript ="False" Display ="Dynamic" ErrorMessage ="必须输入" Width ="155px" Font-Size ="Small" ></ asp:RequiredFieldValidator ></ td >
</ tr >
< tr >
< td style ="width:100%;" colspan ="3" align ="left" >< asp:Label ID ="Label1" runat ="server" Width ="166px" Font-Size ="Small" ForeColor ="#C04000" ></ asp:Label >
</ td >
</ tr >
< tr >
< td align ="left" colspan ="3" style ="width: 100%; font-size: 9pt;" >
点击黄色区域,可进行编辑 </ td >
</ tr >
</ table >
</ ContentTemplate >
</ asp:UpdatePanel >
</ div >
</ form >
</ body >
</ html >
文本框皮肤文件:
<
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"
/>
后台代码:
using
System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
this.Theme = "default";
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
if (Page.IsValid)
{
string strOut = this.TextBox1.Text + " " + this.TextBox2.Text;
this.Label1.Text = strOut;
}
}
}
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
this.Theme = "default";
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
if (Page.IsValid)
{
string strOut = this.TextBox1.Text + " " + this.TextBox2.Text;
this.Label1.Text = strOut;
}
}
}
示例工程下载:
/Files/heekui/TxtChange.rar