从asp.net代码隐藏中执行Javascript函数？

Question

好的，这感觉就像一个应该很容易回答的问题，但是像asp.net和jQuery混合那么多，这有点噩梦。

我想要做我的asp.net页面的客户机的观看过程中可以淡入淡出一div在不同的时间;我在使用jQuery的fadeTo()之前将其淡出，然后触发UpdatePanel更新（表示数据不是新鲜的），并且我想在更新UpdatePanel后再次将其淡入淡出。我已经尽可能在代码隐藏中更新UpdatePanel，并且这导致div的内容更改......但是如何再次将div淡化？

我看到它，有2种方式的方式;在页面加载时注册一个事件处理程序以检测div的内容何时被更改并淡入，或者在更新div以使其淡入时调用asp.net代码隐藏的函数。

在第一种情况下，似乎没有要由div的内容改变触发任何事件，所以我似乎无法做到这一点。如果有人知道如何在更新div时得到客户端事件触发，那将是一个不错的解决方案。

在第二种情况下，我认为这是一次什么样的ClientScriptManager，但它并不完全做我想做的。我希望能够注册一个特定的Javascript函数ClientScriptManager，然后告诉ClientScriptManager在我的代码隐藏中在客户端执行它。你似乎无法做到这一点。 ClientScriptManager.RegisterClientScriptBlock()只是将一些<script>插入到HTML输出中，而不是调用函数。据推测，如果我保持注册状的东西这样的工作：

<script>fadeBackIn();</script> 

因为使用Javascript将立即评估和运行，但这种感觉乱了，这种感觉是由事实加剧了，我不得不保持随机产生为ClientScriptManager.RegisterClientScriptBlock()的key争论一个新的独特的价值，因为它是专门用来停止这种重复的代码。但是，我正在努力寻找替代方案。任何人都可以想出一个好主意，以更好的机制来实现这个工作吗？

我真的很想沿着线的东西：

ClientScriptManager.RegisterClientScriptFunction("fadeBackIn", "function fadeBackIn(){ ... }"); 

[...] 

ClientScriptManager.ExecuteClientScriptFunction("fadeBackIn"); 

，但我不认为这功能可用。 :-(

Answer 1

您可以附加到页面加载事件。 pageLoaded处理程序接收一个类型为PageLoadedEventArgs的参数，其中包含一个get_panelsUpdated方法，您可以调用该方法来枚举其内容刚刚更新的所有UpdatePanel。

例子：

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_pageLoaded(pageLoaded); 

function pageLoaded(sender, args) 
{ 
    var panels = args.get_panelsUpdated(); 

    if (panels.length > 0) 
    { 
     for (var i in panels) 
     { 
      if (panels[i].id == "DesiredUpdatePanelId") 
      { 
       fadeBackIn(); 
      } 
     } 
    } 
} 

Answer 2

因为html是无状态的，所以你需要一个异步的方式来确定你的div中的内容是否发生了变化。我会尝试使用window.setInterval来检查你的内容是否每500ms左右发生一次更改。

如果你的DIV是这样的：

<div id="mycontent">Blah, blah.</div> 

那么这可能是一个解决办法：

$(function(){ 

    var $mycontent = $('#mycontent'); 
    var myContentHtml = $mycontent.html(); 
    var intervalId; 

    function checkIfDivChanged() 
    { 
     window.clearInterval(intervalId); 

     if (myContentHtml != $mycontent.html()) 
     { 
     myContentHtml = $mycontent.html(); 

     // run update here.. 
     fadeBackIn(); 

     // if you want to stop the check then uncomment next line.. 
     // return; 
     } 

     intervalId = window.setInterval(checkIfDivChanged, 500);   
    } 

    checkIfDivChanged(); 
});