HiddenField EventHandler ValueChanged not fired when changed via Javascript

Question

I have a HiddenField control that is created within my ASP.NET server control. I added a new EventHandler for the ValueChanged event.

Will this event be fired when the value of my HiddenField changes from within a javascript function?

The main problem I am having is trying to retrieve the value of my HiddenField server-side when the value has changed or at least before postback. I have a server control within a page where that page contains a button that causes a postback and I initially attempted using SaveControlState/LoadControlState but for some reason SaveControlState is never called before the postback occurs. I need to be able to either capture the value from within the ValueChanged event or before postback.

Here's the code:

public class ObjectTree : WebControl {
private CA.TreeView _treeView;
private HiddenField fldCheckedNodes = new HiddenField();
public CA.TreeView TreeView {
 get { return _treeView; }
 set { _treeView = value; }
}
public ObjectTree() {
 _treeView = new CA.TreeView();
 _treeView.ID = "objectTree";
 fldCheckedNodes.ID = "fldCheckedNodes";
}
protected void fldCheckedNodes_ValueChanged(Object sender, EventArgs e) {
 string test = fldCheckedNodes.Value;
}
protected override void  OnPreRender(EventArgs e) {
 TreeView.ClientSideOnNodeCheckChanged = TreeView.ClientID + "NodeChecked";
 fldCheckedNodes.ValueChanged += new EventHandler(fldCheckedNodes_ValueChanged);
 if (!Page.ClientScript.IsClientScriptBlockRegistered("jscript")) {
  StringBuilder jscript = new StringBuilder();
  jscript.AppendLine(" function " + TreeView.ClientID + "UpdateCheckedNodes() {");  
  jscript.AppendLine(" var x = 0;");
  jscript.AppendLine(" var nodeArray = " + TreeView.ClientID + ".get_nodes().get_nodeArray();");
  jscript.AppendLine(" var nodeLength = nodeArray.length;");
  jscript.AppendLine(" document.getElementById('" + fldCheckedNodes.ClientID + "').value = \"\";");     
  jscript.AppendLine(" for (x=0; x < nodeLength; x++) {");
  jscript.AppendLine("  examineNode(nodeArray[x]);");
  jscript.AppendLine(" }");
  jscript.AppendLine(" var result = document.getElementById('" + fldCheckedNodes.ClientID + "').value;");
  jscript.AppendLine(" return true;");
  jscript.AppendLine(" }");
  jscript.AppendLine(" function examineNode(node) {");
  jscript.AppendLine(" var y = 0;");
  jscript.AppendLine(" var childNodes = node.get_nodes().get_nodeArray();");
  jscript.AppendLine(" var childNodeLength = childNodes.length;");   
  jscript.AppendLine(" if (node.get_checked()) {");
  jscript.AppendLine("  if (document.getElementById('" + fldCheckedNodes.ClientID + "').value.length > 0) {");
  jscript.AppendLine("   document.getElementById('" + fldCheckedNodes.ClientID + "').value += \",\"; ");
  jscript.AppendLine("   document.getElementById('" + fldCheckedNodes.ClientID + "').value += node.get_id();");   
  jscript.AppendLine("  } else {");
  jscript.AppendLine("   document.getElementById('" + fldCheckedNodes.ClientID + "').value += node.get_id();");  
  jscript.AppendLine("  }");
  jscript.AppendLine(" }");    
  jscript.AppendLine(" if (childNodeLength >= 1) {");
  jscript.AppendLine("  for (y=0; y < childNodeLength; y++) {");
  jscript.AppendLine("   examineNode(childNodes[y]);");
  jscript.AppendLine("  }");  
  jscript.AppendLine(" } ");   
  jscript.AppendLine(" }");
  jscript.AppendLine("</script>");
  Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "jscript", jscript.ToString());
 }
 base.OnPreRender(e);
}
protected override void CreateChildControls() {
  Controls.Add(TreeView);
  Controls.Add(fldCheckedNodes);
}
protected override void RenderContents(HtmlTextWriter output) {
 TreeView.RenderControl(output);
 fldCheckedNodes.RenderControl(output);
  }

}

Answer 1

Your server-side code only fires during a call to the page that is rendering the control--either during initial load or during a PostBack.

If you need the value from the hidden field PRIOR to PostBack, then you need to do your work in client-side JavaScript. For example, you can create a function in JavaScript called "function checkedNodesChanged" and do work in there by registering and event listener in JavaScript. The output would need to look like:

<input type="hidden" id="fldCheckedNodes" onchange="checkedNodesChanged();" />

There is probably a way to add this in your code-behind for the control. Something like:

fldCheckedNodes.Attributes.Add("onchange", "checkedNodesChanged();");

You would have to create the meaningful guts of checkedNodesChanged.
The server-side ValueChanged event only fires during the Page lifecycle on the server during a PostBack and it detects that the value is different than the original value from the original page load or from the last value stored in ViewState when it was Posted Back the last time.

Perhaps this UpdateCheckedNodes is the "checkedNodesChanged()" function I'm referring to? In that case, just call that instead of what I have.