ASP.NET异步回滚维持滚动位置致后端事件失效及解决

问题场景 #

为了在ASP.NET异步回发后维持屏幕滚动位置，我尝试使用一段JS代码，但引入后后端逻辑停止工作——比如点击chkNotKnown复选框无法触发CheckedChanged事件，移除这段JS代码后事件恢复正常。

最初尝试的实现代码 #

维持滚动位置的JS代码 #

最初针对UpdatePanel元素编写的代码：

<script type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('#UpdatePanel_1').scrollLeft;
        yPos = $get('#UpdatePanel_1').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('#UpdatePanel_1').scrollLeft = xPos;
        $get('#UpdatePanel_1').scrollTop = yPos;
    }
</script>

后续调整为针对divScroll元素获取滚动位置，但问题依旧：

<script type="text/javascript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {
        xPos = $get('divScroll').scrollLeft;
        yPos = $get('divScroll').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $get('divScroll').scrollLeft = xPos;
        $get('divScroll').scrollTop = yPos;
    }
</script>

对应的ASPX页面代码 #

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" MaintainScrollPositionOnPostback="True" %>

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel_1">
    <ProgressTemplate>
        <div class="modal_1">
            <div class="center">
                <img alt="" src="Loader.gif" />
            </div>
        </div>
        </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdatePanel runat="server" ID="UpdatePanel_1">
    <ContentTemplate>
        <div class="divScroll">
        <div class="container">
            <div class="row">
                <div class="col-md-3">   
                    <div class="CustomDiv">     
                        性别
                    </div>
                </div>

                <div class="col-md-3">  
                    <div class="CustomDiv">           
                        <asp:TextBox ID="txtGender" runat="server" Height="40px" Width="100%"></asp:TextBox>
                    </div>
                </div>
    
                <div class="col-md-3">   
                    <div class="">                
                        <asp:CheckBox ID="chkNotKnown" runat="server" AutoPostBack="True" Text="&nbsp;&nbsp;(未知)" Font-Bold="False" />
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="cssErrorMsg">                
                        <asp:RequiredFieldValidator ID="rfvGender" runat="server" 
                            ControlToValidate="txtGender" ErrorMessage="性别必填" 
                            InitialValue="" BackColor="Yellow"></asp:RequiredFieldValidator>
                    </div>
                </div>
            </div>
        </div>
        </div>
    
    </ContentTemplate>
        <Triggers>
            <%--<asp:PostBackTrigger ControlID = "txtGender" />--%>
        </Triggers>
</asp:UpdatePanel>
</form>

后端VB.NET代码 #

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub chkNotKnown_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chkNotKnown.CheckedChanged

    With txtGender
        If chkNotKnown.Checked Then
            .Text = "Not Known"
            .Enabled = False
        Else
            .Text = ""
            .Enabled = True
        End If
        .Focus()
    End With
End Sub
End Class

问题反馈与最终解决方案 #

调整原代码后仍无法正常维持滚动位置，最终更换为以下方案解决问题：

前端ASPX新增代码 #

<script type="text/javascript">  
var xPos, yPos, needScroll;  
var prm = Sys.WebForms.PageRequestManager.getInstance();  
prm.add_beginRequest(BeginRequestHandler);  
prm.add_pageLoaded(EndRequestHandler)  

function BeginRequestHandler(sender, args) {  
    xPos = 0;  
    yPos = window.pageYOffset || document.documentElement.scrollTop;  
}  

function EndRequestHandler(sender, args) {  
    if (needScroll) {  
        window.setTimeout("window.scrollTo(" + xPos + "," + yPos + ")", 100);  
    }  
}  
</script>  

后端Page_Load事件添加代码 #

ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "ScrollTo", "var needScroll = true;", True)

内容的提问来源于stack exchange，提问作者Sixthsense