如何阻止UpdatePanel导致整个页面回发？

Question

我正在使用 .NET 3.5 并在 Community Server 2008 框架内构建页面。

在其中一个页面上，我正在尝试让 UpdatePanel 工作。

我直接从 ASP.NET 网站获取了一个示例，通过单击按钮将 UpdatePanel 中的时间更新为当前时间，但由于某种原因，当我尝试执行该功能时，整个页面都会刷新。

这是我所拥有的：

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Panel refreshed at " + DateTime.Now.ToString();
    Label2.Text = "Panel refreshed at " + DateTime.Now.ToString();
}

<asp:ScriptManager ID="ScriptManager1" runat="server"/>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <fieldset>
            <legend>UpdatePanel</legend>
            <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
        </fieldset>
    </ContentTemplate>
</asp:UpdatePanel>

每当我单击按钮时，面板都会更新 - 但整个页面都会回发！我可以看到整个页面都在闪烁。我到底做错了什么？

我位于嵌套母版页内，但我不确定这是否是一个问题。我正在使用的这个社区服务器框架中是否有某些东西会导致所有事件回发？

Answer 1

您是否尝试在“触发器”部分中将

Button1

设置为

AsyncPostBackTrigger

？将

ChildrenAsTriggers

属性设置为

true

，将

UpdateMode

属性设置为

Conditional

。

protected void Button1_Click(object sender, EventArgs e)
{    
    Label1.Text = "Panel refreshed at " + DateTime.Now.ToString();    
    UpdatePanel1.Update();
}    

<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <Triggers>        
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />    
    </Triggers>    
    <ContentTemplate>        
        <fieldset>            
            <legend>UpdatePanel</legend>            
            <asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />            
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />        
        </fieldset>    
    </ContentTemplate>
</asp:UpdatePanel>

Answer 2

我在上面的代码示例中没有看到 Label2。如果 Label2 位于 UpdatePanel 之外，则会发生全页面刷新，因为这是页面正确更新 Label2 所需要的。

默认情况下，UpdatePanel 只会在被其中的控件触发时动态刷新其中的内容。如果您需要进行一些更高级的更新，例如面板外部的按钮导致刷新或更新不同面板中的标签，那么您需要在 UpdatePanel 上设置 Conditional 属性并进行一些手动 Update 调用在你的代码中。

Answer 3

另一个可能的原因是，如果页面有

ClientIDMode="static"

，那么您希望仅刷新 UpdatePanel 的控件将刷新整个页面。

要解决此问题，您只需在控件上设置

ClientIDMode="AutoID"

即可触发 UpdatePanel 回发。

Answer 4

如果您有一个从 .net Framework v1.1 升级的旧项目，请从 Web 配置中删除此行以使其正常工作：

<xhtmlConformance mode="Legacy"/>

该标志是由升级过程添加的，可防止部分页面回发。

Answer 5

在 UpdatePanel 控件上设置

ChildrenAsTriggers="true"

。

Answer 6

“默认情况下，UpdatePanel 只会在被其中的控件触发时动态刷新其中的内容。”

否则整个页面都会刷新！这就是重点！

Answer 7

如果设置 updateMode=conditional 那么页面将不会刷新，但事件将会触发。

设置ChildrenAsTriggers =“true”仅表示来自子元素的任何事件都会更新面板。 如果将childrenAsTriggers 设置为 false，那么在事件后面的代码中，您可以简单地调用 updatePanel1.Update(); 这是一种更好的方法，因为它允许您控制哪些面板在什么时间更新。