Click here to Skip to main content
11,431,829 members (64,239 online)
Click here to Skip to main content

Script Enabled Panel for ASP.NET

, 24 Mar 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple ASP.NET container control to represent content which requires JavaScript.

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:  

<%@ 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 

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

License

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

Share

About the Author

Jani Giannoudis
Software Developer (Senior)
Switzerland Switzerland
Jani is Co-founder of Meerazo.com, a free service which allows to share resources like locations, things, persons and their services in a cooperating group of people.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Akram El Assas22-Mar-12 14:14
memberAkram El Assas22-Mar-12 14:14 
AnswerRe: My vote of 5 Pin
Jani Giannoudis22-Mar-12 23:17
mvpJani Giannoudis22-Mar-12 23:17 
GeneralRe: My vote of 5 Pin
Akram El Assas23-Mar-12 0:09
memberAkram El Assas23-Mar-12 0:09 
AnswerRe: My vote of 5 Pin
Jani Giannoudis24-Mar-12 7:15
mvpJani Giannoudis24-Mar-12 7:15 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 24 Mar 2012
Article Copyright 2012 by Jani Giannoudis
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid