当前位置： 文江博客话题详情

UpdatePanel 内的 Asp.net PopupControlExtender

发布于 2024-09-05 08:59:16 字数 8937 浏览 4 评论 0原文

因此，我在 ListViewControl 中使用 PopupControlExtender （编辑某些字段），而 ListViewControl 本身嵌入在 UpdatePanel 中。

每当您导致 partail postback 时，都会在 updatepanel 之外的客户端创建弹出面板，问题如下。并且您可以使用相同的客户端 ID 获得更多客户端控件。当您使用弹出面板回发时，服务器端控件例如。 Texbox 有 Text = clientsidecontrol1.text, clientsidecontrol2.text, clientsidecontrol.text3

有没有办法防止这种情况。

<%@ 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;
    }
}

为了使测试更容易，我发布了用于测试的示例页面的代码。

为了让自己清楚，这里有一个示例：

我单击 Popup。在文本框中键入“asdf”，然后单击“提交”。

InputPanel 显示“asdf”

我再次单击 Popup。在文本框中输入“qwerty”并单击“提交”。

InputPanel 现在显示“qwerty,asdf”

当您检查 firebug 时，您会得到以下信息：

<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 和 Panel1 生成了 3 次。

原文

So I use PopupControlExtender (to edit some of the fields) inside ListViewControl which itself is embedded 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 displays "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('Ładowanie struktury strony klienta ASP.NET Ajax nie powiodło się.');
//]]>
</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.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

挽梦忆笙歌 2024-09-12 08:59:16

我最终使用了更新版本的 AjaxControlToolkit。它解决了上面提到的问题并添加了其他几个问题；）无论如何我仍然推荐它。

I ended up using newer version of the AjaxControlToolkit. It solves the problem mentioned above and added couple others ;) Anyways i still recomend it.

回复 原文
望笑 2024-09-12 08:59:16

该脚本将在回发后自动调用

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

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

，当然可以使其动态调用另一个控件的位置，例如：

<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>

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>
回复 原文
~没有更多了~

关于作者

相守太难

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文