一旦發布回ASP.Net ScriptManager和UpdatePanel就會忽略JavaScript

Question

我在網站上使用UpdatePanels遇到重大問題。 問題是，當我使用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

看來您想使用事件委托。 主要思想是事件冒泡，因此您可以將事件處理程序附加到更新面板之外（也許附加到updatepanel所在的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控件工具包的一部分。 這是我需要的更好的解決方案。 整個日歷更加順暢和整潔，我不再需要使用更新面板。 它也支持多種文化，而無需任何額外的編碼，這很棒。

干杯。