2011-01-03 4 views
33

Dans une application ASP.NET MVC J'utilise jQuery pour l'affichage des données sur le bouton-cliquez sur:demande post jQuery (non AJAX)

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

Dans l'action "AddToCart" du contrôleur "panier" J'utilise la redirection vers autre Vue après publication:

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

Tout va bien, sauf cette redirection. Je reste sur la même page après l'affichage. Je soupçonne que c'est dû au type de requête "POST" AJAX. Comment résoudre le problème avec la requête POST de jQuery bloquant la redirection?

+0

Essayez-vous de rediriger vers la même page qui initie la requête Ajax? – Corneliu

Répondre

84

J'ai créé une fonction $.form(url[, data[, method = 'POST']]) qui crée une forme cachée, avec les remplit données spécifiées et qu'il attache à la <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 simple expression:

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

est ici la définition de 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'); 
    } 
}); }); 
+2

Jeremy, merci pour le partage, +1 – rem

+0

Wonderful! Je ne sais pas si c'est une bonne pratique mais j'adore cette solution. +1 – Samuel

+0

Pourquoi ne pas appeler un .remove() après .submit() pour éviter d'avoir plusieurs formulaires cachés lorsque vous appelez la fonction plusieurs fois? – Samuel

9

$.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 post.

Une alternative serait de renvoyer votre nouvelle URL par le serveur, mais cela annule le point AJAX.

3

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

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

Ceci actualisera votre page actuelle après la publication de vos produits.

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

1

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

Si vous vraiment voulez une demande ajax passer par et rediriger encore, d'une manière très simple et non intrusive pour le faire serait de retourner un JavascriptResult de votre action au lieu d'un RedirectResult:

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