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

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” (). 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: .

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.

First thing that we need to do is create a class that derives from the System.Web.UI.Adapters.ControlAdapter class.   So we’ll create the ButtonAdapter.cs and add it to a folder called ControlAdapters in the App_Code folder of our website.

ButtonAdapter.cs

using System.Web.UI; 				using System.Web.UI.WebControls;  				namespace App_Code.ControlAdapters 				{ 				public class ButtonAdapter : System.Web.UI.Adapters.ControlAdapter 				{ 				// Return a strongly-typed reference 				public new Button Control 				{ 				get 				{ 				return (Button)base.Control; 				} 				}  				protected override void Render(HtmlTextWriter writer) 				{ 				Button button = this.Control;  				writer.WriteBeginTag("button"); //  				writer.WriteFullBeginTag("span"); 				writer.Write(button.Text); 				writer.WriteEndTag("span"); //  				writer.WriteEndTag("button"); //  				} 				} 				}

Notice that the adapter derives from System.Web.UI.Adapters.ControlAdapter and that we are overriding the rendering method. I’ve added comments on most of the lines to give you an idea of what has been rendered at each point. The trickiest part about getting this to work was the Postback event, first we had to get the PostbackOptions for the Button, then we needed to turn on Validation if it was set on the button. Next we used GetPostBackEventReference to retrieve and set the onclick event. We needed to replace double quotes with single quotes on GetPostBackEventReference because it was causing javascript errors. Finally we needed to register the postback event with RegisterForEventValidation so that we wouldnt get those annoying “Invalid Callback Or Postback Argument” errors.  If you have any questions you can always put them in the comments below.

Adapters.Browser

The next task is to create the browser file that tells the adapter to rule all of your buttons.  So we’ll create the Adapers.browser and add it to the App_Browsers folder of our website. You could create different adapters for each browser and set them up here but we just need one adapter for all of our browsers.  Just set the adapter location and the control type that we want to override and we’re almost done.   Here is the code for  Adapters.Browser:

<browsers> 				<browser refID="Default"> 				<controlAdapters> 				<adapter controlType="System.Web.UI.WebControls.Button" adapterType="App_Code.ControlAdapters.ButtonAdapter" /> 				controlAdapters> 				browser> 				browsers>

Now your asp:buttons should be rendering as button elements instead of inputs.  If they aren’t, you did something wrong or maybe I did, leave a comment and we can try to help you out.

<button id="btnSubmit" class="submitBtn" onclick="WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('btnSubmit', '', true, '', '', false, true))" value="submit"> 				<span>Submitspan> 				button>

We still need to set up the CSS to make the sliding doors work but that has already been covered by the folks at filament group. I used the filament group’s css as a starting point so it should be easy to figure out.  Here is the source code in a ASP.NET 3.5 solution.

« Prev Article
Next Article »