title: Asp.net PopupControlExtender inside UpdatePanel
body: <p>So I use <code>PopupControlExtender</code> (to edit some of the fields) inside <code>ListViewControl</code> which itself is embedded inside an <code>UpdatePanel</code>. </p>
  
  <p>The problem is as follows whenever you cause <code>partail</code> <code>postback</code> the popup panels are created client side outside the <code>updatepanel</code>. And you get more clientside controls with the same clientside ID. When you postback with popup panel the server side control eg. Texbox has <code>Text</code> = <code>clientsidecontrol1.text</code>, <code>clientsidecontrol2.text</code>, <code>clientsidecontrol.text3</code></p>
  
  <p>Is there a way to prevent this.</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Secure_Test" %&gt;
  
  &lt;%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"&gt;
      &lt;/cc1:ToolkitScriptManager&gt;
      &lt;div&gt;
  
          &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
          &lt;ContentTemplate&gt;
              &lt;asp:Label ID="InputLabel" runat="server" Text="Whatever you put in the textbox"&gt;&lt;/asp:Label&gt;
              &lt;br /&gt;
              &lt;asp:Label runat="server"&gt; &lt;%= DateTime.Now.ToString() %&gt;&lt;/asp:Label&gt;
              &lt;br /&gt;
              &lt;asp:Button ID="Button1" runat="server" Text="Refresh" /&gt;
              &lt;br /&gt;
              &lt;asp:LinkButton ID="PopupLB" runat="server"&gt;Popup&lt;/asp:LinkButton&gt;
              &lt;br /&gt;
  
              &lt;cc1:PopupControlExtender ID="PopupControlExtender1" runat="server" PopupControlID="Panel1" TargetControlID="PopupLB" CommitProperty="Value"&gt;
              &lt;/cc1:PopupControlExtender&gt;
  
              &lt;asp:Panel ID="Panel1" runat="server"&gt;
                  &lt;asp:UpdatePanel ID="UpdatePanel2" runat="server"&gt;
                      &lt;ContentTemplate&gt;
                          &lt;asp:TextBox ID="InputTB" runat="server"&gt;&lt;/asp:TextBox&gt;
                          &lt;asp:Button ID="SubmitBTN" runat="server" Text="Submit" 
                              onclick="SubmitBTN_Click" UseSubmitBehavior="false" /&gt;
                       &lt;/ContentTemplate&gt;
                  &lt;/asp:UpdatePanel&gt;
              &lt;/asp:Panel&gt;
  
          &lt;/ContentTemplate&gt;
          &lt;/asp:UpdatePanel&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using AjaxControlToolkit;
  
  public partial class Secure_Test : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {
  
      }
      protected void SubmitBTN_Click(object sender, EventArgs e)
      {
          PopupControlExtender pce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page);
          pce.Commit("Popup");
          InputLabel.Text = InputTB.Text;
      }
  }
  </code></pre>
  
  <p>To make it easier to test i post the code of an example page I used for testing. </p>
  
  <p>To make myself clear here is an example:</p>
  
  <p>I click <code>Popup</code>. Type "asdf" in the textbox and click Submit.</p>
  
  <p><code>InputPanel</code> displays "asdf"</p>
  
  <p>I click <code>Popup</code> again. Type "qwerty" in the textbox and click Submit.</p>
  
  <p>InputPanel now displays "qwerty,asdf"</p>
  
  <p>When you check it the firebug you get this:</p>
  
  <pre><code>&lt;form id="form1" action="Test.aspx" method="post" name="form1"&gt;
  &lt;div&gt;
  &lt;input type="hidden" value=";;AjaxControlToolkit, Version=3.0.30930.21526, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e:pl-PL:c83bc095-c5d9-40da-b175-dc46338fcc3a:865923e8:91bd373d:596d588c:411fea1c:e7c87f07:bbfda34c:30a78ec5:42b7c466;" id="ToolkitScriptManager1_HiddenField" name="ToolkitScriptManager1_HiddenField"&gt;
  
  
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  //&amp;lt;![CDATA[
  var theForm = document.forms['form1'];
  if (!theForm) {
      theForm = document.form1;
  }
  function __doPostBack(eventTarget, eventArgument) {
      if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
          theForm.__EVENTTARGET.value = eventTarget;
          theForm.__EVENTARGUMENT.value = eventArgument;
          theForm.submit();
      }
  }
  //]]&amp;gt;
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript" src="/WebResource.axd?d=B2RAZw_YugtketKJqWIbXA2&amp;amp;t=634051184591131846"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript" src="/ScriptResource.axd?d=zifZiisoqXYJSwLXuAZ4DmtrWVvn9x0W1r7qfDo40UU7q9QYoa5ChdBZD6dDL66f0flKVDmPL2woIPesut_FUpsFZUN2A5sDN7IOqPUOZO41&amp;amp;t=1a45d080"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  //&amp;lt;![CDATA[
  if (typeof(Sys) === 'undefined') throw new Error('Ładowanie struktury strony klienta ASP.NET Ajax nie powiodło się.');
  //]]&amp;gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript" src="/ScriptResource.axd?d=zifZiisoqXYJSwLXuAZ4DmtrWVvn9x0W1r7qfDo40UU7q9QYoa5ChdBZD6dDL66fyxEJaYB3uJEQ0r_TmOPczeBZ1gpFH5a6x4ug130lptsKAcGA3S1vt08sHQo5sFtH0&amp;amp;t=1a45d080"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Secure/Test.aspx?_TSM_HiddenField_=ToolkitScriptManager1_HiddenField&amp;amp;_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d3.0.30930.21526%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3apl-PL%3ac83bc095-c5d9-40da-b175-dc46338fcc3a%3a865923e8%3a91bd373d%3a596d588c%3a411fea1c%3ae7c87f07%3abbfda34c%3a30a78ec5%3a42b7c466"&gt;&lt;/script&gt;
  &lt;div&gt;
  
  
  &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  //&amp;lt;![CDATA[
  Sys.WebForms.PageRequestManager._initialize('ToolkitScriptManager1', document.getElementById('form1'));
  Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1','tUpdatePanel2'], [], [], 90);
  //]]&amp;gt;
  &lt;/script&gt;
  
      &lt;div&gt;
  
          &lt;div id="UpdatePanel1"&gt;
              &lt;span id="InputLabel"&gt;qwerty,asdf&lt;/span&gt;
              &lt;br&gt;
              &lt;span&gt;2010-06-15 18:26:50&lt;/span&gt;
              &lt;br&gt;
              &lt;input type="submit" id="Button1" value="Refresh" name="Button1"&gt;
              &lt;br&gt;
              &lt;a href="javascript:__doPostBack('PopupLB','')" id="PopupLB"&gt;Popup&lt;/a&gt;
              &lt;br&gt;
  
  
  
  
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  //&amp;lt;![CDATA[
  (function() {var fn = function() {$get('ToolkitScriptManager1_HiddenField').value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();Sys.Application.initialize();
  Sys.Application.add_init(function() {
      $create(AjaxControlToolkit.PopupControlBehavior, {"CommitProperty":"Value","PopupControlID":"Panel1","dynamicServicePath":"/Secure/Test.aspx","id":"PopupControlExtender1"}, null, null, $get("PopupLB"));
  });
  //]]&amp;gt;
  &lt;/script&gt;
  &lt;div id="Panel1" style="position: absolute; left: 8px; top: 73px; z-index: 1000; display: none; visibility: hidden;"&gt;
  
                  &lt;div id="UpdatePanel2"&gt;
  
                          &lt;input type="text" id="InputTB" name="InputTB"&gt;
                          &lt;input type="button" id="SubmitBTN" onclick="javascript:__doPostBack('SubmitBTN','')" value="Submit" name="SubmitBTN"&gt;
  
    &lt;/div&gt;
  
   &lt;/div&gt;&lt;span style="display: none ! important;"&gt;&lt;input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value=""&gt;&lt;/span&gt;&lt;span style="display: none ! important;"&gt;&lt;input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value=""&gt;&lt;/span&gt;&lt;span style="display: none ! important;"&gt;&lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTkwNzc2NzAzD2QWAgIDD2QWAgIDD2QWAmYPZBYCAgEPDxYCHgRUZXh0BQtxd2VydHksYXNkZmRkZApLPc2nZUC+UkZsCrByuofHMah5"&gt;&lt;/span&gt;&lt;span style="display: none ! important;"&gt;&lt;input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLi2qWdAwKM54rGBgKIkJujDQKbjp+pDQKc7v+tArliNtJzeG8HrfsGBBXIViJAUGMz"&gt;&lt;/span&gt;&lt;div id="Panel1" style="visibility: hidden; position: absolute; left: 8px; top: 73px; z-index: 1000; display: none;"&gt;
  
                  &lt;div id="UpdatePanel2"&gt;
  
                          &lt;input type="text" id="InputTB" value="asdf" name="InputTB"&gt;
                          &lt;input type="button" id="SubmitBTN" onclick="javascript:__doPostBack('SubmitBTN','')" value="Submit" name="SubmitBTN"&gt;
  
   &lt;/div&gt;
  
  &lt;/div&gt;&lt;div id="Panel1" style="display: none; visibility: hidden; position: absolute;"&gt;
  
                  &lt;div id="UpdatePanel2"&gt;
  
                          &lt;input type="text" id="InputTB" value="qwerty,asdf" name="InputTB"&gt;
                          &lt;input type="button" id="SubmitBTN" onclick="javascript:__doPostBack('SubmitBTN','')" value="Submit" name="SubmitBTN"&gt;
  
   &lt;/div&gt;
  
  &lt;/div&gt;&lt;/form&gt;
  </code></pre>
  
  <p><code>InputTB</code> and <code>Panel1</code> where generated 3 time.</p>