KeyValuePair
TextBox is an extended textbox which saves data Key Value pair. That means, If you have Product name shown in textbox. then you can also associate Product ID, without using any hidden variable or other control. This Idea came to me while doing a perfomance improvement on one of the projects. This control can be very useful when you do not want the dropdown list to be loaded on the page at the beginning and you want on demand population. For example, the user will see only product Name and when he presses enters on textbox, a Popup populates with other product and allows the user to choose a product. User can choose its product and you can store its respective
ProductID
in "
TextValue
" field of
TextBox
.
The best part of KeyValuePair
TextBox is both the properties "Text
" and "TextValue
" can be changed through JavaScript and posted to the server. KeyValuePairTextBox
modifies the name tag of HTML TextBox control and appends the corresponding Value with a seperator '$'.
How it Works
The biggest challenge while extending Textbox property was that the properties should be managed with JavaScript. Following were the issues while developing such control:
- Browser does not recognize the custom properties on control, so they are not part of Post variables.
- If value is set from server side code, it will be part of
ViewState
, which cannot be handled in JavaScript.
So after sometime I realized, when we post a form to server it sends form data in
keyValuePair
. So normal Textbox data is send as "
&txtTestBox1=hello
"
I thought of manupulating the value, so I decided to append my text value in key, which is the name of the control
This JavaScript code does the trick:
<script language="'javascript'">
function setTextValue(ctrl,val) {
ctrl.name=ctrl.id+"$"+val;
}
</script>
The above JavaScript method will set the
TextValue
property of control. The sample code demonstrates the use of the above JavaScript.
So when we post data on server, we get key name with TextValue
.
Let's do the implementation step by step:
- Start a new C# Class Library Project
ARLib
- Add a class to it called KeyValuePairTextBox.cs
- Paste the code below to the KeyValuePairTextBox.cs file:
using System;
using System.Web;
using System.Web.UI;
using System.ComponentModel;
using System.Security.Permissions;
namespace CustomTestBox
{
[AspNetHostingPermissionAttribute(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
[AspNetHostingPermissionAttribute(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
public class KeyValuePairTextBox : System.Web.UI.WebControls.TextBox
{
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
public string TextValue
{
get
{
String s = (String)ViewState["TextValue"];
return ((s == null) ? "" : s);
}
set
{
ViewState["TextValue"] = value;
}
}
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
Page.ClientScript.RegisterStartupScript(this.GetType(),"SetValue","function
setTextValue(ctrl,val){ctrl.name=ctrl.id+\"$\"+val;}",true);
if (!String.IsNullOrEmpty(this.TextValue))
{
writer.AddAttribute(HtmlTextWriterAttribute.Name, this.ClientID + "$" + this.TextValue);
}
writer.AddAttribute("TextValue", this.TextValue);
base.Render(writer);
}
protected override void TrackViewState()
{
String textValue = GetValueFromKey(this.ID, '$');
if (!String.IsNullOrEmpty(textValue))
this.TextValue = textValue;
if (HttpContext.Current.Request.Form["__EVENTTARGET"] == this.ClientID)
{
RaisePostDataChangedEvent();
}
}
private string GetValueFromKey(string controlClientID, char separator)
{
String[] allKeys = HttpContext.Current.Request.Form.AllKeys;
String[] values = { };
String value = String.Empty;
foreach (String key in allKeys)
{
if (key.Contains(controlClientID + separator.ToString()))
{
values = key.Split(separator);
this.Text = HttpContext.Current.Request.Form[key];
value = values[values.Length - 1];
break;
}
}
return value;
}
protected override void RaisePostDataChangedEvent()
{
OnTextChanged(EventArgs.Empty);
}
public static readonly object TextChangedEvent = new object();
protected new void OnTextChanged(EventArgs e)
{
EventHandler h = (EventHandler)Events[TextChangedEvent];
if (h != null)
h(this, e);
}
[Category("Action")]
public new event EventHandler TextChanged
{
add { Events.AddHandler(TextChangedEvent, value); }
remove { Events.RemoveHandler(TextChangedEvent, value); }
}
}
}
- Compile the library
- Drag and Drop Control from toolbox
- Set the Text and TextValue Property
<cc1:KeyValuePairTextBox ID="txtKeyValue1" runat="server" EnableViewState="true"
onchange="setTextValue(this,'myValueByJavaScript1');" Text="Hello" TextValue="World" ></cc1:KeyValuePairTextBox>
- Done!
You can change the
TextValue
Property through JavaScript by calling the
setTextValue(ctrl,val)
method. Hope this helps..
This member doesn't quite have enough reputation to be able to display their biography and homepage.