Выполнение функции Javascript из кода asp.net? - PullRequest
Новая
       5

Выполнение функции Javascript из кода asp.net?

3 голосов
/ 03 ноября 2010

Хорошо, это похоже на вопрос, на который должно быть легко ответить, но, как и в случае с большим количеством смешения asp.net и jQuery, это немного кошмар.

То, что я хочу сделать, это бытьзатухание div в разное время во время просмотра клиентом моей страницы asp.net;Я потушил его, используя fadeTo() в jQuery, прежде чем запускать обновление UpdatePanel (чтобы указать, что данные там не свежие), и я хочу добавить его снова после обновления UpdatePanel.Я дошел до обновления UpdatePanel в коде, и это приводит к изменению содержимого div ... но как мне снова вернуть div обратно?

СпособЯ вижу это, есть 2 пути;зарегистрировать обработчик событий при загрузке страницы, чтобы определить, когда содержимое div было изменено, и снова его добавить, или вызвать функцию из кода asp.net, когда я обновил div, чтобы вернуть его обратно в.

В первом случае, похоже, нет события, вызванного изменением содержимого div, поэтому я не могу этого сделать.Если кто-нибудь знает, как я могу получить событие клиента для запуска при обновлении div, это было бы хорошим решением.

Во втором случае я подумал, что это то, для чего был ClientScriptManager,но это не совсем то, что я хочу.Я хочу иметь возможность зарегистрировать определенную функцию Javascript с помощью ClientScriptManager и затем сказать ClientScriptManager, чтобы она выполнялась на клиенте из моего кода.Вы не можете этого делать.ClientScriptManager.RegisterClientScriptBlock() просто вставляет некоторые <script> в вывод HTML, а не вызывает функцию.Предположительно, это сработало бы, если бы я продолжал регистрировать такие вещи, как: 

<script>fadeBackIn();</script>

, потому что Javascript будет немедленно оценен и запущен, но это кажется грязным, и это чувство усиливается тем фактом, что я должен сохранитьслучайным образом генерирует новое уникальное значение для аргумента key, равного ClientScriptManager.RegisterClientScriptBlock(), поскольку оно специально разработано для остановки такого рода повторяющегося кода.Тем не менее, я изо всех сил пытаюсь увидеть альтернативу.Может кто-нибудь придумать хорошую идею относительно лучшего механизма, чтобы заставить это работать?

Я действительно хотел бы что-то вроде: 

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

[...]

ClientScriptManager.ExecuteClientScriptFunction("fadeBackIn");

, но я неувидеть, что функциональность доступна.: - (

Ответы [ 4 ]

1 голос
/ 03 ноября 2010

Вы можете прикрепить к странице загруженное событие. Обработчик pageLoaded получает аргумент типа PageLoadedEventArgs, который содержит метод get_panelsUpdated, который можно вызывать для перечисления всех UpdatePanels, содержимое которых было только что обновлено.

Пример: 

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(); 
            }
        }
    }
}
0 голосов
/ 03 ноября 2010

Если вы используете или хотите использовать ASP.NET Ajax Control Toolkit, он содержит элемент управления, который делает именно то, что вы ищете: UpdatePanelAnimation.

Взгляните здесь для получения дополнительной информации об этом элементе управления и здесь для получения дополнительной информации об использовании анимации.

0 голосов
/ 03 ноября 2010

Я написал небольшой скрипт на чистом JavaScript (jQuery не требуется), вы можете просто разместить этот скрипт на своей странице и изменить часть оповещения ... плюс, конечно, идентификатор элемента div. 

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

0 голосов
/ 03 ноября 2010

Поскольку 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();
});
...