Asp.net PopupControlExtender inside UpdatePabel
- by user296422
Hi,
So i use PopupControlExtender (to edit some of the fields) inside ListViewControl which itself is embeded inside an UpdatePanel.
The problem is as follows whenever you cause partail postback the popup panels are created client side outside the updatepanel. And you get more clientside controls with the same clientside ID. When you postback with popup panel the server side control eg. Texbox has Text = clientsidecontrol1.text, clientsidecontrol2.text, clientsidecontrol.text3
Is there a way to prevent this.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Secure_Test" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="InputLabel" runat="server" Text="Whatever you put in the textbox"></asp:Label>
<br />
<asp:Label runat="server"> <%= DateTime.Now.ToString() %></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Refresh" />
<br />
<asp:LinkButton ID="PopupLB" runat="server">Popup</asp:LinkButton>
<br />
<cc1:PopupControlExtender ID="PopupControlExtender1" runat="server" PopupControlID="Panel1" TargetControlID="PopupLB" CommitProperty="Value">
</cc1:PopupControlExtender>
<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:TextBox ID="InputTB" runat="server"></asp:TextBox>
<asp:Button ID="SubmitBTN" runat="server" Text="Submit"
onclick="SubmitBTN_Click" UseSubmitBehavior="false" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
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;
}
}
To make it easier to test i post the code of an example page i used for testing.
To make myself clear here is an example:
i click Popup. Type "asdf" in the textbox and click Submit.
InputPanel dispalys "asdf"
i click Popup again. Type "qwerty" in the textbox and click Submit.
InputPanel now displays "qwerty,asdf"
When you check it the firebug you get this:
<form id="form1" action="Test.aspx" method="post" name="form1">
<div>
<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">
</div>
<script type="text/javascript">
//<![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();
}
}
//]]>
</script>
<script type="text/javascript" src="/WebResource.axd?d=B2RAZw_YugtketKJqWIbXA2&t=634051184591131846"></script>
<script type="text/javascript" src="/ScriptResource.axd?d=zifZiisoqXYJSwLXuAZ4DmtrWVvn9x0W1r7qfDo40UU7q9QYoa5ChdBZD6dDL66f0flKVDmPL2woIPesut_FUpsFZUN2A5sDN7IOqPUOZO41&t=1a45d080"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Ladowanie struktury strony klienta ASP.NET Ajax nie powiodlo sie.');
//]]>
</script>
<script type="text/javascript" src="/ScriptResource.axd?d=zifZiisoqXYJSwLXuAZ4DmtrWVvn9x0W1r7qfDo40UU7q9QYoa5ChdBZD6dDL66fyxEJaYB3uJEQ0r_TmOPczeBZ1gpFH5a6x4ug130lptsKAcGA3S1vt08sHQo5sFtH0&t=1a45d080"></script>
<script type="text/javascript" src="/Secure/Test.aspx?_TSM_HiddenField_=ToolkitScriptManager1_HiddenField&_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"></script>
<div>
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ToolkitScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1','tUpdatePanel2'], [], [], 90);
//]]>
</script>
<div>
<div id="UpdatePanel1">
<span id="InputLabel">qwerty,asdf</span>
<br>
<span>2010-06-15 18:26:50</span>
<br>
<input type="submit" id="Button1" value="Refresh" name="Button1">
<br>
<a href="javascript:__doPostBack('PopupLB','')" id="PopupLB">Popup</a>
<br>
</div>
</div>
<script type="text/javascript">
//<![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"));
});
//]]>
</script>
<div id="Panel1" style="position: absolute; left: 8px; top: 73px; z-index: 1000; display: none; visibility: hidden;">
<div id="UpdatePanel2">
<input type="text" id="InputTB" name="InputTB">
<input type="button" id="SubmitBTN" onclick="javascript:__doPostBack('SubmitBTN','')" value="Submit" name="SubmitBTN">
</div>
</div><span style="display: none ! important;"><input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value=""></span><span style="display: none ! important;"><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value=""></span><span style="display: none ! important;"><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTkwNzc2NzAzD2QWAgIDD2QWAgIDD2QWAmYPZBYCAgEPDxYCHgRUZXh0BQtxd2VydHksYXNkZmRkZApLPc2nZUC+UkZsCrByuofHMah5"></span><span style="display: none ! important;"><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQLi2qWdAwKM54rGBgKIkJujDQKbjp+pDQKc7v+tArliNtJzeG8HrfsGBBXIViJAUGMz"></span><div id="Panel1" style="visibility: hidden; position: absolute; left: 8px; top: 73px; z-index: 1000; display: none;">
<div id="UpdatePanel2">
<input type="text" id="InputTB" value="asdf" name="InputTB">
<input type="button" id="SubmitBTN" onclick="javascript:__doPostBack('SubmitBTN','')" value="Submit" name="SubmitBTN">
</div>
</div><div id="Panel1" style="display: none; visibility: hidden; position: absolute;">
<div id="UpdatePanel2">
<input type="text" id="InputTB" value="qwerty,asdf" name="InputTB">
<input type="button" id="SubmitBTN" onclick="javascript:__doPostBack('SubmitBTN','')" value="Submit" name="SubmitBTN">
</div>
</div></form>
InputTB and Panel1 where generated 3 time.
