asp.net usercontrol не будет запускать javascript внутри updatepanel

Question

Я видел похожие проблемы с этим и ответы, но никто, кажется, не исправляет проблему.

У меня есть пользовательский элемент управления внутри панели обновления. Внутри моего пользовательского элемента управления я выводил javascript.

javascript не срабатывает при срабатывании. Если я перемещаю javascript на родительскую страницу за пределами панели usercontrol/update, он запускается. Это не имеет смысла делать, поскольку я не могу использовать этот usercontrol на другой странице без дублирования кода ... путем дублирования всего javascript (другого сайта) или добавления ссылок на файл .js на каждой используемой странице на (тот же сайт). Это просто менее портативно

Я просто хочу вывести javascript с помощью элемента управления (внутри панели обновления).

Обновленная панель упоминается для точности того, что я делаю. Он не работает, даже если я размещаю usercontrol вне пакетов обновлений.

Хранение простое (Это не работает для меня):

UserControl:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="_location.ascx.cs" Inherits="_location" %> 
<script type="text/javascript"> 
    function test() { 
     alert('Hello World!'); 
    } 
</script> 

<a href="javascript:void(0);" onclick="javascript:test();"> 
    Find For Me 
</a> 

РОДИТЕЛЕЙ:

<uc1:_location runat="server" ID="_location" /> 

Debugging в хроме говорит мне «Uncaught ReferenceError: тест не определенный "

Если я добавлю javascript непосредственно в onclick, как показано ниже, он работает:

onclick="alert('Hello World!');" 

И как указано выше, перемещение функции на родительскую страницу ТАКЖЕ работает.

Это как если бы браузер игнорировал вывод сценария из пользовательского элемента управления.

Любые идеи?

Answer 1

Когда у вас есть UpdatePanel, и что UpdatePanel обновляет его содержимое, он рассматривает его содержимое как простой текст/html (не код), у него нет никакого синтаксического анализатора для запуска скрипта и его доступности для этой страницы.

Так это содержание,

<script type="text/javascript"> 
    function test() { alert('Hello World!'); } 
</script> 

<a href="javascript:void(0);" onclick="javascript:test();"> 
    Find For Me 
</a> 

после стороны клиента код обновления пробегов панели и обновления содержимого страницы, часть сценария не разбираются - его простой текст/html для страницы.

Эта часть однако работает

<a href="javascript:void(0);" onclick="alert('Hello World!');">Find For Me</a> 

, поскольку синтаксический анализ атрибута onclick производится при нажатии на нее.

Есть доступны следующие обходные пути:

1. Переместить ваш JavaScript во внешний файл
2. Переместить вы скрипт за пределами UpdatePanel
3. Зарегистрируйте скрипт в коде с RegisterClientScriptBlock или альтернативными функциями.

Answer 2

Предпочтительный способ борьбы с javscript кода, который связан с элементами DOM в UpdatePanel это подписаться на endRequest случае PageRequestManager и выполнить свой код здесь. Например, здесь вы хотите установить обработчики событий кликов.

// that is standard way for asp.net to execute JS on page load 
// pretty much the same as $(function(){ ...}) with jquery 
function pageLoad() { 
    // find PRM instance and subscribe to endRequest 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest); 
} 

function endRequest() { 
    // set all handlers to DOM elements that are within UpdatePanel 
    $('<%= myButton.ClientID %>').on('click', test) 
} 

function test(e) { 
    alert('Hi') 
} 

Альтернативное решение будет использовать event delegation так:

function pageLoad() { 

    // delegate click event on .myButton inside .container 
    // to the .container DOM element 
    $('.container').on('click', '.myButton', test) 

} 

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

же код без JQuery и использовать только ASP.NET AJAX будет выглядеть следующим образом:

function pageLoad() { 
    Sys.UI.DomEvent.addHandler($("myContainer"), "click", delegatedTest); 
} 

function delegatedTest(e) { 
    // since asp.net ajax does not support event delegation 
    // you need to check target of the event to be the right button 
    if (e.target.id == "myButton") test(e) 
} 

function test(e) { 
    alert("HI") 
} 

Answer 3

Благодаря Аристос для отправки меня на правильный путь ... Хотя его решение работает, он не ответил на вопрос вывода javascript изнутри usercontrol, но вместо этого предложил переместить его на улицу. Это не был желаемый результат, как указано, поскольку он не удерживается внутри элемента управления для упрощения переносимости.

Вот мое решение, которое выполняет это: CS файл:

String script = "<script type=\"text/javascript\">"; 
script += "function test() {"; 
    script += "alert('Hello World!');"; 
script += "</script>"; 

Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "locationScript", script); 

Можно использовать StringBuilder если сценарий больше, но eitherway работает.

Сохраняет код целиком внутри usercontrol и работает из события onclick тега.

Answer 4

В дополнение к решению, которое написал Адам Вуд, я должен сказать, что вы должны использовать ScriptManager для регистрации скрипта при использовании панели обновления, по крайней мере, в .net 4.0, потому что иначе это не будет работать.

Таким образом, вы можете поставить на Pageload случае UserControl:

string script = @" alert('this is a test'); 
alert('it worked')"; 
ScriptManager.RegisterStartupScript(Page,Page.GetType(),"scriptMelhoria",script,true); 

Answer 5

Try это;

Вы можете найти свои элементы сценария после обратного вызова панели udpdate и оценить их.

Добавьте в свой собственный тег скрипта специальный атрибут, чтобы выбрать элементы после запроса обратного вызова.

<script type="text/javascript" data-tag='myscript'> 
    function test() { 
     alert('Hello World!'); 
    } 
</script> 

И добавьте этот скрипт в ваш aspx-файл контейнера панели обновления.

<script> 

     if (Sys !== undefined) { 
      var prm = Sys.WebForms.PageRequestManager.getInstance(); 
      prm.add_endRequest(endPostbackRequest); 
     } 

     function endPostbackRequest(sender, args) { 
      $("script[data-tag='myscript']:not([data-run])").each(
       function() { 
        eval.apply(window, [$(this).text()]); 
        $(this).attr('data-run', '1'); 
       }); 
     } 

</script>