Click here to Skip to main content
15,392,636 members
Articles / Web Development / ASP.NET
Posted 20 Mar 2012


7 bookmarked

Script Enabled Panel for ASP.NET

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
24 Mar 2012CPOL1 min read
A simple ASP.NET container control to represent content which requires JavaScript.


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.


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
  } // enum PanelEnableMode

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

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

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

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

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

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

    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( " = '" + display + "';" );
      case PanelEnableMode.Visibility:
        sb.AppendLine( " = 'visible';" );
    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:  

<%@ 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" "">
<html xmlns="">
<head runat="server">
  <title>Demo ScriptEnabledPanel</title>
  <form id="form1" runat="server">
  <asp:ScriptManager runat="server" />
    Demo ScriptEnabledPanel</h1>
        PanelEnableMode = Display<br />
        <Controls:ScriptEnabledPanel runat="server">
          Scripting is enabled.
        <noscript class="scriptDisabled">
          Scripting is disabled.
        PanelEnableMode = Visibility<br />
        <Controls:ScriptEnabledPanel runat="server" EnableMode="Visibility">
          Scripting is enabled.
        <noscript class="scriptDisabled">
          Scripting is disabled.

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


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


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


About the Author

Comments and Discussions

GeneralMy vote of 5 Pin
Akram El Assas22-Mar-12 13:14
MemberAkram El Assas22-Mar-12 13:14 
AnswerRe: My vote of 5 Pin
Jani Giannoudis22-Mar-12 22:17
MemberJani Giannoudis22-Mar-12 22:17 
GeneralRe: My vote of 5 Pin
Akram El Assas22-Mar-12 23:09
MemberAkram El Assas22-Mar-12 23:09 
AnswerRe: My vote of 5 Pin
Jani Giannoudis24-Mar-12 6:15
MemberJani Giannoudis24-Mar-12 6:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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