8

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

我在更新面板中有一个用户控件。在我的用户控件中，我输出 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!');"

如上所述，将功能移动到父页面也可以。

就好像浏览器忽略了用户控件的脚本输出。

有任何想法吗？

4

5 回答 5

6

当您有一个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或替代函数在后面的代码中注册脚本。
于 2013-04-13T14:21:50.630 回答
1

感谢 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 事件开始工作。

于 2013-04-13T15:12:51.103 回答
1

除了 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);
于 2013-10-01T13:11:19.510 回答
0

尝试这个;

您可以在 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>
于 2017-05-05T08:46:48.787 回答
-1

处理绑定到 DOM 元素的 javscript 代码的首选方法UpdatePanel是订阅PageRequestManagerendRequest的事件并在此处执行您的代码。例如，您想在此处设置单击事件处理程序。

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

}

并有一个围绕您的更新面板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")
}
于 2013-04-13T14:27:38.990 回答