title: How do I disable or remove unnecessary form elements before an ASP.NET asynchronous postback?
body: <p>I'm building a shopping cart page that could potentially contain dozens of separate items. Each item has a collapsible panel that contains several form elements that can be used to customize it. Most of the cart is wrapped in an UpdatePanel so that I can avoid a full postback when the user makes changes. When there are many items in the cart, there are of course many many postback elements, all of which are included in the raw form post, even though each post is really only triggered by the change of a single element (ChildrenAsTriggers=True).</p>
  
  <p>I find that the uncompressed size of the redundant form name/value pairs is 25K. The size is probably far smaller in practice due to gzip compression in the browser (I assume browsers routinely compress the postback values, but haven't gone to the trouble to verify this -- anyone know for sure?) I know I'm being a little anal here ("profile before you optimize!") but I would really like to find a way to eliminate this redundant data.  I came up with the following JavaScript:</p>
  
  <pre><code>Sys.WebForms.PageRequestManager.getInstance().add_beginRequest
  (
    function(sender, args) {
  
      var elPostBackTrigger = args.get_postBackElement();
  
        // skip the first input element, which is expected to be the ScriptManager's hidden field
        removeNonEssentialPostBackValues(document.aspnetForm.getElementsByTagName("input"), elPostBackTrigger, 1);
        removeNonEssentialPostBackValues(document.aspnetForm.getElementsByTagName("select"), elPostBackTrigger);
        removeNonEssentialPostBackValues(document.aspnetForm.getElementsByTagName("textarea"), elPostBackTrigger);
     }
  );
  
  function removeNonEssentialPostBackValues(aElements, elPostBackTrigger, iFirstElement) {
  
      if (iFirstElement == undefined)
          iFirstElement = 0;
  
      for (var i = iFirstElement; i &lt; aElements.length; ++i) {
          if
          (
              aElements[i] != elPostBackTrigger
              &amp;&amp; aElements[i].name
              &amp;&amp; aElements[i].name != ''
              &amp;&amp; aElements[i].name.indexOf('_') != 0
          ) {
              aElements[i].removeAttribute('name');
              aElements[i].disabled = true;
          }
      }
  }
  </code></pre>
  
  <p>The idea is that if you remove the "name" attribute of a form element, it should no longer be "successful" as per the HTML spec, and ASP.NET should omit it from the postback. Of course you don't want to mess with __VIEWSTATE, __EVENTTARGET, or really anything that begins with an underscore. And you don't want to remove the postback trigger itself.</p>
  
  <p>Unfortunately, this has no effect on the postback values captured through Firebug. It seems that by the time the PageRequestManager fires the beginRequest event, it has already generated the postback name/value pairs. I find this strange, since I would imagine that the main reason for the beginRequest event is to make small changes to the form elements before postback. Maybe PageRequestManager doesn't actually generate the name/value pairs, but rather just pre-generates a list of which elements will be included? Debugging into the MS JavaScript libraries is hard slogging, and I was wondering if anyone could enlighten me here.</p>
  
  <p><b>EDIT 1:</b> I also tried disabling the form elements in addition to removing their name attributes, but it didn't help. I verified through Firebug that the elements are disabled and names removed before the beginRequest event completes, but somehow ASP.NET still adds them all to the postback.</p>
  
  <p>Jordan Rieger</p>