如何在MVC中保持滚动位置？

Question

我正在MVC的一个项目上工作,并喜欢学习它.有一些成长的痛苦,但一旦你弄清楚它并不坏.WebForms世界中一件非常简单的事情就是保持页面上的滚动位置.您所做的只是将MaintainScrollPositionOnPostback属性设置为true.但是,在MVC中,我没有使用回发,所以这对我不起作用.处理这个问题的标准方法是什么？

编辑: Ajax是可以接受的,但我也想知道如何在没有AJAX的情况下完成它.

Answer 1

我在JS中解决了这个问题:

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

然后在文件准备好了:

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

Answer 2

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应该避免回发.

Answer 3

实际上没有标准的处理方式,这是微软支持他们的回发模式的黑客行为.他们需要这个,因为每个控件都会发回一个帖子,用户会不断被推回到页面顶部.

与MVC一起使用的建议是使用AJAX将大部分回发到服务器.这样页面就不必重新渲染焦点就不会移动.jQuery使AJAX非常简单,甚至还有默认表单

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

哪个将为您处理AJAX方面的问题.