asp.net usercontrol 不会在 updatepanel 中触发 javascript

Question

我已经看到了与此类似的问题和答案，但似乎没有一个可以解决问题。

我在更新面板中有一个用户控件。在我的用户控件中，我输出 javascript。

javascript 在触发时不会触发。如果我将 javascript 移动到 usercontrol/updatepanels 之外的父页面，那么它会触发。这样做是没有意义的，因为我不能在另一个页面上使用这个用户控件而不复制代码......通过复制整个 javascript（不同的站点）或在每个页面中添加对 .js 文件的引用它使用在（同一站点）上。它只是不太便携

我只想输出带有控件的 javascript（在更新面板内）。

提到更新面板是为了确保我正在做的事情的准确性。即使我将用户控件放在更新面板之外，它也不起作用。

保持简单（这对我不起作用）：

用户控制：

<%@ 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 中调试告诉我“未捕获的 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. 将脚本移出更新面板
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);

如果脚本较长，可以使用字符串生成器，但无论如何都可以。

这将代码完全保留在用户控件中，并且它从 a 标记的 onclick 事件开始工作。

Answer 3

除了 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 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')
}

另一种解决方案是像这样使用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")
}