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

Question

OK, this feels like a question that should be easy to answer, but as with so much mixing of asp.net and jQuery, it's a bit of a nightmare.

What I want to do is be fading a div in and out at various times during the client's viewing of my asp.net page; I fade it out using jQuery's fadeTo() before triggering an UpdatePanel update (to indicate that the data there is not fresh) and I want to fade it in again once the UpdatePanel has been updated. I've gotten as far as updating the UpdatePanel in the codebehind, and this results in the div 's content changing... but how do I fade the div back in again?

The way I see it, there are 2 ways; register an event handler on page load to detect when the div 's content has been changed and fade it back in, or call a function from the asp.net codebehind when I've updated the div to fade it back in.

In the first case, there doesn't seem to be any event triggered by the div 's content changing, so I can't seem to do that. If anyone knows how I could get a client event to trigger when I update the div , that would be a nice solution.

In the second case, I thought that this was what ClientScriptManager was for, but it doesn't quite do what I want. I want to be able to register a particular Javascript function with ClientScriptManager and then tell ClientScriptManager to execute it in the client, from my codebehind. You can't seem to do that. ClientScriptManager.RegisterClientScriptBlock() simply inserts some <script> into the HTML output, rather than calling a function. Presumably this would work if I kept registering things like:

<script>fadeBackIn();</script>

because the Javascript would be immediately evaluated and run, but this feels messy, and that feeling is intensified by the fact that I'd have to keep randomly generating a new unique value for the key argument of ClientScriptManager.RegisterClientScriptBlock() , because it's specifically designed to stop this kind of repeated code. However, I'm struggling to see an alternative. Can anyone come up with a good idea as to a better mechanism to get this to work?

I'd really like something along the lines of:

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

[...]

ClientScriptManager.ExecuteClientScriptFunction("fadeBackIn");

but I don't see that functionality available. :-(

Answer 1

You can attach to the page loaded event. The pageLoaded handler recieves an argument of type PageLoadedEventArgs which contains a get_panelsUpdated method that you can call to enumerate all the UpdatePanels whose content was just updated.

Example:

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

Because html is stateless, you'll need an asynchronous way of determining if the content has changed in your div. I would try using the window.setInterval to check if your content has changed every 500ms or so.

If your div looks like this:

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

Then this might be a solution:

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

Answer 3

If you are using, or are willing to use the ASP.NET Ajax Control Toolkit, it contains a control that does exactly what you are looking for: UpdatePanelAnimation.

Take a look here for more information on that control, and here for more information on using animations.

Answer 4

I have written small script with pure JavaScript (no jQuery required), you can just have this script in your page and change the alert part.. plus of course the ID of the div element.

<script type="text/javascript">
var _watchTimer = 0;
window.onload = function WindowLoad(evt) {
    _watchTimer = window.setInterval("WatchForChange();", 100);
}

function WatchForChange()
{
    var oDiv = document.getElementById("MyDivToWatch");
    if (oDiv == null)
    {
        window.clearInterval(_watchTimer);
        return;
    }
    var prevHtml = oDiv.getAttribute("prev_html") || "";
    var curHtml = oDiv.innerHTML;
    if (prevHtml != curHtml)
    {
        if (prevHtml.length > 0)
        {
            alert("content changed");
        }
        else
        {
            //first run, ignore
        }
        oDiv.setAttribute("prev_html", curHtml);
    }
}
</script>
<div id="MyDivToWatch">I can be changed..</div>
<button type="button" onclick="document.getElementById('MyDivToWatch').innerHTML += ' like this..';">Change</button>

Added the whole code used to test, used a button to dynamically change the contents but it should work with changing it via AJAX call aka UpdatePanel.