2011-01-03 5 views
33

В приложении ASP.NET MVC Я использую JQuery для размещения данных на кнопку нажмите:после запроса JQuery (не AJAX)

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

В «AddToCart» действие «корзины» контроллера я использую редирект другой Вид после публикации:

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

Все в порядке, за исключением этого перенаправления. Я остаюсь на той же странице после публикации. Я подозреваю, что это связано с запросом типа «POST» типа AJAX.

Как решить проблему с запросом POST JQuery, блокирующим перенаправление?

+0

Вы пытаетесь перенаправить на ту же страницу, которая инициирует запрос Ajax? – Corneliu

ответ

84

Я создал $.form(url[, data[, method = 'POST']]) функции, которая создает скрытую форму, заполняющую его с указанными данными и крепит его к <body>. Вот некоторые примеры:

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

С .submit() метода JQuery в вы можете создать и отправить форму с простым выражением:

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

Вот определение функции:

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

Джереми, спасибо за обмен, +1 – rem

+0

Замечательно! Я не знаю, хорошо ли это, но мне нравится это решение. +1 – Samuel

+0

Почему бы не вызвать .remove() после .submit(), чтобы предотвратить наличие нескольких скрытых форм, когда вы вызываете функцию несколько раз? – Samuel

9

$.post - вызов AJAX.

Ваш лучший выбор - сделать кнопку триггером для формы и просто представить, используя метод post.

Альтернативой может быть повторение вашего нового URL-адреса с сервера, но это поражает точку AJAX.

3

Похоже, что вы пытаетесь добавить товар в корзину, а затем перенаправить на текущей странице. Я предполагаю, что именно так вы обновляете визуальный эффект своей корзины покупок. Я бы предложил добавить обработчик успеха на ваш $ .post, а затем перенаправить на текущую страницу. Если на сервере возникает ошибка, вы можете отправить обратно сериализованную ошибку и обработать ее на стороне клиента.

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

Это обновит вашу текущую страницу после публикации ваших товаров.

Вот скрипка для справки: http://jsfiddle.net/brentmn/B4P6W/3/

1

Если вы делаете полный редирект после поста, то зачем это делать с помощью Ajax? Вы должны иметь возможность выполнять традиционный POST и успешно перенаправлять его.

Если вы действительно хотите АЯКС запрос, чтобы пройти и еще перенаправлять, очень легкий и ненавязчивый способ сделать это было бы вернуть JavascriptResult от ваших действий вместо RedirectResult:

return JavaScript("window.location = " + returnUrl); 
Смежные вопросы