LinkButton, Disabled JavaScript and the LinkButtonAdapter

March 12, 2008 23:21 by author

ASP.NET generally plays well with JavaScript disabled - i.e. fancy functionality is just lost but your site will continue to work okay. Even controls contained within an <asp:UpdatePanel/> function as normal. We could even go as far to say that ASP.NET and the AJAX framework degrades gracefully. This is all good when trying to build an accessible application but there is one control that tends to get in the way - System.Web.UI.WebControls.LinkButton.

The problem with LinkButton is that it always renders with an href attribute prefixed with 'javascript:'. With JavaScript disabled LinkButtons simply wont function. This means any pagination control will likely stop working (e.g <asp:GridView/> paging) as well as the default <asp:Wizard/> sidebar template and many more controls.

The LinkButtonAdapter fixes this problem by providing a means to use the LinkButton with JavaScript turned off. Instead of rendering an <a/> element a <button> element is rendered instead. This provides the functionality we need to use the LinkButton without script. Second, the <a/> element replaces the <button> element dynamically using JavaScript to ensure that it only exists when script is enabled.

   1: <button id="LinkButton1" type="submit" name="LinkButton1" value="">Button1</button>

<script type="text/javascript">

//<![CDATA[

new furiousAngel.ui.adapters.linkButtonAdapter('LinkButton1', 'Button1', 'javascript:__doPostBack(\'LinkButton1\',\'\')').initialise();

//]]>

</script>

You might be wondering why I'm not just rendering a <button> element instead of <a> all the time regardless of whether script is enabled. I think it's just a personal preference. <a> Elements are easier to work with from CSS as they don't have all the default styles applied like <button/>s. The links can be styled as needed and I wouldn't generally apply any styling to the button 'coz it's only going to be seen by a handful of people - but your site is still functional.

As you can see this functionality doesn't come cheap. There's an external JavaScript file (~1kb) and a line of JavaScript per LinkButton. It's a small price to pay really.

Once the adapter has been registered (by adding a *.browser file to App_Browsers with the contents below) all LinkButton controls will render using this enhanced method including all those embedded in composite controls like GridView and Wizard (plus many more that I can't think of right now).

<browsers>

  <browser refID="Default">

    <controlAdapters>

      <adapter controlType="System.Web.UI.WebControls.LinkButton" adapterType="FuriousAngel.UI.Adapters.LinkButtonAdapter" />

    </controlAdapters>

  </browser>

</browsers>