Marketing Interactive Technology Executives Blog

An Easier Way to Modify the XHTML Output of ASP.NET Controls

Oct

2008

by M.S.

Why would we want to change the output of ASP.NET server controls?

When writing either a custom web control derived from an existing control or a control adapter, it is not uncommon that we need to modify the html output of that is normally generated only slightly, without having to reinvent the entire wheel. In fact, saying that this "is not uncommon" is a bit of an understatement. If you've seen many of our recent development posts on this blog you will notice that we spend a fair amount of time trying to manipulate the output of asp.net. As user interfaces gain complexity and other client side frameworks enter the picture, we consistently find ourselves less than satisfied with the standard output offered by ASP.NET server controls. Recoding all of the output can be a risky proposition because the original microsoft rendering code often contains conditionals that account for various scenarios, browsers and property settings. In the case of control adapters, the ability to use virtual methods with inheritance to override the rendering of particular attributes or elements is somewhat limited. This might leave the developer somewhat stuck with needing to re-invent the wheel with their control adapter. I'll go over a simple, general technique for those, "I want to produce the exact same html except..." situations. Keep reading to see a neat little short cut to this tak much easier, and no...we're not talking about doing string replaces on the output stream!

jQuery Style ASP.NET Form Validators - Part Deux: Let's Get Animated

Oct

2008

by SMercer

Adding Some Sweet JQuery Animation to Your ASP.NET Form Validators

This blog post is a continuation of my previous post on this subject. In case you haven't, I highly suggest you give it a read here so that you will have some clue what the heck I am talking about. After writing that original post, I received number of requests asking that I take it a step further by adding some animation into the mix so that my extended ASP.NET form validators are truly deserving of the title "jQuery Style". The results are pretty slick, and I have added the new functionality into our internal timesheet system and it seems to be holding it's own accross the different browsers and operating systems that we employ here at DS. And yes, I actually used JQuery to do it, since it offers some nice, quick out of the box options for animation that have been battle tested.

See Demo | Download the Source Code

How It's Done

Ok, prepare to be dazzled. This whole addition is doable by overriding one of the .NET validation functions and adding about 2 lines of code to it. Have a look:

   1:  ValidatorUpdateDisplay = function (val)

   2:  {

   3:      if (typeof(val.display) == "string")

   4:      {

   5:          if (val.display == "None")

   6:          {

   7:              return;

   8:          }

   9:          if (val.display == "Dynamic")

  10:          {

  11:              //changed this block to not set display to inline, but to remove style attribute entirely

  12:              //undo comments if not using jQuery

  13:              if(val.isvalid)

  14:                  $(val).hide("fast");//val.style.display = "none";

  15:              else

  16:                  $(val).show("fast");//val.removeAttribute("style");

  17:              return;

  18:          }

  19:      }

  20:      if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1))

  21:      {

  22:          val.style.display = "inline";

  23:      }

  24:      val.style.visibility = val.isvalid ? "hidden" : "visible";

  25:  }

GMail Goggles?

Oct

2008

by B-ri

Google has done it again.

Just in time for "Joe Six Pack" to enjoy the Presidential debates, Google Labs has released Mail Goggles. Mail Goggles, unlike beer googles, prevents you from doing stupid things.

So how does it work?

You consume a fair amount of alcohol.
You convince yourself that your boss is a jerk, or maybe that some significant other who screwed you over is indeed "the one" after all.
You write an email to this person telling them how you really feel.
You click send.
Mail Goggles pops up and asks you 5 questions of 3rd grade math with a 60 second time limit.
You fail to answer the questions, so the message does not get sent. Therfore, you avoid making an ass out of yourself.

Society Benefits

Less people getting fired would lead to a reduction in the unemployment rate.
Fewer bad relationships getting back together would lessen the number of divorces down the line.
A decline in restraining order applications would free up local court resources.
A reduction in the number of emails sent will free up much needed bandwidth for Celebrity Gossip and Miracle Diet advertisements.

My Ideas for Google Labs

Reply to All Confirmation - There's nothing like sending a snide comment to the whole company.
Mail Goggles Browser Plugin for SSL Pages - Prevent yourself from buying John Voigt's car on Ebay .
Sarcasm detection: puts any sarcastic comments that may be interpreted literally in italics.

Convert Your ASP:Button Controls to Sliding Doors Styled Button Elements

Aug

2008

by B-ri

History of the Sliding Doors Method and the HTML Button Element

About a year ago, the button element was rediscovered by Particletree as way to add consistency to your website's buttons. A few months later the filament group took the button element a step farther with sliding doors. We really liked both of these articles and wanted to use them in our latest projects but we ran into a problem with the rendering of the asp:button control.

The Problem with Standard asp:Button and Form Input Controls

A basic asp:button control renders as an input element with type="submit" (<input type="submit" name="btnAddChoice" value="Submit" onclick="__doPostBack('btnAddChoice','');" />). In order to render our asp:Buttons in more flexible, skinnable way with sliding doors,we needed to alter the HTML output of the asp:Button control to render like this: <button type="submit" id="btnAddChoice" onclick="__doPostBack('btnAddChoice','');"><span>Submit</span></button>.

For more info on the benfits of sliding doors and the HTML button, please read the following articles:

The Solution

We decided to write a Control Adapter to change the rendering of the asp:button to render as a button element. A Control Adapter allows you to override the rendering of any ASP.NET server control. The best part about using a control adapter is that it will render every asp:button the way that we tell it to; we don't have to rewrite any of our old asp:buttons. For more info on control adapters check out this post on Scott Gu's blog.

Tools of the Trade: Using EditPlus 2 to Generate Code

Aug

2008

by Jason

(Or insert your favorite Regular Expression enabled text editor here).
This is part one of a multi-part series of tools that we use to get the job done, whatever that job may be.
Oftentimes our work is not always "here's a spec, create it", but at other times that work is "here's an export of our database for you to work with". In an ideal world, we would like to receive this in something that is easily imported into a relational database., but more often than not we just get a straight "dump" (usually multiple CSV files) of the production data. The major challenge that we often face in this scenario is of how to maintain the original data integrity, and how we do it without blowing our budget. That's where using the regex replace functionality that is part of EditPlus comes in very handy.

Here's a sample of what the data dump might look like:

Where ID (the first column) might be the Primary key of the item on their system, and foreign keys always refer to different IDs than what's on your local system. At first this was impossible to do while keeping the data accurate, so I had to ask for the data that the foreign keys referenced. So now we're all set. Read on for the solution