Introduction
EXTextBox is an extended textbox with an Enter key event handler. That means, you can add an event handler function to be called on the server side while you press the Enter key over the EXTextBox. This idea came to me when I had problem with a page having a number of buttons and textboxes and among it I had a search form in the same page. And as you know most of the users use the Enter key instead of pressing the search button in a search form. And here is the problem, we cannot predict which event is going to be called, since we have a number of buttons in the same page. So I thought it would be better if I have a textbox control that can handle the Enter key. Something like "Requirement is the Father of invention"?
As usual I went to the next step, the implementation. For this to work, the textbox should have a client side event which should post the form while you press the Enter key. So I wrote two simple JavaScript functions for it , __doThis and __doARPostBack.
__doThis Function
<script language='javascript'>
<!--
function __doThis(fld){
var key = window.event.keyCode;
if(key == 13){
__doARPostBack(fld.id,'enterkey_event');
return false;
}
return true;
}
</script>
__doARPostBack Function
<script language='javascript'>
<!--
function __doARPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf('netscape') > -1) {
theform = document.forms[0];
}
else {
theform = document.forms[0];
}
theform.__EVENTTARGET.value = eventTarget.split('$').join(':');
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
</script>
The code blocks are registered to the client inside the OnInit function of the TextBox by overriding it. And two hidden fields, __EVENTTARGET and __EVENTARGUMENT are also registered with the page. __EVENTTARGET will carry the ID of the EXTextBox which fired the event, and the __EVENTARGUMENT will carry extra information.
protected override void OnInit(EventArgs e)
{
base.OnInit (e);
this.Page.RegisterHiddenField("__EVENTTARGET","");
this.Page.RegisterHiddenField("__EVENTARGUMENT","");
string strScript = @"<script language='javascript'>
<!--
function __doARPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().indexOf(
'netscape') > -1) {
theform = document.forms[0];
}
else {
theform = document.forms[0];
}
//
//Set the hidden field values
//
theform.__EVENTTARGET.value = eventTarget.split('$').join(':');
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>";
this.Page.RegisterClientScriptBlock("doPost",strScript);
strScript = @"<script language='javascript'>
function __doThis(fld){
var key = window.event.keyCode;
if(key == 13){
__doARPostBack(fld.id,'enterkey_event');
return false;
}
return true;
}
</script>";
this.Page.RegisterClientScriptBlock("doThis",strScript);
}
The next thing is to call the __doThis function on the KeyDown event of the textbox. For this override the Render function of the TextBox.
protected override void OnPreRender(EventArgs e)
{
if (this.EnterKey != null)
{
this.Attributes.Add("onkeydown","return __doThis(this);");
}
base.OnPreRender(e);
}
Now we should setup a server side event handler to serve our custom event. For that, first of all we have to declare a delegate function:
public delegate void KeyDownHandler(Object sender , KeyEventArgs e);
and
public event KeyDownHandler EnterKey;
Then add a function OnEnterKey which will be called during the event.
Where is the event going to be invoked? When the page is posted back the control can access the postback data if it implements the IPostBackDataHandler interface. This has two functions which are to be implemented, LoadPostData and RaisePostDataChangedEvent. Out of this we will use the LoadPostData to access the posted back data. Here check the posted back data to get the values of the hidden fields __EVENTTARGET and __EVENTARGUMENT and call the event handler OnEnterKey accordingly.
Let's do the implementation step by step:
- Start a new C# Class Library Project ARLib.
- Add a class to it called
EXTextBox.
- Paste the code below to the EXTextBox.cs file:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.IO;
using System.Reflection;
using System.Text;
using System.Text.RegularExpressions;
namespace ARLib
{
public delegate void KeyDownHandler(Object sender , KeyEventArgs e);
public class EXTextBox:System.Web.UI.WebControls.TextBox,
IPostBackDataHandler
{
#region Declarations
public event KeyDownHandler EnterKey;
#endregion
#region Overriden Functions
protected override void OnInit(EventArgs e)
{
base.OnInit (e);
this.Page.RegisterHiddenField("__EVENTTARGET","");
this.Page.RegisterHiddenField("__EVENTARGUMENT","");
string strScript = @"<script language='javascript'>
<!--
function __doARPostBack(eventTarget, eventArgument) {
var theform;
if (window.navigator.appName.toLowerCase().
indexOf('netscape') > -1) {
theform = document.forms[0];
}
else {
theform = document.forms[0];
}
//
//Set the hidden field values
//
theform.__EVENTTARGET.value =
eventTarget.split('$').join(':');
theform.__EVENTARGUMENT.value = eventArgument;
theform.submit();
}
// -->
</script>";
this.Page.RegisterClientScriptBlock("doPost",strScript);
strScript = @"<script language='javascript'>
function __doThis(fld){
var key = window.event.keyCode;
if(key == 13){
__doARPostBack(fld.id,'enterkey_event');
return false;
}
return true;
}
</script>";
this.Page.RegisterClientScriptBlock("doThis",strScript);
}
protected override void OnPreRender(EventArgs e)
{
if (this.EnterKey != null)
{
this.Attributes.Add("onkeydown","return __doThis(this);");
}
base.OnPreRender(e);
}
#endregion
#region EventHandler
protected virtual void OnEnterKey(KeyEventArgs e)
{
if(this.EnterKey != null)
this.EnterKey(this , e);
}
#endregion
#region IPostBackDataHandler Members
public void RaisePostDataChangedEvent()
{
}
public bool LoadPostData(string postDataKey,
System.Collections.Specialized.NameValueCollection
postCollection)
{
this.Text = postCollection[postDataKey];
string et = postCollection["__EVENTTARGET"].Trim();
string ea = postCollection["__EVENTARGUMENT"].Trim();
if(et.CompareTo(this.ClientID.Trim())==0 )
{
switch(ea)
{
case "enterkey_event":
KeyEventArgs k = new KeyEventArgs();
k.TextBoxID = this.ID;
k.Text = postCollection[postDataKey];
this.OnEnterKey(k);
break;
}
}
return false;
}
#endregion
#region Properties
#endregion
}
#region KeyEventArgs Class
public class KeyEventArgs:System.EventArgs
{
private string textBoxID;
private string text;
public KeyEventArgs()
{
}
public string TextBoxID
{
set
{
this.textBoxID = value;
}
get
{
return this.textBoxID;
}
}
public string Text
{
set
{
this.text = value;
}
get
{
return this.text;
}
}
}
#endregion
}
- Compile the library.
- Start a new Web Project and add a Web Form to it.
- Right click the toolbox and select Add/Remove Items and select the DLL ARLib.
- Add an instance of this to the Web Form. Then add the event handler for the
EnterKey event as:
this.EXTextBox1.EnterKey += new ARLib.KeyDownHandler(
this.EXTextBox_EnterKey);
private void EXTextBox_EnterKey(object sender, ARLib.KeyEventArgs e)
{
Response.Write(e.Text);
}
The KeyEventArgs class provides the Text and ID of the TextBox which raises the event.
Hope this helps you...
