POST成功時にjQueryフェードインを表示する

Question

ユーザーがフォームにデータを保存するときに、次のdivを（fadeIn/fadeOutを介して）表示しようとしています。

// Display a notification if the save is successful. 
$('<div class="save-alert">The current scenario has been saved.</div>') 
    .insertAfter($('#main')) 
    .fadeIn('slow') 
    .animate({ opacity: 1.0 }, 3000) 
    .fadeOut('slow', function() { 
    $(this).remove(); 
}); 

現在、私はHtml.BeginFormヘルパーを使用してフォームを送信しています。このため、私のページ全体が掲載されており、上記の通知を表示することはできません。私はAjax.BeginFormを使用することができたが、他の問題に遭遇する（つまり、シナリオを保存した後にreturn RedirectToAction("Index", new { id = scenario.ScenarioID });を実行できない）。

私は何か他に何か提案がありますか？

Answer 1

私はあなたがajaxルートを避けたいと思っています。その場合は、メッセージ文字列をクッキーに入れ、ビュー内にメッセージの有無をテストします。メッセージがある場合は、それを表示します。それはCookie内にあるので、成功した投稿を処理した後にリダイレクトしてもメッセージを取得できます。あなたはメッセージを表示した後、必ずクッキーをクリアしてください！

私たちは私の会社でこのプロセスを正式化し、それを "フラッシュ"（Ruby on Railsのように使用していた、またはおそらくそうであるようなもの）と呼んでいます。

理想的には、メッセージ設定、検索、および表示ロジックをヘルパークラスにラップして、その実装をビューから抽象化することができます。そうすれば、クッキー、ビューデータ、またはセッション値を使用することができ、ビューとコントローラは動作を変更する必要はありません。

Answer 2

jquery.post()を使用して、ページがリロードされないようにバックグラウンドポストを提供する必要があると思います。

http://api.jquery.com/jQuery.post/

Answer 3

まあ、私はAJAXを経由して、それを提出拒否し、実行します。

$('#form').submit(function() 
{ 
    return false; 

    $.post('test.php', $(this).serialize(), function(data) 
    { 
    //Do your stuff. Data is the POST response data. 
    }); 
}); 

幸運を！

Answer 4

URLを返し、クライアント側でリダイレクトします。 JsonResultまたはその他を使用して、MVCのデータをクライアントに送り返すことができます。