web-dev-qa-db-ja.com

ASP.NET MVC部分ビューajaxポスト？

Index.html（表示）

<div class="categories_content_container">
    @Html.Action("_AddCategory", "Categories")
</div>

_ AddCategory.cshtml（PartialView）

<script>
    $(document).ready(function () {
        $('input[type=submit]').click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: '@Url.Action("_AddCategory", "Categories")',
                dataType: "json",
                data: $('form').serialize(),
                success: function (result) {
                    $(".categories_content_container").html(result);
                },
                error: function () {

                }
            });
        });
    });
</script>

@using (Html.BeginForm())
{
    // form elements
}

コントローラ

[HttpPost]
public ActionResult _AddCategory(CategoriesViewModel viewModel)
{
    if(//success)
    {
        // DbOperations...
        return RedirectToAction("Categories");
    }
    else
    {
        // model state is not valid...
        return PartialView(viewModel);
    }
}

質問：操作が成功した場合、別のページ（カテゴリ）にリダイレクトされると思います。しかし、アクションもエラーメッセージもありません。操作が成功しない場合、それは私の期待どおりに動作しています。

これどうやってするの？ AJAXポストを使用して別のページをルーティングするにはどうすればよいですか？

javascriptjqueryasp.net-mvcasp.net-mvc-3asp.net-mvc-4
14
AliRıza Adıyahşi

AJAXで呼び出されるコントローラーアクションからリダイレクトしないでください。無駄だ。リダイレクト先のURLをJsonResultとして返すことができます。

_[HttpPost]
public ActionResult _AddCategory(CategoriesViewModel viewModel)
{
    if(//success)
    {
        // DbOperations...
        return Json(new { redirectTo = Url.Action("Categories") });
    }
    else
    {
        // model state is not valid...
        return PartialView(viewModel);
    }
}
_

次に、クライアントでこのURLの存在をテストし、それに応じて動作します。

_$.ajax({
    type: "POST",
    url: '@Url.Action("_AddCategory", "Categories")',
    data: $('form').serialize(),
    success: function (result) {
        if (result.redirectTo) { 
            // The operation was a success on the server as it returned
            // a JSON objet with an url property pointing to the location
            // you would like to redirect to => now use the window.location.href
            // property to redirect the client to this location
            window.location.href = result.redirectTo;
        } else {
            // The server returned a partial view => let's refresh
            // the corresponding section of our DOM with it
            $(".categories_content_container").html(result);
        }
    },
    error: function () {

    }
});
_

また、$.ajax()呼び出しから_dataType: 'json'_パラメータを削除したことにも注意してください。私たちは常にJSONを返すわけではないので、これは非常に重要です（あなたの場合、JSONを決して返さなかったため、このパラメーターは完全に間違っていました）。私の例では、成功した場合にのみJSONを返し、失敗した場合は_text/html_（PartialView）を返します。したがって、jQueryを離れるには、サーバーから返された_Content-Type_ HTTP応答ヘッダーを使用してタイプを自動的に推定し、それに応じて成功コールバックに渡された結果パラメーターを解析する必要があります。

30
Darin Dimitrov

作成したajax呼び出しは、ページ全体をリダイレクトできないはずです。非同期呼び出しにのみデータを返します。リダイレクトを実行する場合は、i

リダイレクトするJavaScriptの方法はwindow.locationを使用することです

したがって、ajax呼び出しは次のようになります。

<script>
    $(document).ready(function () {
        $('input[type=submit]').click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: '@Url.Action("_AddCategory", "Categories")',
                dataType: "json",
                data: $('form').serialize(),
                success: function (result) {
                    window.location='@Url.Action("Categories")';
                },
                error: function () {

                }
            });
        });
    });
</script>

アクションメソッドでは、パーシャルまたはリダイレクトを返す代わりに、Json（true）を返します。

public ActionResult _AddCategory(CategoriesViewModel viewModel)
{
    if(//success)
    {
        return Json(true);
    }
    else
    {
        return Json(false);
    }
}
5
Dave Alperovich