2011-01-03 29 views
33

In un'applicazione ASP.NET MVC che uso jQuery per la pubblicazione dei dati sul tasto del mouse:jQuery richiesta POST (non AJAX)

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

In azione "addToCart" di controllo "Carrello" Io uso il reindirizzamento a un'altra vista dopo la pubblicazione:

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

Tutto ok, tranne questo reindirizzamento. Rimango sulla stessa pagina dopo aver postato. Sospetto che sia dovuto al tipo AJAX di richiesta "POST".

Come risolvere il problema con la richiesta POST jQuery che blocca il reindirizzamento?

+0

Stai provando a reindirizzare alla stessa pagina che avvia la richiesta Ajax? – Corneliu

risposta

84

ho creato una funzione $.form(url[, data[, method = 'POST']]) che crea una forma nascosta, viene compilato con i dati specificati e lo collega al <body>. Ecco alcuni esempi:

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

Con il metodo di jQuery .submit() è possibile creare e inviare un modulo con una semplice espressione:

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

Ecco la definizione della funzione:

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, grazie per aver condiviso, +1 – rem

+0

Meraviglioso! Non so se è una buona pratica, ma adoro questa soluzione. +1 – Samuel

+0

Perché non chiamare un .remove() dopo .submit() per evitare di avere più moduli nascosti quando si chiama la funzione un paio di volte? – Samuel

9

$.post è una chiamata AJAX.

La soluzione migliore è rendere il pulsante un trigger per un modulo e inviarlo utilizzando il metodo post.

Un'alternativa sarebbe quella di echo il tuo nuovo URL dal server, ma che sconfigge il punto di AJAX.

3

Sembra che si sta tentando di aggiungere i prodotti al carrello e quindi reindirizzare alla tua pagina corrente. La mia ipotesi è che è così che stai aggiornando l'effetto visivo del tuo carrello. Vorrei suggerire di aggiungere il gestore di successo sul tuo $ .post e poi reindirizzare alla pagina corrente. Se si verifica un errore sul server, è possibile restituire l'errore serializzato e gestirlo lato client.

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

Questo aggiornerà la pagina corrente dopo l'invio dei prodotti.

Ecco un violino per riferimento: http://jsfiddle.net/brentmn/B4P6W/3/

1

Se stai facendo un redirect pieno dopo un post, allora perché farlo con l'Ajax? Dovresti essere in grado di eseguire un POST tradtional qui e farlo reindirizzare correttamente.

Se davvero vuole una richiesta Ajax per passare attraverso e ancora reindirizzare, un modo molto semplice e non intrusivo per farlo sarebbe quello di restituire un JavascriptResult dalla tua azione al posto di un RedirectResult:

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