2011-04-02 16 views
7

मेरे पास कुछ लिंक वाले मेनू हैं जो div content को अद्यतन करते हैं और लोड होने के बाद onSuccess फ़ंक्शन निष्पादित करते हैं।AJAX अनुरोध के बाद URL को कैसे बदलें?

<li>@Ajax.ActionLink("Home", "Index", "home")</li> 
<li>@Ajax.ActionLink("Download", "Index", "download")</li> 

अगर मैं यूआरएल /home पर हूँ और डाउनलोड सफलतापूर्वक लिंक div परिवर्तन पर क्लिक करें। समस्या यह है कि यूआरएल नहीं बदला गया है।

मैं अनुरोधित यूआरएल कैसे प्राप्त कर सकता हूं ताकि मैं सफल अनुरोधों पर history.pushState पर कॉल कर सकूं?

उत्तर

6

this question (How to get request url in a jQuery $.get/ajax request) से मुझे पता चला कि मैं इसे this.url से पुनर्प्राप्त कर सकता हूं।

MDC window.history से मैं वाक्य रचना पाया और MDC Manipulating the browser history से मैंने पाया कि मैं history.state साथ वर्तमान स्थिति (हालांकि Chrome के साथ काम नहीं लगता है) प्राप्त कर सकते हैं और पता चला कि जब pushState बुला मैं केवल stateObject पर 640k पात्रों भेज सकते हैं या फिर यह एक अपवाद फेंकता है।

सफल ajax अनुरोध के लिए मेरे वर्तमान विधि है:

OnSuccess: function(html, status, xhr){ 
    var requestedUrl = this.url.replace(/[&?]X-Requested-With=XMLHttpRequest/i, ""); 

    // if the url is the same, replace the state 
    if (window.location.href == requestedUrl) 
    { 
     history.replaceState({html:html}, document.title, requestedUrl); 
    } 
    else 
    { 
     history.pushState({html:html}, document.title, requestedUrl); 
    } 
}, 

एक बुनियादी परीक्षण मैं stateObject पर पूरे परिणाम भंडारण कर रहा हूँ के लिए, यदि यह एक अपवाद फेंकता मैं बजाय यूआरएल सेट हो जाएगा बनाने के लिए सक्षम होने के लिए एक नया अनुरोध

मेरे popstate घटना

$(window).bind("popstate", function (e) { 
    var state = e.originalEvent.state; 
    $("#body").html(state.html); 
}); 

यह पेज पुनर्स्थापित करता है के रूप में यह पहले से था, मैं एक नया अनुरोध बनाने की जरूरत नहीं है।

2

लिंक प्राप्त करने की घटना को संभालने के लिए jQuery का उपयोग करके मैं इसे प्राप्त करने के बारे में सोच सकता हूं। तो आप निम्नानुसार अपने लिंक में कक्षा विशेषता जोड़ सकते हैं;

@Ajax.ActionLink("Home", "Index", "home", new { @class = "menuLinks" }) 

अपनी क्लिक ईवेंट जोड़ें;

$(".menuLinks").click(function() { 
    history.pushState(stateObj, $(this).html, $(this).attr("href")); 
} 
नहीं

pushState हस्ताक्षर के साथ बहुत परिचित है, लेकिन मैं 'एक' टैग के href का प्रयोग मान्य url के रूप में काम pushState को पारित करने के लिए होगा विश्वास करते हैं।

संबंधित मुद्दे