asp.net usercontrol不會在updatepanel中激活javascript

Question

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

我在更新面板中有一個用戶控件。 在我的用戶控件里面我輸出了javascript。

觸發時javascript不會觸發。 如果我將javascript移動到usercontrol / updatepanels之外的父頁面，則會觸發它。 這樣做是沒有意義的，因為我不能在沒有重復代碼的情況下在另一個頁面上使用此usercontrol ...通過復制整個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"  />

在chrome中調試告訴我“Uncaught ReferenceError：test not defined”

如果我將javascript直接添加到onclick，如下所示，它可以工作：

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

如上所述，將函數移動到父頁面也可以。

就像瀏覽器忽略用戶控件的腳本輸出一樣。

有任何想法嗎？

Answer 1

當你有一個UpdatePanel並且UpdatePanel更新它的內容時，它會將它的內容視為簡單的text / 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

感謝Aristos讓我走上正確的道路......盡管他的解決方案有效，但它沒有回答從用戶控件內部輸出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，但無論如何都可以。

這使代碼完全保留在usercontrol中，並且它可以從a標記的onclick事件中運行。

Answer 3

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

所以你可以加上usercontrol的PageLoad事件：

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

Answer 4

嘗試這個;

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

Answer 5

處理綁定到UpdatePanel DOM元素的javscript代碼的首選方法是訂閱PageRequestManager的 endRequest事件並在此處執行您的代碼。 例如，您想在此處設置單擊事件處理程序。

// 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')
}

替代解決方案是使用事件委托，如下所示：

function pageLoad() {

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

}

並且在更新面板周圍有一個名為container的類的div 。 在這種情況下，您的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")
}