ASP.NET MVC局部视图AJAX职位？ [英] ASP.NET MVC Partial view ajax post?

问题描述

的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);
    }
}

问题：如果操作成功，我希望重定向到另一个页面（类别）。但是，没有动作，没有错误消息。如果操作不成功，它正在像我的预期。

Question: If operation is success I expect that redirect to another page (Categories). But no action, no error message. If operation is not success, it is working like my expected.

我怎样才能做到这一点？我怎样才能与路由使用AJAX后另一页？

How can I do this? How can I route another page with using AJAX post?

推荐答案

不要从被调用时AJAX控制器动作重定向。没用的。你可以返回该URL要重定向到一个JsonResult：

Don't redirect from controller actions that are invoked with AJAX. It's useless. You could return the url you want to redirect to as a 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的presence的客户端测试和采取相应的行动：

and then on the client test for the presence of this url and act accordingly:

$.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 () {

    }
});

另请注意，我已经戒掉了数据类型：JSON参数从 $阿贾克斯（）通话。这是非常重要的，因为我们并不总是返回JSON（你的情况，你再也不会回到JSON因此这个参数是绝对错误的）。在我的例子，我们只在成功的失败的情况下，情况和的text / html （PartialView）返回JSON。所以，你应该离开的jQuery简单地使用服务器返回的内容类型 HTTP响应头为自动推断的类型和解析传递给相应的成功回调的结果参数。

Also notice that I have gotten rid of the dataType: 'json' parameter from your $.ajax() call. That's extremely important as we are not always returning JSON (in your case you were never returning JSON so this parameter was absolutely wrong). In my example we return JSON only in the case of a success and text/html (PartialView) in the case of failure. So you should leave jQuery simply use the Content-Type HTTP response header returned by the server to automatically deduce the type and parse the result parameter passed to your success callback accordingly.

这篇关于ASP.NET MVC局部视图AJAX职位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！