UpdatePanel 中的 Asp.net PopupControlExtender

Question

So I use PopupControlExtender (to edit some of the fields) inside ListViewControl which itself is embedded inside an UpdatePanel .所以我在ListViewControl使用PopupControlExtender （来编辑一些字段），它本身嵌入在UpdatePanel 。

The problem is as follows whenever you cause partail postback the popup panels are created client side outside the updatepanel .问题如下，每当您导致partail postback ，弹出面板都是在updatepanel之外的客户端创建的。 And you get more clientside controls with the same clientside ID.并且您可以使用相同的客户端 ID 获得更多的客户端控件。 When you postback with popup panel the server side control eg.当您使用弹出面板回发时，服务器端控件例如。 Texbox has Text = clientsidecontrol1.text , clientsidecontrol2.text , clientsidecontrol.text3 Texbox 有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 .我点击Popup 。 Type "asdf" in the textbox and click Submit.在文本框中键入“asdf”，然后单击提交。

InputPanel displays "asdf" InputPanel显示“asdf”

I click Popup again.我再次单击Popup 。 Type "qwerty" in the textbox and click Submit.在文本框中键入“qwerty”，然后单击提交。

InputPanel now displays "qwerty,asdf" InputPanel 现在显示“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">
//&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();
    }
}
//]]&gt;
</script>


<script type="text/javascript" src="/WebResource.axd?d=B2RAZw_YugtketKJqWIbXA2&amp;t=634051184591131846"></script>


<script type="text/javascript" src="/ScriptResource.axd?d=zifZiisoqXYJSwLXuAZ4DmtrWVvn9x0W1r7qfDo40UU7q9QYoa5ChdBZD6dDL66f0flKVDmPL2woIPesut_FUpsFZUN2A5sDN7IOqPUOZO41&amp;t=1a45d080"></script>
<script type="text/javascript">
//&lt;![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Ładowanie struktury strony klienta ASP.NET Ajax nie powiodło się.');
//]]&gt;
</script>

<script type="text/javascript" src="/ScriptResource.axd?d=zifZiisoqXYJSwLXuAZ4DmtrWVvn9x0W1r7qfDo40UU7q9QYoa5ChdBZD6dDL66fyxEJaYB3uJEQ0r_TmOPczeBZ1gpFH5a6x4ug130lptsKAcGA3S1vt08sHQo5sFtH0&amp;t=1a45d080"></script>
<script type="text/javascript" src="/Secure/Test.aspx?_TSM_HiddenField_=ToolkitScriptManager1_HiddenField&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"></script>
<div>


</div>
    <script type="text/javascript">
//&lt;![CDATA[
Sys.WebForms.PageRequestManager._initialize('ToolkitScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1','tUpdatePanel2'], [], [], 90);
//]]&gt;
</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">
//&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"));
});
//]]&gt;
</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. InputTB和Panel1生成 3 次。

Answer 1

The script will be invoked automatically after Postback回传后将自动调用该脚本

<script type="text/javascript">
    function pageLoad() {
        var panelRef = $get("<%=Panel1.ClientID%>");

        panelRef.style.left = YOUR_VALUE;
        panelRef.style.top = "58px";
    }
</script>

Course there is possible to make it dynamic recalling the position of another control for example:当然有可能让它动态地调用另一个控件的位置，例如：

<script type="text/javascript">
    function pageLoad() {
        var panelRef = $get("<%=Panel1.ClientID%>");
        var div = $get("<%=Button1.ClientID%>"); 

        panelRef.style.left = div.style.left;
        panelRef.style.top = "58px";
    }
</script>

Answer 2

I ended up using newer version of the AjaxControlToolkit.我最终使用了较新版本的 AjaxControlToolkit。 It solves the problem mentioned above and added couple others ;) Anyways i still recomend it.它解决了上面提到的问题并添加了其他几个 ;) 无论如何，我仍然推荐它。

UpdatePanel 中的 Asp.net PopupControlExtender

问题描述

2 个解决方案

解决方案1
0 2013-07-31 16:17:39

解决方案2
0 2010-07-15 12:37:18

UpdatePanel 中的 Asp.net PopupControlExtender

问题描述

2 个解决方案

解决方案1 0 2013-07-31 16:17:39

解决方案2 0 2010-07-15 12:37:18

解决方案1
0 2013-07-31 16:17:39

解决方案2
0 2010-07-15 12:37:18