updatepanel部分回发后保持页面滚动位置

问题描述 投票:0回答:4

我是 ASP.NET 的初学者,在 UpdatePanel 部分回发后维护页面的滚动位置时遇到问题。我尝试在

MaintainScrollPositionOnPostback="true" 
中设置
<%@ Page Language="C#" ...%>
但没有成功。请注意,我正在使用(并且必须使用)Firefox。

这是我的代码:

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:HiddenField ID="ClassificationHiddenField" runat="server" />
<asp:HiddenField ID="DateHiddenField" runat="server" />
<table>
    <tr>
        <td>
            <asp:Panel ID="GroupTitlePanel" CssClass="titlePanelBold" BorderStyle="Ridge" runat="server"
                Width="400px">
                <table id="MainTable">
                    <tr>
                        <td align="center" class="style3">
                            <asp:Label ID="GroupLabel" runat="server">
                            </asp:Label>
                        </td>
                        <td align="center" class="style4">
                            <asp:Label ID="ReturnLabel" runat="server" Text="Expected Return">
                            </asp:Label>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <br />
            <asp:Panel ID="GroupMainPanel" runat="server" Width="400px">
            </asp:Panel>
        </td>
        <td width='100px'>
        </td>
        <td>
        </td>
    </tr>
</table>
<asp:Panel ID="BottomPanel" runat="server" BorderStyle="Ridge">
    <table>
        <tr>
            <td align="center">
                <br />
                <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePartialRendering="true"
                    runat="server">
                </asp:ToolkitScriptManager>
                <asp:CheckBoxList runat="server" ID="GroupCheckBoxList" RepeatColumns="10" RepeatDirection="Horizontal"
                    RepeatLayout="Table" AutoPostBack="true" ClientIDMode="AutoID" OnSelectedIndexChanged="GroupCheckBoxList_SelectedIndexChanged">
                </asp:CheckBoxList>
            </td>
        </tr>
        <tr>
            <td>
                <asp:UpdatePanel ID="GroupUpdatePanel" runat="server" Visible="true" UpdateMode="conditional">
                    <ContentTemplate>
                        <asp:Panel ID="GroupGraphPanel" runat="server" Visible="true">
                        </asp:Panel>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="GroupCheckBoxList" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </td>
        </tr>
    </table>
</asp:Panel>
</asp:Content>
c# asp.net scroll updatepanel postback
4个回答
3
投票

这看起来像是您问题的答案。作为一个优点;它似乎适用于所有浏览器,而不仅仅是 FF。

http://www.c-sharpcorner.com/Blogs/11804/maintain-scroll-position-on-postback-within-updatepanel.aspx

如果您使用 IE 那么它非常简单,只需将代码放入您的 页面指令。

<%@ Page Language="C#" AutoEventWireup="true" 
 CodeFile="Default.aspx.cs" Inherits="_Default"
 MaintainScrollPositionOnPostback="true" %> 

但是它在 Firefox 中不起作用,因为你必须添加一个浏览器 文件到您的网站

右键单击解决方案资源管理器>添加新项目

选择浏览器文件并将其添加到 App_Browsers 文件夹中。

向此浏览器文件添加MaintainScrollPositionOnPostback功能 如下所写。

<browsers>
  <browser refID="Mozilla">
      <capabilities>
        <capability name="supportsMaintainScrollPositionOnPostback" value="true" />       
    </capabilities>   
  </browser>
</browsers>

有时这也不起作用,

那么一个简单的解决方案就是在网格后面添加一个空白的更新面板 onpostback 只是将焦点放在它将在其中工作的更新面板上 任何浏览器。 在cs postbackevent updatepanel1.Focus();

如果有任何问题请随时询问或任何修改回复。


1
投票

虽然我知道您不熟悉 javascript,但我仍然向您建议这个答案,因为 .net 中没有内置的解决方案,但您可以通过解决方法使用 javascript 来实现它。别担心 JavaScript 并不难,它是 Web 开发的重要组成部分之一。所以就尝试一下吧。可能对你有帮助。

您可以参考此页面:updatepanel部分回发后保持页面滚动位置

<form id="form1" runat="server">
  <asp:ScriptManager ID="SM1" runat="server" ScriptMode="Release" />
   <script type="text/javascript">
      // It is important to place this JavaScript code after ScriptManager1
      var xPos, yPos;
      var prm = Sys.WebForms.PageRequestManager.getInstance();

      function BeginRequestHandler(sender, args) {
        if ($get('<%=Panel1.ClientID%>') != null) {
          // Get X and Y positions of scrollbar before the partial postback
          xPos = $get('<%=Panel1.ClientID%>').scrollLeft;
          yPos = $get('<%=Panel1.ClientID%>').scrollTop;
        }
     }

     function EndRequestHandler(sender, args) {
         if ($get('<%=Panel1.ClientID%>') != null) {
           // Set X and Y positions back to the scrollbar
           // after partial postback
           $get('<%=Panel1.ClientID%>').scrollLeft = xPos;
           $get('<%=Panel1.ClientID%>').scrollTop = yPos;
         }
     }

     prm.add_beginRequest(BeginRequestHandler);
     prm.add_endRequest(EndRequestHandler);
 </script>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
     <asp:Panel ID="Panel1" runat="server" Height="300">
        <%-- Some stuff which would cause a partial postback goes here --%>
     </asp:Panel>
   </ContentTemplate>
 </asp:UpdatePanel>

1
投票

您可以将焦点设置在您想在屏幕上看到的控件上。

例如,如果下拉列表“ddlCity”是导致回发的控件,则在下拉列表 SelectedIndexChanged 代码后执行以下操作:

ddlCity.Focus();


0
投票

我能够通过以下技巧解决类似的问题:

将 HiddenField 控件添加到您正在使用的页面或控件。请务必将 ClientIDMode 设置为静态,以便可以在 JavaScript 中轻松访问它。我们将使用 JavaScript 来更新此控件:

<asp:HiddenField ID="scrollPosition" ClientIDMode="Static" runat="server" /> 

还添加一个面板控件作为我们将插入一些 javascript 的目标:

<asp:Panel ID="pnlScriptRunner" runat="server"></asp:Panel>

添加以下 JavaScript。通过 window.onscroll 函数,我们正在更新我们的 HiddenField 控件。 updateScrollPosition 函数将从我们后面的 C# 代码中调用:

<script> 
     window.onscroll = function () {
          var ctrl = document.getElementById("scrollPosition");
          ctrl.value = document.body.scrollTop;
          console.log(ctrl.value);
     };

     function updateScrollPosition(value) {       
         window.scrollTo(0, value);
         console.log("updating scroll position");
     }
</script> 

创建一个新的C#类并添加以下方法。这将允许我们从 C# 的代码隐藏中插入一些 Javascript:

public static class ClientScript
{
    public static void InsertScript(string script, Control target)
    {
        HtmlGenericControl s = new HtmlGenericControl();
        s.TagName = "script";
        s.InnerHtml = script;
        target.Controls.Add(s); 
    }        
}

现在,在控件或页面的代码隐藏中,通过使用我们创建的静态类将 javascript 插入到 pnlScriptRunner 中,使用 ASP.NET HiddenField 控件中的值调用 JavaScript 函数“updateScrollPosition(value)”:

    protected void btnRotate_Click(object sender, EventArgs e)
    {
         //Do stuff with controls in your update panel here, then: 
         ClientScript.InsertScript("updateScrollPosition(" + scrollPosition.Value + ");", pnlScriptRunner);
         UpdatePanel1.Update();

    }

我的 btnRotate_Click 事件在更新面板中注册为触发器:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
     <ContentTemplate>
         <b>Image Preview: </b><br />
         <asp:Image ID="img" runat="server" CssClass="profileImage" />
         <br /> 
         <br />
         <asp:Button ID="btnRotate" runat="server" Text="Rotate Image" ClientIDMode="Static" OnClick="btnRotate_Click" />
         <br />
         <br />
      </ContentTemplate>
      <Triggers>
           <asp:PostBackTrigger ControlID="btnRotate" />
      </Triggers>
</asp:UpdatePanel>

以下参考资料是必要的:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

希望这有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.