मैं एमवीसी में स्क्रॉल स्थिति कैसे बनाए रखूं?

Question

मैं एमवीसी में एक परियोजना पर काम कर रहा हूं और इसके बारे में सीखने का आनंद लिया है। कुछ बढ़ती पीड़ाएं हैं लेकिन एक बार जब आप उन्हें समझते हैं तो यह बुरा नहीं होता है। वेबफॉर्म दुनिया में वास्तव में एक चीज एक पृष्ठ पर स्क्रॉल स्थिति को बनाए रखती है। आप जो भी करते हैं, उसे MaintainScrollPositionOnPostback प्रॉपर्टी को सत्य पर सेट किया गया है। हालांकि, एमवीसी में, मैं पोस्टबैक का उपयोग नहीं कर रहा हूं, इसलिए यह मेरे लिए काम नहीं करेगा। इसे संभालने का मानक तरीका क्या है?

संपादित करें: अजाक्स स्वीकार्य है, लेकिन मैं यह भी सोच रहा था कि आप AJAX के बिना इसे कैसे करेंगे।

Answer 1

तरह से काम करता है MaintainScrollPositionOnPostback

यह छुपी फ़ील्ड की एक जोड़ी है कि

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; 
} 

लेकिन जैसा कि ज्यादातर लोगों ने कहा था, एमवीसी को वैसे भी पोस्टबैक से परहेज करना चाहिए।

Answer 2

मेरा अपना वैकल्पिक हल ViewData में कुछ जानकारी उपयोग कर रहा है पता है कि क्षेत्र backnavigation में दिखाया जाना चाहिए, और एक छोटे से जावास्क्रिप्ट स्थिति पेज के कर्सर:

देखें में, इस तरह एक तत्व:

<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 इस्तेमाल कर सकते हैं क्या यह निर्धारित करने के:

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

और जावास्क्रिप्ट पेज repositionate को दृश्य पृष्ठ से तत्व आपको स्थानांतरित करना होगा।

उम्मीद है कि यह मदद करता है।

Answer 3

दरअसल इसे संभालने का कोई मानक तरीका नहीं है, यह उनके पोस्ट बैक मॉडल का समर्थन करने के लिए एक माइक्रोसॉफ्ट हैक था। उन्हें इसकी आवश्यकता थी क्योंकि प्रत्येक नियंत्रण ने एक पोस्ट वापस किया था और उपयोगकर्ता को लगातार पृष्ठ के शीर्ष पर धक्का दिया जाएगा।

एमवीसी के साथ उपयोग के लिए सिफारिश AJAX का उपयोग कर सर्वर पर वापस अपनी अधिकांश पोस्ट करना है। ताकि पृष्ठ को फोकस करने की आवश्यकता नहीं है, फोकस नहीं किया गया है। jQuery AJAX वास्तव में आसान बनाता है, और वहाँ भी है की तरह

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

डिफ़ॉल्ट रूपों कौन सा आप के लिए चीजों की AJAX के पक्ष का ख्याल रखना होगा।

Answer 4

ऐसा करने का एक बहुत अच्छा तरीका कुकीज़ का उपयोग नहीं कर रहा है।

यदि आप अपने एमवीसी में एक पृष्ठ का उपयोग करते हैं जो अन्य पृष्ठों को संभालता है तो आप उस कोड को स्निपेट कर सकते हैं जो प्रत्येक पृष्ठ को लोड करता है जो एक कुकी बनाता है (अगर अस्तित्व में नहीं है) जिसे "scrolltop" कहा जाता है। जावास्क्रिप्ट को स्वचालित रूप से इस कुकी को अपडेट करने के तरीके हैं जब उपयोगकर्ता इन घटनाओं को पकड़कर या स्क्रॉलटॉप मान देखकर ऊपर या नीचे स्क्रॉल करता है।

एक नए पृष्ठ पर आपको केवल सहेजी गई स्थिति को लोड करना होगा और 0 मिलीसेकंड में दृश्य स्क्रॉल करना होगा (मूटूल या किसी भी अजाक्स स्क्रिप्ट के साथ यह संभव होना चाहिए) और उपयोगकर्ता बिल्कुल वही होगा जहां वे थे।

मुझे एएसपी के बारे में बहुत कुछ पता नहीं है इसलिए मुझे नहीं पता कि वर्तमान वाई-स्थिति में एंकर करने के लिए कोई विधि मौजूद है या नहीं। जावास्क्रिप्ट एक तेज़ और आसान तरीका है। एचटीएमएल में एंकर एक विकल्प हो सकता है यदि आपके पास प्रत्येक तत्व एंकर किया गया था और एंकर को अन्य पृष्ठों पर पोस्ट किया गया था।,

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; 
    } 

__SCROLLPOSITIONX और __SCROLLPOSITIONY

एक पोस्टबैक पर, यह इन सेट और फिर इसे कॉल RestoreScrollPosition:

Answer 5

<% 
    if(!ViewData.ModelState.IsValid) 
    { 
%> 
    window.location.hash = 'Error'; 
<% 
    } 
%> 

<a name="Error"></a> 

Answer 6

मैंने टैग में नाम विशेषताओं का उपयोग किया। कोई जावास्क्रिप्ट इस्तेमाल नहीं किया गया।

जिस पृष्ठ पर मैं लौटना चाहता था वह < > टैग विशेषता नाम के साथ टैग था, उदा। < एक नाम = "testname" >।

पेज (देखें) मैं इस्तेमाल किया टैग < a href = से लौट आए। "<%: Request.UrlReferrer% > #testname" > वापस </एक > " Request.UrlReferrer पिछले पृष्ठ पर जाने के लिए प्रयोग किया जाता है। #testname नाम "testname" के साथ टैग करने के लिए पेज स्थिति स्क्रॉल करता है।

Answer 7

यहाँ एक सरल, शुद्ध जावास्क्रिप्ट समाधान जो मैं FF4 और IE9 केवल। में परीक्षण किया गया है

विचार यह है कि इस समाधान से शान से नीचा होना चाहिए एक पृष्ठ पर मानक #anchor टैग पर वापस आना। मैं क्या कर रहा हूँ आईएन और वाई निर्देशांक के साथ फ्लाई पर उन #anchor टैग को प्रतिस्थापित कर रहा है, फिर लोड पर, मैं बस क्वेरीस्ट्रिंग से उन मानों को पढ़ता हूं और वहां स्क्रॉल करता हूं। इस किसी कारण से विफल रहता है, ब्राउज़र अभी भी #anchor स्थिति पर नेविगेट चाहिए ...

मार्कअप:

<a href="/somecontroller/someaction/#someanchor">My Link</a> 

jQuery:

$(function() { 

// RESTORE SCROLL POSITION 
RestoreScrollPosition(); 

// SAVE SCROLL POSITION 
$('a:not(a[href^="http"])').filter('[href$="#someanchor"]').each(function() { 
    $(this).click(function() { 
     var href = $(this).attr('href').replace("#someanchor",""); 
     if (href.indexOf('?') == -1) { 
      href = href + '?x=' 
     } else { 
      href = href + '&x=' 
     } 
     href = href + window.pageXOffset; 
     href = href + '&y=' + window.pageYOffset; 
     $(this).attr('href', href); 
    }); 
}); 
} 

सहायक तरीकों में से एक जोड़े:

function RestoreScrollPosition() { 

    var scrollX = gup('x'); 
    var scrollY = gup('y'); 

    if (scrollX != null && scrollY != null) { 
     window.scrollTo(scrollX, scrollY); 
     return true; 
    } 
    return false; 
} 

function gup(name) { 
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
    var regexS = "[\\?&]" + name + "=([^&#]*)"; 
    var regex = new RegExp(regexS); 
    var results = regex.exec(window.location.href); 
    if (results == null) 
     return ""; 
    else 
     return results[1]; 
} 

यह मेरी ज़रूरतों को फिट करता है, लेकिन अधिक सामान्य/पुन: प्रयोज्य हो सकता है - मैं खुश रहूंगा

Answer 8

कोई इस पर सुधार करने के लिए ... :-) WebForms से प्रेरणा और रिचर्ड Gadsden, एक और दृष्टिकोण जावास्क्रिप्ट और फार्म संग्रह का उपयोग कर कुछ इस तरह दिखाई सकता द्वारा प्रदान की जवाब ले रहा है:

@{ 
    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); 
}); 

कोड प्रदान की गई प्रेरणा के लिए है और किसी भी तरह से सुंदर नहीं है। यह शायद कुछ अलग-अलग तरीकों से किया जा सकता है, मुझे लगता है कि यह सब नीचे आता है कि आप अपने दस्तावेज़ के स्क्रॉल टॉप मूल्य को पोस्ट में कैसे बनाए रखने का निर्णय लेते हैं। यह पूरी तरह से काम कर रहा है और क्रॉस ब्राउज़र सुरक्षित होना चाहिए क्योंकि हम स्क्रॉलिंग करने के लिए jQuery का उपयोग कर रहे हैं। मेरा मानना ​​है कि प्रदान किया गया कोड स्वयं स्पष्टीकरणपूर्ण है, लेकिन मुझे क्या हो रहा है पर एक और विस्तृत विवरण प्रदान करने में खुशी होगी, बस मुझे बताएं।

Answer 9

मैं जे एस में यह संकल्प लिया गया है:

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

फिर तैयार दस्तावेज में:

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

Answer 10

मैं नीचे दिखाया गया है की तरह .scrollTop उपयोग करते हैं, बहुत आसान है, तो यह और भी कई रूपों में साथ काम करता है देखें (मेरे पास एक बहुत लंबा दृश्य है, जो कई रूपों में टूट गया है):

सबसे पहले इस संपत्ति को मॉडल के अंदर रखें:

   public string scrollTop { get; set; } 

और ध्यान में रखते हुए, # 1 फार्म के अंदर:

   @Html.HiddenFor(m => m.scrollTop, new {@id="ScrollForm1"}) 

अंदर पर्चा # 2:

   @Html.HiddenFor(m => m.scrollTop, new {@id="ScrollForm2"}) 

अंदर पर्चा # 2:

   @Html.HiddenFor(m => m.scrollTop, new {@id="ScrollForm3"}) 

और फिर कम से दृश्य के नीचे:

$(document).ready(function() { 
    $(document).scrollTop(@Model.scrollTop); 
    $(document).scroll(function() { 
     $("#ScrollForm1").val($(document).scrollTop()); 
     $("#ScrollForm2").val($(document).scrollTop()); 
     $("#ScrollForm3").val($(document).scrollTop()); 
     }); 
    }); 

आपकी स्क्रॉल स्थिति हमेशा पोस्टबैक पर संरक्षित होती है क्योंकि @ Html.HiddenFor फ़ील्ड आपके वर्तमान स्क्रॉल को स्टोर करते हैं और इसे पोस्ट पर मॉडल पर पास करते हैं। और फिर, जब पृष्ठ आता है तो यह मॉडल से scrollTop मान प्राप्त करता है। अंत में आपका पृष्ठ वेबफॉर्म की तरह व्यवहार करेगा, सब कुछ बरकरार रहता है।

Answer 11

@{ 
 

 
} 
 

 
<html> 
 

 
<head> 
 
    <script type="text/javascript"> 
 

 
window.onload = function() { 
 
    var div = document.getElementById("dvScroll"); 
 
    var div_position = document.getElementById("div_position"); 
 
    var position = parseInt(@Request.Form("div_position")); 
 
    if (isNaN(position)) { 
 
     position = 0; 
 
    } 
 

 
    div.scrollTop = position; 
 
    div.onscroll = function() { 
 
     div_position.value = div.scrollTop; 
 
    }; 
 
}; 
 

 
</script> 
 
</head> 
 

 
<body> 
 

 
<div id="dvScroll" style="overflow-y: scroll; height: 260px; width: 300px"> 
 

 
    1. This is a sample text 
 

 
    <br /> 
 

 
    2. This is a sample text 
 

 
    <br /> 
 

 
    3. This is a sample text 
 

 
    <br /> 
 

 
    4. This is a sample text 
 

 
    <br /> 
 

 
    5. This is a sample text 
 

 
    <br /> 
 

 
    6. This is a sample text 
 

 
    <br /> 
 

 
    7. This is a sample text 
 

 
    <br /> 
 

 
    8. This is a sample text 
 

 
    <br /> 
 

 
    9. This is a sample text 
 

 
    <br /> 
 

 
    10. This is a sample text 
 

 
    <br /> 
 

 
    11. This is a sample text 
 

 
    <br /> 
 

 
    12. This is a sample text 
 

 
    <br /> 
 

 
    13. This is a sample text 
 

 
    <br /> 
 

 
    14. This is a sample text 
 

 
    <br /> 
 

 
    15. This is a sample text 
 

 
    <br /> 
 

 
    16. This is a sample text 
 

 
    <br /> 
 

 
    17. This is a sample text 
 

 
    <br /> 
 

 
    18. This is a sample text 
 

 
    <br /> 
 

 
    19. This is a sample text 
 

 
    <br /> 
 

 
    20. This is a sample text 
 

 
    <br /> 
 

 
    21. This is a sample text 
 

 
    <br /> 
 

 
    22. This is a sample text 
 

 
    <br /> 
 

 
    23. This is a sample text 
 

 
    <br /> 
 

 
    24. This is a sample text 
 

 
    <br /> 
 

 
    25. This is a sample text 
 

 
    <br /> 
 

 
</div> 
 

 
<hr /> 
 
<form method="post"> 
 
<input type="hidden" id="div_position" name="div_position" /> 
 
<input type="submit" value="Cool" /> 
 
    </form> 
 
</body> 
 
</html>

आप इस का उपयोग पोस्टबैक के बाद पुस्तक की स्थिति बनाए रखने के लिए कर सकते हैं।

स्रोत: http://www.aspsnippets.com/Articles/Maintain-Scroll-Position-of-DIV-on-PostBack-in-ASPNet.aspx