¿Cómo cambiar la URL después de una solicitud de Ajax?

Question

Tengo un menú con algunos enlaces que actualizan el div content y ejecutan la función onSuccess después de cargarlo.

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

Si estoy en la url /home y haga clic en el enlace de descarga en los cambios div éxito. El problema es que la URL no se cambia.

¿Cómo puedo recuperar la URL solicitada para que pueda llamar al history.pushState en solicitudes exitosas?

Answer 1

De this question (How to get request url in a jQuery $.get/ajax request) Descubrí que puedo recuperarlo con this.url.

De MDC window.history me encontré con la sintaxis y de MDC Manipulating the browser history He descubierto que puedo conseguir el estado actual con history.state (no parece funcionar en Chrome aunque) y descubrieron que cuando se llama a pushState sólo puedo enviar 640K caracteres en la stateObject o si no arroja una excepción.

Mi método actual de peticiones ajax éxito es:

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

Para una prueba básica que estoy almacenando el resultado completo de la stateObject, si se produce una excepción que se ajustará la URL en lugar de ser capaz de hacer una nueva solicitud.

Mi caso es popstate

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

Restaura la página como lo fue anteriormente, no necesito hacer una nueva solicitud.

Answer 2

La única forma en que puedo pensar en lograr esto es mediante el uso de jQuery para manejar el evento click de los enlaces. Por lo tanto, podría agregar un atributo de clase a sus enlaces de la siguiente manera;

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

The add your click event;

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

No

muy familiarizados con la firma pushState pero creo que con el href de la 'a' etiqueta funcionará como una URL válida para pasar a la pushState.