ASP.Net ScriptManager和UpdatePanel在回发时忽略javascript

我在使用网站上的UpdatePanel时遇到了主要问题。问题是，当我使用ScriptManager时，一旦更新面板回传，所有客户端JavaScript在页面最初加载时都处于活动状态。ASP.Net ScriptManager和UpdatePanel在回发时忽略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)

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

必须有一个更简单的方法？

来源

2010-02-09 DazzledKid

它看起来像你想使用事件委托。主要思想是事件会冒泡，因此您会将事件处理程序附加到更新面板之外（可能是更新面板所在的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属性。如果这个属性存在，我发现这个属性指向的元素并更新它的显示风格。这是一个非常简单的例子，但您可以轻松扩展委托方法，以根据您注册的某些规则来调用将调用的函数。

来源

2010-02-27 01:45:19

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

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

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

来源

2010-02-27 01:53:19

感谢您的回答。

我还没有设法解决这个问题。但是，我发现了弹出日历的备用解决方案。

我现在使用的是CalendarExtender控件，它是ASP.Net AJAX控件工具包的一部分。对于我所需要的，这是一个更好的解决方案。日历作为一个整体更光滑和整洁，我不再需要使用更新面板。它还支持多种文化，无需任何额外的编码，这非常棒。

干杯。

来源

2010-03-04 12:46:01 DazzledKid

ASP.Net ScriptManager和UpdatePanel在回发时忽略javascript

回答

相关问题