I'm writing the account management portion of an ASP.Net application. I was putting together the form for changing the customers' password when I discovered an ASP.Net texbox with a TextMode attribute set to “Password” ignores assignements to the Text property; this means one can't prefill a password box for a customer. For example, the following line of code DOESN'T assign “MyPassword” to the Text property:
txtPassword.Text = “MyPassword”; //text property will be blank after this line executes
This was a golden opportunity for me to leverage my old school ASP/HTML knowledge. ASP.Net TextBox controls are rendered in users' browsers as HTML Input tags and the “Value” attribute on an HTML input tag can be used to set the value of a TextBox. We can re-write our ASP.Net line above like this:
txtPassword.Attributes.Add( “value”, “MyPassword” ); //this works
Voila. Besides this use, the Attributes collection is how I achieve a lot of client-side behaviour:
txtEmail.Attributes.Add( "onFocus", "this.style.backgroundColor='aliceblue';" );
txtEmail.Attributes.Add( "onBlur", "this.style.backgroundColor='white';" );
This highlights the txtEmail textbox in pale blue when the user is typing in the box, and then returns it to a white highlight once the focus has moved on to another control. As an aside, where did anyone get “aliceblue” as an HTML color from? Seriously, is there somebody named Alice out there who is icy cool like the color? Can't we make it GrantBlue -- I may not be cool blue enough, but certainly a pale green at least.
Realize we're adding JavaScript behaviour to the txtEmail control, which is inconsistently implemented in different browsers. In Internet Explorer (Internet Exploiter, as one colleague calls it), the above code will behave as expected. In other browsers, Netscape (known as NutScrape by the same colleague) in particular, will throw JavaScript errors. We would need to do some conditional branching based on client browser type . . . something like this:
if( Request.Browser.Type.IndexOf( "IE" ) > -1 )
{
txtEmail.Attributes.Add( "onFocus", "this.style.backgroundColor='aliceblue';" );
txtEmail.Attributes.Add( "onBlur", "this.style.backgroundColor='white';" );
}
Request.Browser wraps the raw ServerVariables collection from classic ASP, giving us a more convenient mechanism to work with. Netscape 4 browsers, for example, return “Netscape4” when querying the Request.Browser.Type property.
If this seems like a lot of work to go through to add a little user-interface nicety to your textbox, I agree. This is a perfect example of when to create a custom control -- we could encapsulate all our Attribute addition and browser detection and compile it into a custom control named “MyImprovedTextbox.” I could drag and drop MyImprovedTextboxes all over my application (and, indeed, other applications!) and only have to maintain one code unit in the control definition. If I wanted, I could make the onFocus color a puplic property of the textbox and then the color becomes more flexible: we're not stuck with aliceblue highlighting. There's tons of examples of how to do this online . . . but maybe I'll follow through and blog on it later . . . but this is all for now.
Happy .Netting!