Script Enabled Panel for ASP.NET

Jani Giannoudis

Rate me:

5.00/5 (1 vote)

24 Mar 2012CPOL1 min read

22.7K

122

A simple ASP.NET container control to represent content which requires JavaScript.

Download source - 15.4 KB

Introduction

HTML provides the noscript tag to handle an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripting. However, there is no opposite tag available, which enables content that requires JavaScript. The server side control ScriptEnabledPanel represents a container which only is visible, if client-side scripting is supported.

Background

The control ScriptEnabledPanel is inherited from the ASP.NET control Panel which initially is hidden. During the page load sequence it invokes a client-side script to show the panel with its content. In case JavaScript is missing, the panel remains hidden.

// ------------------------------------------------------------------------
public class ScriptEnabledPanel : Panel
{

  // ----------------------------------------------------------------------
  public enum PanelEnableMode
  {
    Display,
    Visibility,
  } // enum PanelEnableMode

  // ----------------------------------------------------------------------
  public PanelEnableMode EnableMode { get; set; }

  // ----------------------------------------------------------------------
  public string DisplayAs { get; set; }

  // ----------------------------------------------------------------------
  protected override void OnInit( EventArgs e )
  {
    base.OnInit( e );
    InitPanel();
  } // OnInit

  // ----------------------------------------------------------------------
  protected override void OnPreRender( EventArgs e )
  {
    base.OnPreRender( e );
    RegisterScript();
  } // OnPreRender

  // ----------------------------------------------------------------------
  private void InitPanel()
  {
    if ( !Page.IsPostBack )
    {
      switch ( EnableMode )
      {
        case PanelEnableMode.Display:
          Style[ "display" ] = "none";
          break;
        case PanelEnableMode.Visibility:
          Style[ "visibility" ] = "hidden";
          break;
      }
    }
  } // InitPanel

  // ----------------------------------------------------------------------
  private void RegisterScript()
  {
    string clientID = ClientID;
    if ( Page.ClientScript.IsStartupScriptRegistered( clientID ) )
    {
      return;
    }

    StringBuilder sb = new StringBuilder();
    sb.AppendLine( "Sys.Application.add_load( function() {" );
    sb.AppendLine( "   var target = document.getElementById('" + clientID + "' )" );
    sb.AppendLine( "   if (target) {" );
    switch ( EnableMode )
    {
      case PanelEnableMode.Display:
        string display = DisplayAs;
        if ( string.IsNullOrEmpty( display ) )
        {
          display = "inline";
        }
        sb.AppendLine( "     target.style.display = '" + display + "';" );
        break;
      case PanelEnableMode.Visibility:
        sb.AppendLine( "     target.style.visibility = 'visible';" );
        break;
    }
    sb.AppendLine( "   }" );
    sb.AppendLine( "} );" );

    Page.ClientScript.RegisterStartupScript( GetType(), clientID, sb.ToString(), true );
  } // RegisterScript

} // class ScriptEnabledPanel

By default, the script enabled panel will be displayed as inline element. Using the DisplayAs property, you can customize the panel CSS display mode.

Using the code

The following example indicates whether client-side scripting is supported:

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="Controls" Namespace="Itenso.Community.ScriptPanel.Controls" Assembly="Itenso.Community.ScriptPanel.Controls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Demo ScriptEnabledPanel</title>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ScriptManager runat="server" />
  <h1>
    Demo ScriptEnabledPanel</h1>
  <table>
    <tr>
      <td>
        PanelEnableMode = Display<br />
        <Controls:ScriptEnabledPanel runat="server">
          Scripting is enabled.
        </Controls:ScriptEnabledPanel>
        <noscript class="scriptDisabled">
          Scripting is disabled.
        </noscript>
      </td>
      <td>
        PanelEnableMode = Visibility<br />
        <Controls:ScriptEnabledPanel runat="server" EnableMode="Visibility">
          Scripting is enabled.
        </Controls:ScriptEnabledPanel>
        <noscript class="scriptDisabled">
          Scripting is disabled.
        </noscript>
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

Using a browser developer tool, you should test how the page interacts in case client-side scripting is supported or not.

Points of Interest

The content of ScriptEnabledPanel will always be transferred to the client browser, regardless of the client-side scripting availability
ScriptEnabledPanel can hold the same content as the ASP.NET Panel
In case of inline styling, the ScriptEnabledPanel should be initially hidden: style="display: none;..."
The property EnableMode is controling the layout behaviour in case of missing client-side scripting:
- PanelEnableMode.Display: remove the panel from the document layout (default)
- PanelEnableMode.Visibility: retain empty area within the document layout

History

24^th March 2012: Added PanelEnableMode (thanks Akram)
22^nd March 2012: New title
20^th March 2012: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Jani Giannoudis

Software Developer (Senior)

Switzerland

👨 Senior .NET Software Engineer

🚀 My Open Source Projects
- Time Period Library 👉 GitHub
- Payroll Engine 👉 GitHub

Feedback and contributions are welcome.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.