4

我试图了解一些关于使用更新面板的部分回发的信息，虽然很多事情都让我感到困惑，但这个让我感到困惑。

我在 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>

然后我创建了一个用户控件并简单地添加了一些纯文本和一个 javascript 警报

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="UC1.ascx.vb" Inherits="TestWebApp_VB.UC1" %>
This is user control 1
<script> alert('control 1'); </script>

然后在内容页面的页面加载事件中，我将控件加载到面板中。

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

此外，在按钮的单击处理程序上，我还加载了控件（或切换时的不同控件，如进一步所述）

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

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

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

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

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

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

因此，我将其添加到内容面板的末尾

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

好吧，现在每个部分回发都会触发 javascript，但是它会触发最后一次由完整回发加载的控件的 javascript。

例子：

  1. 页面最初加载 UserControl1 - UserControl1 的警报触发（此处未显示 - 在 jquery document.ready 中调用 userLoad 函数）
  2. 用户点击按钮 - 应该加载 UserControl2
  3. UserControl2 已加载到屏幕上，但会触发 UserControl1 的警报

有点罗嗦，为此道歉，我发现没有简单的方法来解释这一点。

- -编辑 - -

我尝试过的其中一件事是使用 Scotts 的建议。将每个控件的 javascript 保存在一个单独的文件中，并将其全部放入一个名为 function UC1Load() {} 之类的函数中（如果我觉得很活泼，可能会在它周围贴上一个命名空间），添加对脚本文件的引用内容页面通过

<script src='UC1.js'>

然后注册启动脚本来调用这个函数

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

最大的问题是我现在必须下载一堆永远不会使用的脚本，这就是我首先将脚本放在用户控件中的原因。

4

3 回答 3

2

您可以采用的另一种方法是使用 jQuery 的.on()方法。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。jQuery 将事件从事件目标冒泡到附加处理程序的元素（即，从最内到最外的元素），并为沿该路径匹配选择器的任何元素运行处理程序。

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。

...

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。

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

用户控件 1

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

用户控制 2

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

然后，在您的 MasterPage 中，在您的标记之前的最底部</body>，包含您的 jQuery 引用和您的 jQuery 脚本。在我的示例中，我在单击 时打印出<span />UserControl 内部的内容<span />。

jQuery

    <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>
于 2012-04-07T02:41:11.853 回答
1

好的，在创建了我自己的测试网站并进行了修改之后，这就是我要工作的内容：

测试控制1

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

This is Test Control 1

测试控制2

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

This is Test Control 2

10049777.aspx

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

10049777.aspx.cs

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);
}
于 2012-04-07T00:26:19.520 回答
0

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

http://veskokolev.blogspot.com/2009/03/inline-scripts-in-updatepanel-doesnt.html

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

所以我的最终解决方案是这样的。

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

function controlNameLoad() { ..do your stuff }

内容面板代码内部（在判断要加载哪个控件的 case 语句内部）

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)

这适用于我的测试项目，稍后会看到我是否可以实现到我的真实代码中。

于 2012-04-08T03:51:05.980 回答