Question

我在网站上使用UpdatePanel时遇到了重大问题。问题是，当我使用ScriptManager时，一旦更新面板回发，在页面最初加载时处于活动状态的所有客户端JavaScript都将丢失。

这就是我想要做的......

我在自己的更新面板中的同一页面上有许多.net日历控件。日历最初是隐藏的，直到您在关联的文本框（也在更新面板中）中单击，此时弹出日历以便您可以选择日期。他们的日历工作很好，直到您实际更改日期（回发后），之后当您在文本框中单击时，日历不再弹出，“onfocus”JavaScript丢失。

在google看了几个小时之后，我可以通过动态地向TextBox添加“onfocus”属性并在日历回发时使用ScriptManager注册启动脚本来使事情变得半工作。

示例：

TextBox1.Attributes.Add("onfocus", "document.getElementById('searchArrivalDateCalendarDiv').style.display = 'block';")
ScriptManager.RegisterStartupScript(Page, GetType(Page), "StopTxtClick", "$(document).ready(function(){$('.txtArrivalDate').click(function(event){event.stopPropagation(); $('div.searchArrivalDateCalendarDiv').show(); });});", True)

这似乎真的不切实际，特别是当我介绍一个母版页时。我最终将不得不重新注册一个很多启动脚本的地狱。

必须有一种更简单的方法吗？

Answer 1

看起来你想要使用事件委托。主要想法是事件冒出来，因此您可以将事件处理程序附加到更新面板之外（可能是更新面板所在的div或表）。此处理程序负责收到的所有事件，因此即使更新面板发回并且呈现新文本框，您也不需要重新附加事件处理程序。当新文本框引发其事件时，您现有的事件处理程序可以尝试处理它。

以下只是在javascript中进行事件委派的一种方法（使用jquery并从http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery获取）

jQuery.delegate = function() {
            return function(e) {
                var target = $(e.target);
                if (target.attr("showCalendar")) {
                    var calendar = $("#" + target.attr("showCalendar"));
                    calendar.css("display", "block");
                }
            }
        }

        $(document).ready(function() 
        {
            $('#test').click($.delegate());
        });

<form id="form1" runat="server">
        <asp:ScriptManager runat="server" EnablePartialRendering="true"/>
        <div id="test" style="width:100%;">
            <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    <input type="text" id="testText" showCalendar="testCalendarDiv" />
                    <div id="testCalendarDiv" style="display:none;">
                        <asp:Calendar runat="server" ID="testCalendar1"/>
                    </div>
               </ContentTemplate>
           </asp:UpdatePanel>
        </div>
    </form>

在这个简单的例子中，我在点击这个div时注册了委托方法（文本框和日历在这个div里面）。单击文本框时，单击事件会冒泡到div。调用委托方法，我从引发事件的元素中检查 showCalendar 属性。如果此属性存在，我会找到此属性指向的元素并更新其显示样式。这是一个非常简单的示例，但您可以根据您注册的某些规则轻松扩展委托方法以接收它将调用的函数。

Answer 2

问题是UpdatePanel刷新完全消除了其div元素中的DOM。解决这个问题的最简单方法是尽可能使用live（）功能，例如：

$(document).ready(function () {
  $('.txtArrivalDate').live('click', function (event) {
    event.stopPropagation();

    $('div.searchArrivalDateCalendarDiv').show();
  });
});

Answer 3

感谢您的回答。

我仍然无法解决这个问题。但是，我找到了日历弹出窗口的替代解决方案。

我现在使用的是CalendarExtender控件，它是ASP.Net AJAX Control Toolkit的一部分。这是我需要的更好的解决方案。整个日历更加顺畅和整洁，我不再需要使用更新面板。它还支持多种文化，无需任何额外的编码。

干杯。

ASP.Net ScriptManager和UpdatePanel一旦发回，就会忽略javascript

3 个答案: