关于 AJAX 更新面板的问题答案

【问题标题】：Question about AJAX Update Panel关于 AJAX 更新面板的问题
【发布时间】：2011-10-10 07:24:49
【问题描述】：

这是我遇到的问题。我的表单上有 5 个按钮，它们彼此相邻（水平）。 5 个按钮中的 3 个必须放在更新面板中 b/c 这些按钮必须执行 AsyncPostBack，其他 2 个按钮需要在外部执行回发。一切都按我想接受的方式工作，即所有按钮都不会出现在同一行。考虑到这些按钮的不同功能，我能做些什么让这 5 个按钮出现在同一行？

【问题讨论】：

标签： ajax html asp.net-ajax updatepanel

【解决方案1】：

UpdatePanel 呈现一个<div>，您需要设置此div 的样式，以便它显示inline 请注意以下代码中的Style="display:inline"。根据您的布局，还有其他方法可以做到这一点，但这是最简单的。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" Style="display:inline">
    <ContentTemplate>
        <asp:Label ID="labelText" runat="server" Text="Label" />
        <asp:Button ID="Button1" runat="server" Text="Button1" />
        <asp:Button ID="Button2" runat="server" Text="Button2" />
        <asp:Button ID="Button3" runat="server" Text="Button3" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button4" runat="server" Text="Button4" />
<asp:Button ID="Button5" runat="server" Text="Button5" />

【讨论】：

【解决方案2】：

您不必将按钮放在 UpdatePanel 中即可完成这项工作。您只需将它们定义为 AsyncPostBackTriggers。你不必担心破坏你的布局。

<div class="toolbar">
    <asp:Button ID="Button1" runat="server" Text="Button1" />
    <asp:Button ID="Button2" runat="server" Text="Button2" />
    <asp:Button ID="Button3" runat="server" Text="Button3" />
</div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="labelText" runat="server" Text="Label" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

【讨论】：