我是 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>
这看起来像是您问题的答案。作为一个优点;它似乎适用于所有浏览器,而不仅仅是 FF。
如果您使用 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();
如果有任何问题请随时询问或任何修改回复。
虽然我知道您不熟悉 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>
您可以将焦点设置在您想在屏幕上看到的控件上。
例如,如果下拉列表“ddlCity”是导致回发的控件,则在下拉列表 SelectedIndexChanged 代码后执行以下操作:
ddlCity.Focus();
我能够通过以下技巧解决类似的问题:
将 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;
希望这有帮助!