Question

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

Answer 1

这看起来像是你问题的答案。作为一个加号;它似乎适用于每个浏览器而不仅仅是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中使用   存入您的网站

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

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

将KeeptainScrollPositionOnPostback功能添加到此浏览器文件中   如下所示。

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

有时候这也行不通，

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

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

Answer 2

虽然我知道你不熟悉javascript，但我仍然建议给你这个答案，因为在.net中没有内置的解决方案，但是你可以用javascript来解决它。不要担心Javascript不强硬，是Web开发的重要组成部分之一。所以试一试吧。可以帮到你。

您可以参考此页：Maintaining page scroll position after updatepanel partial postback

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

Answer 3

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

例如，如果下拉列表＆＃34; ddlCity＆＃34;是导致回发的控件，然后在下拉列表SelectedIndexChanged代码后执行以下操作：

ddlCity.Focus（）;

Answer 4

我能够通过以下黑客解决类似的问题：

将HiddenField Control添加到您正在使用的页面或控件中。确保将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函数＆＃34; updateScrollPosition（value）＆＃34;使用我们创建的静态类将javascript插入到pnlScriptRunner中，使用ASP.NET HiddenField Control中的值：

    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;

希望这有帮助！

在updatepanel部分回发后维护页面滚动位置

4 个答案: