I have created a web custom control and used within an aspx page. I found the validation controls provided by asp.net are applicable to the built in server controls. I am not able to attach these validation controls with my custom control.
For ex. If i am using TextBox control then the RequiredFieldValidator is applicable to it. but when i try to apply the same RequiredFieldValidator to my custom control it is not possible. The property “ControlToValidate” does not show the object id of my custom control.
Could someone help me to rectify this problem?
Thanks for sharing your valuable time.
Below is the code from .cs file –
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Security.Permissions;
[assembly: TagPrefix("DatePicker", "SQ")]
namespace DatePicker
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:DatePicker runat=server></{0}:DatePicker>")]
public class DatePicker : CompositeControl
{
//To retrieve value i am using textbox
private TextBox _TxtDate = new TextBox();
// Image to select the calender date
private Image _ImgDate = new Image();
// Image URL to expose the image URL Property
private string _ImageUrl;
// Exposing autopostback property
private bool _AutoPostBack;
// property get the value from datepicker.
private string _Value;
//CSS class to design the Image
private string _ImageCssClass;
//CSS class to design the TextBox
private string _TextBoxCssClass;
//to formate the date
private string _DateFormat = "%m/%d/%Y";
//to hold javascript on client side
static Literal _litJScript=new Literal();
private bool _includeJS = false;
/**** properties***/
#region "[ Properties ]"
[Bindable(true), Category("Appearance"), DefaultValue("")]
public string ImageUrl
{
set
{
this._ImageUrl = value;
}
}
[Bindable(true), Category("Appearance"), DefaultValue(""), Localizable(true)]
public string Text
{
get
{
//String s = (String)ViewState["Text"];
//return ((s == null) ? string.Empty : s);
return _Value = _TxtDate.Text;
}
set
{
ViewState["Text"] = value;
_TxtDate.Text = value;
_TxtDate.BackColor = System.Drawing.Color.White;
}
}
[Bindable(true), Category("Appearance"), DefaultValue(""), Localizable(true)]
public string Value
{
get
{
return _Value= _TxtDate.Text;
}
set
{
_Value = _TxtDate.Text = value;
ViewState["Text"] = _Value;
_TxtDate.BackColor = System.Drawing.Color.White;
}
}
[Bindable(true), Category("Appearance"), DefaultValue(""), Localizable(true)]
public bool AutoPostBack
{
get
{
return _AutoPostBack;
}
set
{
_AutoPostBack = value;
}
}
[Bindable(true), Category("Appearance"), DefaultValue(""), Localizable(true)]
public string ImageCssClass
{
get
{
return _ImageCssClass;
}
set
{
_ImageCssClass = value;
}
}
[Bindable(true), Category("Appearance"), DefaultValue(""), Localizable(true)]
public string TextBoxCssClass
{
get
{
return _TextBoxCssClass;
}
set
{
_TextBoxCssClass = value;
}
}
[Bindable(true), Category("Custom"), DefaultValue(""), Localizable(true)]
public string CommandName
{
get
{
string s = ViewState["CommandName"] as string;
return s == null ? String.Empty : s;
}
set
{
ViewState["CommandName"] = value;
}
}
[Bindable(true), Category("Custom"), DefaultValue(""), Localizable(true)]
public string CommandArgument
{
get
{
string s = ViewState["CommandArgument"] as string;
return s == null ? String.Empty : s;
}
set
{
ViewState["CommandArgument"] = value;
}
}
[Bindable(true), Category("Custom"), DefaultValue(""), Localizable(true)]
public string DateFormat
{
get
{
return _DateFormat;
}
set
{
_DateFormat = value;
}
}
[Bindable(true), Category("Behavior"), DefaultValue("True")]
public bool IncludeClientSideJS
{
get { return _includeJS; }
set {
_includeJS = value;
}
}
[Bindable(true), Category("Behavior"), DefaultValue("True")]
public override bool Enabled
{
get { return _TxtDate.Enabled; }
set
{
_TxtDate.Enabled = value;
_ImgDate.Visible = value;
}
}
[Bindable(true), Category("Layout")]
public override Unit Width
{
get
{
return base.Width;
}
set
{
base.Width = value;
_TxtDate.Width = value;
}
}
#endregion
protected static readonly object EventCommandObj = new object();
public event CommandEventHandler Command
{
add
{
Events.AddHandler(EventCommandObj, value);
}
remove
{
Events.RemoveHandler(EventCommandObj, value);
}
}
//this will raise the bubble event
protected virtual void OnCommand(CommandEventArgs commandEventArgs)
{
CommandEventHandler eventHandler = (CommandEventHandler)Events[EventCommandObj];
if (eventHandler != null)
{
eventHandler(this, commandEventArgs);
}
base.RaiseBubbleEvent(this, commandEventArgs);
}
//this will be initialized to OnTextChanged event on the normal textbox
private void OnTextChanged(object sender, EventArgs e)
{
if (this.AutoPostBack)
{
//pass the event arguments to the OnCommand event to bubble up
CommandEventArgs args = new CommandEventArgs(this.CommandName, this.CommandArgument);
OnCommand(args);
}
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
AddStyleSheet();
AddJavaScript("DatePicker.Resources.prototype.js");
AddJavaScript("DatePicker.Resources.calendarview.js");
// For TextBox
// setting name for textbox. using t just to concat with this.ID for unqiueName
_TxtDate.ID = this.ID + "t";
// setting postback
_TxtDate.AutoPostBack = this.AutoPostBack;
// giving the textbox default value for date
_TxtDate.Text = this.Value;
//Initializing the TextChanged with our custom event to raise bubble event
_TxtDate.TextChanged += new System.EventHandler(this.OnTextChanged);
//Set max length
_TxtDate.MaxLength = 10;
//Setting textbox to readonly to make sure user dont play with the textbox
//_TxtDate.Attributes.Add("readonly", "readonly");
// adding stylesheet
_TxtDate.Attributes.Add("class", this.TextBoxCssClass);
_TxtDate.Attributes.Add("onkeypress", "maskDate(event)");
_TxtDate.Attributes.Add("onfocusout","isValidDate(event)");
// For Image
// setting alternative name for image
_ImgDate.AlternateText = "imageURL";
if (!string.IsNullOrEmpty(_ImageUrl))
_ImgDate.ImageUrl = _ImageUrl;
else
{
_ImgDate.ImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "DatePicker.Resources.CalendarIcon.gif");
}
//setting name for image
_ImgDate.ID = this.ID + "i";
//setting image class for textbox
_ImgDate.Attributes.Add("class", this.ImageCssClass);
//Initialize JS with literal
string s = "<script language=\"javascript\">function maskDate(e){var evt=window.event || e;var srcEle = evt.srcElement?e.srcElement:e.target;";
s = s + "var myT=document.getElementById(srcEle.id);var KeyID = evt.keyCode;";
s = s + "if((KeyID>=48 && KeyID<=57) || KeyID==8){if(KeyID==8)return;if(myT.value.length==2){";
s = s + "myT.value=myT.value+\"/\";}if(myT.value.length==5){myT.value=myT.value+\"/\";}}";
s = s + "else{window.event.keyCode=0;}}";
string s1 = "function isValidDate(e){var validDate=true;var evt=window.event || e;var srcEle = evt.srcElement?e.srcElement:e.target;";
s1 = s1 + "var myT=document.getElementById(srcEle.id);var mm=myT.value.substring(0,2);var dd=myT.value.substring(5,3);var yy=myT.value.substring(6);";
s1 = s1 + "var originalCss =myT.className; if(mm!=0 && mm>12){myT.value=\"\"; validDate=false;}else{if((yy % 4 == 0 && yy % 100 != 0) || yy % 400 == 0){if(mm==2 && dd>29){";
s1 = s1 + "myT.value=\"\"; validDate=false;}}else{if(mm==2 && dd>28){myT.value=\"\"; validDate=false;}else{if(dd!=0 && dd>31){";
s1 = s1 + "myT.value=\"\"; validDate=false;}else{if((mm==4 || mm==6 || mm==9 || mm==11) && (dd!=0 && dd>30)){myT.value=\"\"; validDate=false;}}}}}";
s1 = s1 + "if(!validDate){myT.style.backgroundColor='#FD9593';myT.focus;}else { myT.style.backgroundColor='#FFFFFF';}}</script>";
_litJScript.Text = s+s1;
}
/// <summary>
/// adding child controls to composite control
/// </summary>
protected override void CreateChildControls()
{
this.Controls.Add(_TxtDate);
this.Controls.Add(_ImgDate);
if(_includeJS)
this.Controls.Add(_litJScript);
base.CreateChildControls();
}
public override void RenderControl(HtmlTextWriter writer)
{
//render textbox and image
_TxtDate.RenderControl(writer);
_ImgDate.RenderControl(writer);
if(_includeJS)
_litJScript.RenderControl(writer);
RenderContents(writer);
}
/// <summary>
/// Adding the javascript to render the content
/// </summary>
/// <param name="output"></param>
protected override void RenderContents(HtmlTextWriter output)
{
StringBuilder calnder = new StringBuilder();
//adding javascript first
if (Enabled)
{
calnder.AppendFormat(@"<script type='text/javascript'>
document.observe('dom:loaded', function() {{
Calendar.setup({{
dateField: '{0}',
triggerElement: '{1}',
dateFormat: '{2}'
}})
}});
", _TxtDate.ClientID, _ImgDate.ClientID, _DateFormat);
calnder.Append("</script>");
}
else
{
calnder.AppendFormat(@"<script type='text/javascript'>
document.observe('dom:loaded', function() {{
Calendar.setup({{
dateField: '{0}',
triggerElement: '{1}',
dateFormat: '{2}'
}})
}});
", _TxtDate.ClientID, null, _DateFormat);
calnder.Append("</script>");
}
output.Write(calnder.ToString());
}
private void AddStyleSheet()
{
string includeTemplate = "<link rel='stylesheet' text='text/css' href='{0}' />";
string includeLocation =
Page.ClientScript.GetWebResourceUrl(this.GetType(), "DatePicker.Resources.calendarview.css");
LiteralControl include = new LiteralControl(String.Format(includeTemplate, includeLocation));
Page.Header.Controls.Add(include);
}
private void AddJavaScript(string javaScriptFile)
{
string scriptLocation = Page.ClientScript.GetWebResourceUrl(this.GetType(),javaScriptFile );
Page.ClientScript.RegisterClientScriptInclude(javaScriptFile, scriptLocation);
}
}
}
You should either use a CustomValidator, or insert the RequiredFieldValidator directly into your custom control. Of course the built-in validators don’t work with your control… they have no idea what to do with it! But if your control internally uses a TextBox, then you can also have a RequiredFieldValidator there.
A third possibility is to expose your internal TextBox with a property, which you can then reference with ControlToValidate. However, the first two methods are preferable.