2

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

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

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

在谷歌上看了几个小时之后，我可以通过向 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)

这似乎真的不切实际，尤其是当我介绍一个母版页时。我最终将不得不重新注册大量的启动脚本。

一定有更简单的方法吗？

4

3 回答 3

0

感谢您的回答。

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

我现在使用的是 ASP.Net AJAX 控件工具包中的CalendarExtender控件。这是我需要的更好的解决方案。整个日历更加流畅和整洁，我不再需要使用更新面板。它还支持多种文化而无需任何额外的编码，这很棒。

干杯。

于 2010-03-04T12:46:01.407 回答
0

It looks like you want to use event delegation. The main idea is that events bubble up and so you would attach your event handler outside of the update panel (perhaps to a div or table that the updatepanel resides in). This handler is in charge of all events it receives so even when your update panel posts back and a new textbox is rendered, you won't need to reattach the event handler. When the new textbox raises its event your existing event handler can try to handle it.

The following is just one way of doing event delegation in javascript (using jquery and taken from 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>

In this simple example I register the delegate method on click of this div (the textbox and calendar are inside of this div). When you click the textbox the click event bubbles up to the div. The delegate method gets called and I check for the showCalendar attribute from the element who raised the event. If this attribute exists I find the element this attribute points to and update its display style. This is a pretty simple example but you could easily extend the delegate method to take in functions it will call based on some kind of rules you register.

于 2010-02-27T01:45:19.033 回答
0

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

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

    $('div.searchArrivalDateCalendarDiv').show();
  });
});
于 2010-02-27T01:53:19.413 回答