使用 asp.net core 3.1 MVC 和 razor 视图发布后如何保持之前的滚动位置?

在使用 asp.net core 3.1 MVC(Web 应用程序)和 razor 视图发布帖子后,如何保持之前的滚动位置?

你如何在整个网站上做到这一点?

我看到了这个: ASP.NET MVC3 Razor - Maintain scroll position on postback - 但那些对我不起作用。

stack overflow How do you maintain the previous scroll position after post using asp.net core 3.1 MVC and razor views?
原文答案
author avatar

接受的答案

首先,创建一个所有其他模型都将继承的基础视图模型

public class BaseViewModel
{
   public int ScrollPosition { get; set; }
}

所有需要记住先前滚动位置的绑定视图模型都将继承自此 BaseViewModel

其次,在用于发布的表单中添加隐藏输入:

   @using(Html.BeginForm("SomeAction", "SomeController", FormMethod.Post)
   {
      @Html.HiddenFor(x => Model.ScrollPosition)
      ....
   }

第三,在后端的 post 方法中将值设置为 TempData

   TempData["ScrollPosition"] = Model.ScrollPosition;

第四,在发布后重定向时,将此值设置为您的模型以在您的视图中进行绑定:

   MyModel.ScrollPosition = (int)TempData["ScrollPosition"];

五、使用javascript在页面加载后滚动到上一个位置:

   <script type="text/javascript">
       window.addEventListener("DOMContentLoaded", function(){
           //add event listener for the scroll event and set hidden input value for posts
           document.addEventListener('scroll', function(){
              const scrollPosY = window.scrollY;
              document.querySelector('input[name="ScrollPosition"]').value = scrollPosY;
           });
           const scrollpos = document.querySelector('input[name="ScrollPosition"]').value;
           window.scrollTo(0, scrollpos); //y-axis scroll
       });
   </script>

如果您需要跟踪 x 轴滚动以及 y 轴,则每个 x 轴和 y 轴滚动位置需要两个隐藏输入并更改模型以保持 x 和 y


答案:

作者头像

另一种方法是使用 AJAX 提交表单,并在 POST 成功后调用 window.location.reload(); 来恢复滚动位置。

function CreateItem() {
    var serializedForm = $('#formId').serialize();

    $.ajax({
        url: "item/create",
        type: "POST",
        data: serializedForm
    })
    .done(function () {
        window.location.reload();
    });
}
作者头像

首先在脚本标签中将以下 jquery 函数添加到您的页面:

$(document).scroll(function () {
    // Note scroll position.
    localStorage['pageIdentifier'] = $(document).scrollTop();
});

然后添加:

$(document).ready(function () {
    // Maintain scroll position.
    $(document).scrollTop(localStorage['healthPage']);
});