Asp.net 当.NET中发生部分回发时，用户控件中的Javascript不会触发

我正试图了解一些关于使用UpdatePanel的部分回发的情况，虽然很多事情让我感到困惑，但这一点让我感到困惑

我在UpdatePanel中使用选项卡，由于这是一个数据输入应用程序，我将内容放入用户控件中，因此每个选项卡都有自己的用户控件。此外，我将向每个用户控件添加自定义javascript，以处理该控件中的特定客户端内容

尽管如此，我还是注意到用户控件中的javascript不会在部分页面回发时触发

为了模拟这种情况，我在VS2010中创建了一个非常简单的应用程序（使用母版页上带有ScriptManager控件的母版页）

默认页面的内容面板具有以下内容

<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
   <asp:Button runat="server" ID="Button1" Text="Partial postback" />
   <br />
   <asp:Panel runat="server" ID="panel"></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

此外，在按钮的单击处理程序上，我还加载控件（或在切换时加载另一个控件，如中所述）

因此，当第一次加载页面时，会触发警报，但是，当您单击按钮，页面部分回发时，警报不会触发

我向前迈出了一步，创建了第二个用户控件，让按钮切换加载控件，并在UpdatePanel外添加了一个普通按钮。任何时候，我进行完整回发时，加载的用户控件中的javascript都会触发，但它从不在部分回发中触发

然后，我向前走了一步，将控件中的javascript移动到一个函数中，以便可以从PageRequestManager或document.ready调用该函数

现在，我的两个控件包含了这个脚本（每个控件的警报包含不同的消息）

---

最大的问题是，我现在不得不下载一堆永远不会被使用的脚本，这就是为什么我把脚本放在用户控件的第一位

好的，在创建了我自己的测试网站并进行了修补之后，下面是我要做的工作：

测试控制1

---

您可以采用的另一种方法是使用jQuery的方法

当提供选择器时，事件处理程序称为 委派。当事件直接发生在上时，不调用处理程序 绑定元素，但仅适用于 匹配选择器。jQuery将事件从事件目标向上冒泡 到处理程序所附加的元素（即，最内层到 最外层的元素），并为沿着该元素的任何元素运行处理程序 与选择器匹配的路径

事件处理程序仅绑定到当前选定的元素；他们 在代码调用.on（）时页上必须存在

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序。这 元素可以是视图中的容器元素 例如，模型视图控制器设计，或记录事件 处理程序希望监视文档中的所有冒泡事件。这个 文档元素在之前的文档头中可用 加载任何其他HTML，因此可以安全地在那里附加事件，而无需 正在等待文档准备就绪

因此，例如，您可以使用相同的类使用div包装UserControls，如下所示：

用户控制1

这是用户控制1

用户控制2

这是用户控制2

然后，在母版页的

标记之前的最底部，包含jQuery引用和jQuery脚本。在我的示例中，当单击

时，我打印出UserControl内部的

内容

jQuery

$（“div[id$=UpdatePanel1]”）
.on（“单击”，“div.userControl span”，函数（）{
警报（$（this.html（）.trim（））；
});

找到了内联脚本问题的一个很好的解释

简而言之：部分回发更新更新面板的innerHtml，因此它将html的blob视为纯文本，因此不会在html中注册任何脚本标记

所以我的最终解决办法是这样

每个控件都有自己的javascript文件，其函数名类似于

function controlNameLoad() { ..do your stuff }

内容面板代码内部（在case语句内部，用于确定要加载的控件）

---

这是为我的测试项目工作，稍后将查看我是否可以在真实代码中实现。

UserControl1和UserControl2是否同时在页面上，还是UesrControl2取代了UserControl1？代码设置为在任何给定回发中只加载一个usercontrol。如果您的js函数与它们所在的控件相关，并且您已将它们移动到各自的控件中控件（最好是在所有内容的最底层），为什么不让它们内联启动呢？内联脚本不会在部分回发时启动。请参阅问题中的初始测试用例-仅具有内联警报的控件。该警报仅在完全回发时触发。这把我弄糊涂了！这个问题已经解决了我的问题。问得好，先生。这看起来确实有效。然而，我仍然不清楚问题的症结所在，也不清楚为什么用户控件中的javascript没有运行，或者当不同的用户控件异步加载时，请求管理器仍然可以看到原始控件的javascript。此外，这种方法在使用一些简单的javascript的测试中非常有效，但实际上，我将有50多行代码，我不想把它们塞进字符串变量中，因为我失去了所有调试和可维护性。谢谢你给我时间，我一直把头撞在墙上想弄明白。我想这是由于ASP.NET是如何工作的

   Panel.Controls.Add(LoadControl("UC1.ascx"))

Button_Click
 Panel.Controls.Clear()
 Panel.Controls.Add(LoadControl("SomeControl.ascx"))

<script type="text/javascript">
  function userLoad() {
    alert("Identify control");
  }
</script>

<script type="text/javascript">
   var prm = Sys.WebForms.PageRequestManager.getInstance().add_endRequest(userLoad);
</script>

<script src='UC1.js'> 

 ScriptManager.RegisterStartupScript(ctrl, ctrl.GetType(), "UserJS", "UC1Load()", True)

<%@ Control Language="C#" 
            AutoEventWireup="true" 
            CodeFile="TestControl1.ascx.cs" 
            Inherits="Controls_TestControl1" %>

This is Test Control 1

<%@ Control Language="C#" 
            AutoEventWireup="true" 
            CodeFile="TestControl2.ascx.cs" 
            Inherits="Controls_TestControl2" %>

This is Test Control 2

<%@ Page Language="C#" 
         MasterPageFile="~/Site.master" 
         AutoEventWireup="true" 
         CodeFile="10049777.aspx.cs" 
         Inherits="_10049777" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server" />
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" 
        UpdateMode="Conditional" 
        ChildrenAsTriggers="true">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server"
                Text="Partial postback" 
                OnClick="Button1_Click" />
            <br /><br />
            <asp:Panel runat="server" ID="Panel1" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var TestControl1 = LoadControl("Controls\\TestControl1.ascx");

        Panel1.Controls.Add(TestControl1);
        ScriptManager.RegisterStartupScript(TestControl1, 
                                            TestControl1.GetType(), 
                                            "TestControl1Script", 
                                            "alert(\"control 1\");", 
                                            true);
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    var TestControl2 = LoadControl("Controls\\TestControl2.ascx");

    Panel1.Controls.Clear();
    Panel1.Controls.Add(TestControl2);

    ScriptManager.RegisterStartupScript(TestControl2, 
                                        TestControl2.GetType(), 
                                        "TestControl2Script", 
                                        "alert(\"control 2\");", 
                                        true);
}

<div class="userControl">
    <span>This is UserControl 1</span>
</div>

<div class="userControl">
    <span>This is UserControl 2</span>
</div>

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script>
        $("div[id$=UpdatePanel1]")
            .on("click", "div.userControl span", function() { 
                alert($(this).html().trim()); 
            });
    </script>
</body>
</html>

function controlNameLoad() { ..do your stuff }

dim ctrl = LoadControl("UCName.ascx")
panel.Controls.Add(ctrl)
ScriptManager.RegisterClientScriptInclude(ctrl, ctrl.GetType(), "UserJS", "UCName.js")
ScriptManager.RegisterStartupScript(ctrl, ctrl.GetType(), "UserJS", "controlNameLoad()", True)