HTML Hidden Input Element is typically used to transfer hidden data between the client and server. When writing a JSP or ASP application, you might have added a few hidden inputs to your page to persist the data between page reloads. With the evolution of server side technologies like .NET and JSF, the state of a control in the webpage is typically managed in the server side. It is, however, not efficient and sometimes almost impossible to put all data on the server and go back and forth between client and server for every user interaction. Say, for example, in a GIS web application, it would be impossible to post a request to the server to get the map coordinate every time you move the mouse on the map. Hence an efficient web application requires an optimum usage of client side and server side logic which in turn requires transferring the data back and forth between the server and client to make the two sides in synch with each other. The hidden input element can be handy in transferring such data. A typical example of using hidden input elements in a GIS application is passing the updated map extent (minx, miny, maxx, maxy values) between the server and the client.

In my previous blog, I made use of a hidden input element to persist the web page state maintained in the client side. I helped a user with a similar problem using the hidden input element a while ago. This was in .NET. So I thought it would be nice to take a break from Java and talk about it.

The problem was to enable/disable a tool item in the toolbar of the ArcGIS Server MapViewer template on the client side through Javascript without posting back the form immediately. The toolbar is managed by the .NET ADF on the server side. So if you simply change the property on the client side and do not somehow update the change on the server side, you will lose your change the next time your website is loaded. You can, of course, post back the form everytime you enable/disable a toolitem in the client side to synch the server with the client state. However, this means you need to post the form each time you make this change which is not an ideal solution. What would be an ideal solution is to use javascript to enable/disable the toolbar item and when the next time the form is posted, update the state of the toolbar to synch it with the client state.

As mentioned before, we can make use of hidden input control run at the server side to do this. Lets discuss how we can customize the .NET MapViewer template to achieve this functionality:

1. Add a hidden HTML input element to the Default page of the MapViewer template application. Set it to "Run as server Control". Make sure that this is added within the Form element in the HTML source.


2. Add an HTML Button to the page. We will use this button to test our function. Specify onclick="disableToolItem('ZoomOut');" for this button. This button when clicked calls disableToolItem function on the client side and does not post the form.

3. Now lets take a look at disableToolItem function:

function disableToolItem(toolItem){
 var f = document.forms[0];
 var listValues="";
 var Toolbar1 = Toolbars['Toolbar1'];
 var items1 = Toolbar1.Items;
 disableTool(toolItem, !items1[toolItem].Disabled, true);

 listValues += (items1['ZoomIn'].Disabled) ? "0":"1";
 listValues += (items1['ZoomOut'].Disabled) ? ":0":":1";
 listValues += (items1['Pan'].Disabled) ? ":0":":1";
 listValues += (items1['FullExtent'].Disabled) ? ":0":":1";
 listValues += (items1['ZoomBack'].Disabled) ? ":0":":1";
 listValues += (items1['ZoomNext'].Disabled) ? ":0":":1";
 listValues += (items1['Identify'].Disabled) ? ":0":":1";
 f.elements['activeToolList'].value = listValues;
 toolbarRefreshCommands('Toolbar1');
 //toolbarRefreshGroup('Toolbar1');
 toolbarSelectTool('Toolbar1');
}

Notice that it first toggles the disable property of the given toolItem by calling the custom
function disableTool (see below) and generates a String in
this format: 0:1:1:1:0 where 0 and 1 represent the disabled
and enabled state of the toolitem respectively. It then assigns this value
to the hidden input element and refreshes the toolbar.

4. The disableTool function is given below:

function disableTool(itemName, disable, isTool ){
 var Toolbar1 = Toolbars['Toolbar1'];
 var items1 = Toolbar1.Items;
 items1[itemName].Disabled = disable;
 var cellName = 'Toolbar1' + itemName;
 var thisCellElement =
    document.getElementById(cellName);
 if(disable){
   thisCellElement.onmousedown == null;
   thisCellElement.onmouseover == null;
   thisCellElement.onmouseout == null;
 } else {
   thisCellElement.onmousedown = function () {
     if (isTool)
     ToolbarMouseDown('Toolbar1', itemName, 'Tool');
     else
     ToolbarMouseDown('Toolbar1', itemName, 'Command');
   };

   thisCellElement.onmouseover = function () {
     ToolbarMouseOver('Toolbar1', itemName);
   };

  thisCellElement.onmouseout = function () {
    ToolbarMouseOut('Toolbar1', itemName);
  };

 }
}

This function gets the specified toolbar item and nullifies the
mouse events if disabling. It will activate the mouse events
for toolbar item if enabling.

5. Add the above functions to toolbar_functions.js file in C:\Inetpub\wwwroot\aspnet_client\esri_arcgis_server_webcontrols\9_1\JavaScript folder. (Be sure to keep a back up copy of the original file before you make any change to it.)

6. We need to modify the existing functions as follows:
a) Find ToolbarMouseDown function in toolbar_functions.js file . Inside this function find
this line:

var toolbar = Toolbars[toolbarName];

Add this line after the above line:

if(toolbar.Items[toolbarItemName].Disabled) return;

b) Inside ToolbarMouseOver function, find this line:

var toolbar = Toolbars[toolbarName];

Add this line after the above line:

if(toolbar.Items[toolbarItemName].Disabled) return;

c) Inside ToolbarMouseOut function, find this line:

var toolbar = Toolbars[toolbarName];

Add this line after the above line:

if(toolbar.Items[toolbarItemName].Disabled) return;

7. Finally, we need to update the server state when the page is posted back. Modify the Page_Load method of Default page as shown below:

private void Page_Load(object sender, System.EventArgs e)
 {
   // Check parameters of MapControl
   // If there is no Host or ServerObject defined,
  // then there is no point to continuing since there will be no map to display
  if ( (Map1.Host == null)  (Map1.Host == String.Empty) )
  {
   callErrorPage("Host property not defined for the Map control.", null);
  }
  if ( (Map1.ServerObject == null)
          (Map1.ServerObject == String.Empty)
          (Map1.ServerObject == "(none)") )
  {
   callErrorPage("ServerObject property not defined for the Map control.", null);
  }
  if (!Map1.AutoFirstDraw)
  {
   callErrorPage("The property AutoFirstDraw of
          the Map WebControl must be set to true
           for this application to run.", null);
  }
  // check if the server object can be accessed
 ESRI.ArcGIS.Server.WebControls.ServerConnection connection =
            Map1.ServerConnection;
 if ( connection == null )
   callErrorPage("Invalid ServerConnection.", null);


  // check if the server object is pooled
  isPooled = connection.IsServerObjectPooled(Map1.ServerObject,"MapServer");

  string activeTools="";
  // Is this a PostBack or just started
  if ( !Page.IsPostBack )
  {
   // Is this a new session?
   if ( Session.IsNewSession )
   {
    // Save extent history to Session
    m_extenthistory = new ArrayList();
    m_extenthistory.Add(Map1.Extent);
    Session.Add("extenthistory", m_extenthistory);
    Session.Add("index",0);
    m_lastextent = Map1.Extent;

   //if new session, generate the string to store
   //the enable/disable status of toomitems
   //the value will be stored in 1:0:0:1:1 format
   //where 1=enable, 0=disable

   int toolLength = Toolbar1.ToolbarItems.Count;
   for (int i=0;i<toolLength;i++)
   {
    string disableOrNot = "1";
    Tool tool = Toolbar1.ToolbarItems[i] as Tool;
    if(tool!=null)
    {
     if(tool.Disabled) disableOrNot = "0";
     if(i==0) activeTools = disableOrNot;
     else activeTools = activeTools + ":" + disableOrNot;
    } else {
     Command command1 = Toolbar1.ToolbarItems[i] as Command;
     if(command1.Disabled) disableOrNot = "0";
     if(i==0) activeTools = disableOrNot;
     else activeTools = activeTools + ":" + disableOrNot;
    }
     //set the value to the hidden input control
    activeToolList.Value = activeTools;
   }
  }
 } else {
   //if not a new session
   //get the values from the input control
   //and update the toolitem property

   activeTools = activeToolList.Value;
   if((activeTools != "") && (activeTools != null))
   {
    char[] sep = {':'};
    Array aa = activeTools.Split(sep);
    for(int i = 0;i<aa.Length;i++)
    {
     Tool tool = Toolbar1.ToolbarItems[i] as Tool;
     if(tool != null)
     {
      if (aa.GetValue(i).ToString()=="0") tool.Disabled = true;
      else tool.Disabled=false;
     }  else {
 Command command1 = Toolbar1.ToolbarItems[i] as Command;
 if (aa.GetValue(i).ToString()=="0") command1.Disabled = true;
 else command1.Disabled=false;
     }
   }
  }
  // make sure that the session is still going, if not, display error page
  if (Session["extenthistory"]==null)
   callErrorPage("Your session has timed out.", null);
 }

  sessionId = Session.SessionID;
  string scriptString = "\n<script language=javascript>sessionId = '"
       + sessionId + "'; </script>\n";
  Page.RegisterStartupScript("SessionIdScript", scriptString);
  // get name of session object holding map description
  string pagePath = Page.Request.FilePath;
  string pageName = "";
  int lastSlash = pagePath.LastIndexOf("/");
  if (lastSlash>-1) pageName = pagePath.Substring(lastSlash+1);
  m_MapDescriptSessName = pageName + Map1.ID + "_md";
}

Notice above that when the new session is started, we get the toolitem property and
generate the string to assign it to hidden input control. If this is not a new session but a postback request, we parse the value of hidden input control and update the property of the toolitem appropriately. This makes the state of the server toolbar in synch with that on the client side.