【问题标题】:Prevent page from scrolling on postback防止页面在回发时滚动
【发布时间】:2015-01-29 01:15:04
【问题描述】:

我正在开发一个使用母版页的 asp 网站。

我正在努力的页面结构如下:

<asp:UpdatePanel ID="MainUpdatePanel" runat="server">
<ContentTemplate>
  <asp:Panel ID="Panel3" runat="server" CssClass="Panel">
  <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    <asp:Panel ID="gridpanel" runat="server" Visible="false" ClientIDMode="Static">
        <asp:GridView ID="grdCombinedTransactions" runat="server" PageSize="40" AllowPaging="True" AllowSorting="true" etc etc >
                <asp:TemplateField HeaderText="GL Account" >
                    <ItemTemplate>
                        <asp:TextBox ID="txtGLAccount" runat="server" Text='<%# Bind("GLAccount") %>' CssClass="txtGLAccount" OnTextChanged="txtGLAccount_TextChanged" AutoPostBack="true"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
        </asp:GridView>
    </asp:Panel>
  </ContentTemplate>
  </asp:UpdatePanel>
</asp:Panel>

MainUpdatePanel 内还有其他带有其他更新面板的面板,但这是我遇到的问题,特别是 GridView。

txtGLAccount 字段在其文本更改时会导致回发。此 PostBack 滚动页面,使 txtGLAccount 字段位于页面底部。

我想阻止任何类型的滚动,因为这种行为看起来很“跳跃”,并且会破坏此页面的数据输入工作流程。

这可能吗?

谢谢!

【问题讨论】:

    标签: c# jquery asp.net webforms


    【解决方案1】:

    你可以做两件事:

    1. 在页面顶部,在Page 指令中,您可以将MaintainScrollPositionOnPostback 属性设置为true。这将导致页面在回发后返回到相同的滚动位置(无论是完整回发还是异步回发)

    2. 您可以使用 javascript 手动向服务、处理程序甚至页面方法发出回发。使用 jquery 插件来实现这一点非常简单

    最简单快捷的方法显然是选项 1,因为您只需打开上述标志。但是,用户体验可能不是最好的,特别是如果这是一个大页面,您可能会在接收来自服务器的响应或通过更新面板发出请求时看到页面冻结。

    选项 2 是迄今为止最好的选项,但需要付出一些努力才能使设置成为客户端与服务器的通信。回发对用户来说是如此透明,以至于如果没有对用户的可见反馈(例如“加载”和/或“成功”消息),您可能会认为什么都没有发生

    【讨论】:

    • 感谢您的提示。在#1 - 这显然不适用于母版页?我实际上已经在我的页面上尝试过该指令,但从我读到的内容来看,它在使用母版页的页面上不起作用。我会研究#2,谢谢!
    【解决方案2】:

    您是否尝试过为更新面板使用触发器? (AsyncPostBackTrigger)

    查看:What is the difference between AsyncPostBackTrigger & PostBackTrigger?

    您也可以使用 Page.MaintainScrollPositionOnPostBack 属性,但您可能需要一个异步调用来防止页面“跳跃”,因为这只会将窗口滚动到回发时的位置。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-04-25
      • 1970-01-01
      • 2011-11-27
      • 2014-09-10
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多