ASP.NET MVCアプリでは、ボタンクリックでデータをポストするためにjQueryを使用します。
<button onclick="addProducts()">Add products</button>
....
$.post('<%= Url.Action("AddToCart", "Cart") %>',
{
...
returnUrl: window.location.href
});
「Cart」コントローラーの「AddToCart」アクションで、投稿後に別のビューへのリダイレクトを使用します。
public RedirectToRouteResult AddToCart(..., string returnUrl)
{
...
return RedirectToAction("Index", new { returnUrl });
}
このリダイレクトを除いて、すべては大丈夫です。投稿後も同じページに留まります。 AJAX "POST"リクエストのタイプによるものと思われます。
JQuery POSTリクエストがリダイレクトをブロックする問題を解決する方法は?
$.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>
_
JQueryの.submit()
メソッドを使用すると、簡単な式でフォームを作成して送信できます。
_$.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');
}
}); });
_
$.post
はAJAX呼び出しです。
最善の方法は、ボタンをフォームのトリガーにして、postメソッドを使用して送信することです。
別の方法は、サーバーから新しいURLをエコーすることですが、それはAJAXのポイントを無効にします。
JQuery.submit()を使用してフォームを送信します。 http://api.jquery.com/submit/
商品をカートに追加してから現在のページにリダイレクトしようとしているようです。私の推測では、ショッピングカートの視覚効果をどのように更新するかということです。 $ .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/
投稿後に完全なリダイレクトを行う場合、なぜAjaxでそれを行うのですか?ここで伝統的なPOSTを実行し、正常にリダイレクトさせることができるはずです。
本当にを介してajaxリクエストを通過させてリダイレクトしたい場合、アクションからJavascriptResult
の代わりにRedirectResult
を返すのが非常に簡単で邪魔にならない方法です。
return JavaScript("window.location = " + returnUrl);