html:如何在MVC中保持滚動位置？

MaintainScrollPositionOnPostback的工作方式是它具有一對隱藏欄位： __SCROLLPOSITIONX和__SCROLLPOSITIONy

在迴發中設置這些內容，

function WebForm_GetScrollY() {
if (__nonMSDOMBrowser) {
    return window.pageYOffset;
}
else {
    if (document.documentElement && document.documentElement.scrollTop) {
        return document.documentElement.scrollTop;
    }
    else if (document.body) {
        return document.body.scrollTop;
    }
}
return 0;
}
function WebForm_SaveScrollPositionSubmit() {
    if (__nonMSDOMBrowser) {
        theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;
        theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;
    }
    else {
        theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
        theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
    }
    if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {
        return this.oldSubmit();
    }
    return true;
    }

然後呼叫RestoreScrollPosition：

function WebForm_RestoreScrollPosition() {
    if (__nonMSDOMBrowser) {
        window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
    }
    else {
        window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
    }
    if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
        return theForm.oldOnLoad();
    }
    return true;
}

但是，正如大多數人所說的那樣，MVC還是應该避免迴發。

我已经在JS中解決了這个問题：

$(document).scroll(function(){
    localStorage['page'] = document.URL;
    localStorage['scrollTop'] = $(document).scrollTop();
});

然後準備好文件：

$(document).ready(function(){
    if (localStorage['page'] == document.URL) {
        $(document).scrollTop(localStorage['scrollTop']);
    }
});

實際上，没有標準的處理方法，這是支援其迴發模型的Microsoft黑客.他们之所以需要這樣做，是因為每个控制元件都執行了迴發操作，並且使用者將不斷被推迴到頁面頂部.

与MVC一起使用的建議是使用AJAX將大部分帖子發迴到服務器上.這樣就不必重新渲染頁面，焦點也不会移動. jQuery使AJAX變得非常簡單，甚至還有預設形式，如

<% Ajax.BeginForm(...) %>

這將為您解決AJAX方面的問题。

从webForms和Richard Gadsden提供的答案中汲取靈感，另一種使用javascript和表單集合的方法如下所示：

@{
    var scrollPositionX = string.Empty;        
    if(IsPost) {
        scrollPositionX = Request.Form["ScrollPositionX"];
    }
}
<form action="" method="post">
    <input type="hidden" id="ScrollPositionX" name="ScrollPositionX" value="@scrollPositionX" />
    <input type="submit" id="Submit" name="Submit" value="Go" />
</form>
$("#Submit").click(function () {
    $("#ScrollPositionX").val($(document).scrollTop());
});
$("#ScrollPositionX").each(function () {
    var val = parseInt($(this).val(), 10);
    if (!isNaN(val))
        $(document).scrollTop(val);
});

所提供的代碼仅供參考，绝不修飾.可能可以通過几種不同的方式完成此操作，我想這全都取決於您決定如何在POST中持久儲存文件的scrollTop值.由於我们使用jQuery进行滚動，因此它可以完全正常工作，並且應该是跨瀏覽器安全的.我相信所提供的代碼是不言自明的，但是我很乐意為您提供更详细的描述，只是让我知道。

我自己的解決方法是在 ViewData中使用一些資訊 知道必须在向後匯航中顯示哪个區域，以及一些Javascript来定位頁面的游標：

在视圖中，像這樣的元素：

<h3 id="tasks">
    Contained tasks
</h3>

以及用於重新定位頁面的javascript：

<script type="text/javascript">
    addOnLoad(goAnchor);
    function goAnchor() {
        var paging = <%= //Here you determine (from the ViewData or whatever) if you have to position the element %>;
        if (paging == "True") {
            window.location.hash = "tasks";
        }
</script>

您可以使用 switch 確定必须从视圖頁面中重新定位的元素。

希望有帮助。