将ASP.NET updatepanel与jQuery UI DatePicker结合使用时出现了

发布时间：2020-12-16 04:33:13 所属栏目：asp.Net 来源：网络整理

导读：我创建了一个结合了内联 jQuery UI datepicker的页面.当用户单击新日期以更新某些数据时,我不想发起对updatepanel的回调.现在,这个页面有多个updatepanels(不要问:)),所以我需要检查哪个updatepanel重新加载,以便做一些客户端的东西.我正在使用__doPostBack

我创建了一个结合了内联 jQuery UI datepicker的页面.当用户单击新日期以更新某些数据时,我不想发起对updatepanel的回调.现在,这个页面有多个updatepanels(不要问:)),所以我需要检查哪个updatepanel重新加载,以便做一些客户端的东西.我正在使用__doPostBack来进行回发,并使用Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender,args){}来监听更新何时完成.

问题是在FF中,回调告诉我它不是异步操作,而我需要检查哪个更新面板将更新设置为null.

我的问题是,这在IE中运行良好,但在任何其他浏览器中都没有,这可能是由两件事引起的：IE进入一个解决问题的怪癖模式(这是我的想法)或IE有某种原生支持对于其他浏览器不知道的updatepanel.

我把问题缩小了,并制作了一个测试页：

<!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>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js "></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js "></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <script type="text/javascript">
        function doAspNetPostback() {
            __doPostBack('<%= hiddenOnSelectionChangedButton.ClientID %>','');
        }

        $(document).ready(function() {
            /* Create the datepicker */
            buildDatepicker();
            /* Add callback-method for when the scriptmanager finished a request */
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender,args) {
                /* Show the panelID - This is 'upd1|hiddenOnSelectionChangedButton' in IE as it should be,and null in Chrome / FF */
                alert(sender._postBackSettings.panelID);
            });
        });

        function buildDatepicker() {
            var dp = $("#datepicker").datepicker({
                onSelect: function(dateText,inst) {
                    /* Do a postback when someone clicks a date */
                    doAspNetPostback();
                }
            });
        }        
    </script>

    <div id="datepicker">
    </div>
    <asp:UpdatePanel UpdateMode="Conditional" ID="upd1" runat="server">
        <ContentTemplate>
            <asp:Button ID="hiddenOnSelectionChangedButton" Text="Press me" runat="server" />
            <div id="lala" runat="server">
                Upd1
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

在IE中启动此测试页将导致一个消息框显示它应该是什么,而在FF或Chrome中加载它会导致消息框显示“null”:)

我已经尝试了各种各样的东西,但我不确定是什么原因可能导致这种行为,因为我对jQuery或ASP.NET Ajax的内部工作并不是那么深入.但是,如果我在FireBug中逐步执行代码的速度足够有效……这让我认为jQuery回调和ASP.NET Ajax回调之间的互操作性可能存在问题？

任何帮助或想法将受到高度赞赏.

谢谢.

[更新]蒂姆解决了它！非常感谢！ – 还要感谢所有花时间试图解决这个问题的人:)

解决方法

我觉得你我从MSDN发现这篇文章有趣： http://msdn.microsoft.com/en-us/magazine/cc163413.aspx

文章说“Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(”也附加到Updatepanel完成事件.

It also fires each time an
asynchronous callback launched on
behalf of an UpdatePanel control
completes and the content inside that
UpdatePanel is updated.

然后在你的处理程序中,你可以循环使用更新的面板

var panels = args.get_panelsUpdated();
for (i=0; i < panels.length; i++) { alert(panels[i]); }

我会偏离使用_ postBackSettings,因为“_”表示隐私,可能会在未来版本的asp.net ajax中停止使用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!