在 post 使用 asp.net 核心 3.1 MVC 和剃须刀视图后，您如何保持先前的滚动位置？

Question

如何使用 asp.net 核心 3.1 MVC（Web 应用程序）和剃刀视图在 post 之后保持先前的滚动位置？

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

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

Answer 1

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

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

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

其次，将隐藏的输入添加到用于 posting 的表单中：

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

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

   TempData["ScrollPosition"] = Model.ScrollPosition;

第四，在 post 之后重定向时，将此值设置为您的模型以在您的视图中进行绑定：

   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

Answer 2

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

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

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

在 post 使用 asp.net 核心 3.1 MVC 和剃须刀视图后，您如何保持先前的滚动位置？

How do you maintain the previous scroll position after post using asp.net core 3.1 MVC and razor views?

model-view-controller

scroll

view

razor

asp.net-core