Question

好吧，这感觉就像一个容易回答的问题，但是如同asp.net和jQuery的混合一样，这有点像噩梦。

我想要做的是在客户端查看我的asp.net页面的过程中，在不同时间进出div。我在触发UpdatePanel更新之前使用jQuery的fadeTo()淡出它（以表明那里的数据不新鲜），并且我想在UpdatePanel更新后再次淡入它。我已经在代码隐藏中更新了UpdatePanel，这导致div的内容发生了变化......但是我如何再次淡化div？

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

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

在第二种情况下，我认为这是ClientScriptManager的用途，但它并不能完全符合我的要求。我希望能够使用ClientScriptManager注册特定的Javascript函数，然后告诉ClientScriptManager.RegisterClientScriptBlock()在我的代码隐藏中在客户端中执行它。你似乎无法做到这一点。 <script>只是将一些<script>fadeBackIn();</script>插入到HTML输出中，而不是调用函数。据推测，如果我继续注册以下内容，这将会起作用：

key

因为Javascript会立即被评估并运行，但是这感觉很混乱，而且我必须随机为ClientScriptManager.RegisterClientScriptBlock() ClientScriptManager.RegisterClientScriptFunction("fadeBackIn", "function fadeBackIn(){ ... }"); [...] ClientScriptManager.ExecuteClientScriptFunction("fadeBackIn");参数生成一个新的唯一值，这种感觉会加剧。 1}}，因为它专门用于停止这种重复的代码。但是，我很难看到另一种选择。任何人都可以提出一个更好的机制来让它发挥作用吗？

我真的很喜欢以下内容：

{{1}}

但我没有看到可用的功能。： - （

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来检查您的内容是否每500毫秒左右更改一次。

如果您的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();
});

Answer 3

如果您正在使用或者愿意使用ASP.NET Ajax Control Toolkit，它包含的控件可以完全满足您的需求：UpdatePanelAnimation。

有关该控件的详细信息，请查看here;有关使用动画的详细信息，请查看here。

Answer 4

我用纯JavaScript编写了小脚本（不需要jQuery），您可以在页面中使用此脚本并更改警报部分..当然还有div元素的ID。

<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>

添加了用于测试的整个代码，使用按钮动态更改内容，但它应该通过AJAX调用也称为UpdatePanel来更改它。

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

4 个答案: