Demande de publication jQuery (pas AJAX)

Dans une application ASP.NET MVC, j'utilise jQuery pour poster des données en cliquant avec bouton:

<button onclick="addProducts()">Add products</button> .... $.post('<%= Url.Action("AddToCart", "Cart") %>', { ... returnUrl: window.location.href });

Dans l'action "AddToCart" du contrôleur "Cart", j'utilise la redirection vers une autre vue après publication:

  public RedirectToRouteResult AddToCart(..., string returnUrl) { ... return RedirectToAction("Index", new { returnUrl }); }

Tout est correct, sauf cette redirection. Je reste sur la même page après la publication. Je soupçonne que cela est dû au type de demande "POST" AJAX.

Comment résoudre le problème avec la requête jQuery POST bloquant la redirection?

J'ai créé une fonction $.form(url[, data[, method = 'POST']]) qui crée une forme cachée, la remplit avec les données spécifiées et l'attache à <body> . Voici quelques exemples:

 $.form('/index') <form action="/index" method="POST"></form>

 $.form('/new', { title: 'Hello World', body: 'Foo Bar' }) <form action="/index" method="POST"> <input type="hidden" name="title" value="Hello World" /> <input type="hidden" name="body" value="Foo Bar" /> </form>

 $.form('/info', { userIds: [1, 2, 3, 4] }, 'GET') <form action="/info" method="GET"> <input type="hidden" name="userIds[]" value="1" /> <input type="hidden" name="userIds[]" value="2" /> <input type="hidden" name="userIds[]" value="3" /> <input type="hidden" name="userIds[]" value="4" /> </form>

 $.form('/profile', { sender: { first: 'John', last: 'Smith', postIds: null }, receiver: { first: 'Foo', last: 'Bar', postIds: [1, 2] } }) <form action="/profile" method="POST"> <input type="hidden" name="sender[first]" value="John"> <input type="hidden" name="sender[last]" value="Smith"> <input type="hidden" name="receiver[first]" value="John"> <input type="hidden" name="receiver[last]" value="Smith"> <input type="hidden" name="receiver[postIds][]" value="1"> <input type="hidden" name="receiver[postIds][]" value="2"> </form>

Avec la méthode .submit() de jQuery, vous pouvez créer et soumettre un formulaire avec une expression simple:

 $.form('http://stackoverflow.com/search', { q: '[ajax]' }, 'GET').submit();

Voici la définition de la fonction:

 jQuery(function($) { $.extend({ form: function(url, data, method) { if (method == null) method = 'POST'; if (data == null) data = {}; var form = $('<form>').attr({ method: method, action: url }).css({ display: 'none' }); var addData = function(name, data) { if ($.isArray(data)) { for (var i = 0; i < data.length; i++) { var value = data[i]; addData(name + '[]', value); } } else if (typeof data === 'object') { for (var key in data) { if (data.hasOwnProperty(key)) { addData(name + '[' + key + ']', data[key]); } } } else if (data != null) { form.append($('<input>').attr({ type: 'hidden', name: String(name), value: String(data) })); } }; for (var key in data) { if (data.hasOwnProperty(key)) { addData(key, data[key]); } } return form.appendTo('body'); } }); });

$.post est un appel AJAX.

Votre meilleur pari est de faire du bouton un déclencheur pour un formulaire et de le soumettre en utilisant la méthode de publication.

Une alternative serait de faire écho à votre nouvelle URL du serveur, mais cela défaite le point d'AJAX.

Utilisez jQuery.submit () pour envoyer le formulaire: http://api.jquery.com/submit/

Il semble que vous essayez d'ajouter des produits au panier, puis vous redirigez vers votre page actuelle. Je suppose que c'est la façon dont vous mettez à jour l'effet visuel de votre panier. Je suggère d'ajouter le gestionnaire de succès sur votre $ .post et ensuite de rediriger vers la page actuelle. Si une erreur se produit sur le serveur, vous pouvez renvoyer l'erreur sérialisée et la gérer côté client.

 function addProducts() { $.post('<%= Url.Action("AddToCart", "Cart") %>',{ returnUrl: window.location.href }, function(data){ window.location.href = window.location.href }); }

Cela rafraîchira votre page actuelle après la publication de vos produits.

Voici un violon pour la référence: http://jsfiddle.net/brentmn/B4P6W/3/

Si vous effectuez une redirection complète après une publication, alors pourquoi le faire avec Ajax? Vous devriez être en mesure d'effectuer un POST traditionnel ici et de le rediriger avec succès.

Si vous voulez vraiment qu'une requête ajax soit diffusée et qu'elle soit toujours redirigée, une façon très simple et non intrusive de faire cela serait de renvoyer un JavascriptResult de votre action au lieu d'un RedirectResult :

 return JavaScript("window.location = " + returnUrl);