asp.net usercontrol不會在updatepanel裏面激發javascript

Question

我已經看到過類似的問題和答案，但似乎沒有解決這個問題。

我有一個更新面板內的用戶控件。在我的用戶控件裏面輸出javascript。

JavaScript在觸發時不會觸發。如果我將javascript移動到usercontrol/updatepanels之外的父頁面，則會觸發。這是沒有意義的做到這一點，因爲我不能在沒有重複代碼的情況下在另一個頁面上使用此用戶控件...通過複製整個JavaScript（不同的站點）或在每個頁面中添加對.js文件的引用（相同的網站）。這只是便攜式

我只想輸出與控制的JavaScript（更新面板內）。

updatepanel提到了我正在做的事情的準確性。即使我將usercontrol放在updatepanels之外，它也不起作用。

保持簡單（這並不爲我工作）：

用戶控件：

<%@ 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" /> 

調試告訴我，「未捕獲的ReferenceError：測試不定義「

如果我將javascript直接添加到onclick，如下所示，我t works：

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的頁面。

因爲onclick屬性的解析，當你點擊它完成這部分無論如何都會

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

。

有可用以下變通：

1. 將你的JavaScript到外部文件
2. 打動你的腳本在UpdatePanel
3. 以外的代碼RegisterClientScriptBlock或替代功能，註冊腳本後面。

Answer 2

處理綁定到DOM元素中UpdatePanel javscript代碼的首選方式是訂閱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

感謝Aristos的送我正確的道路......雖然他的解決方案，但是沒有回答從usercontrol輸出javascript的問題，但建議將它移到外面。如上所述，這不是理想的結果，因爲它不在控制之內，以便於攜帶。

這裏是我的解決方案，完成此： 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

除了Adam Wood發佈的解決方案之外，我應該說您必須使用ScriptManager註冊腳本，至少在.net 4.0中使用更新面板時，因爲否則它將無法工作。

所以，你可以把該用戶控件的pageLoad的事件：

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

Answer 5

試試這個;

您可以在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>