從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(); 
});