ASP.NET MVC部分查看ajax帖子？

Index.html (View)

Index.html（查看）

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

_AddCategory.cshtml (PartialView)

_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
}

Controller

调节器

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

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

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

我怎样才能做到这一点？如何使用AJAX帖子路由另一个页面？

2 个解决方案

#1

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:

不要从使用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);
    }
}

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

然后在客户端测试此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 () {

    }
});

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.

另请注意，我已经从$ .ajax（）调用中删除了dataType：'json'参数。这非常重要，因为我们并不总是返回JSON（在您的情况下，您永远不会返回JSON，因此这个参数绝对是错误的）。在我的示例中，我们仅在成功的情况下返回JSON，在失败的情况下返回text / html（PartialView）。因此，您应该让jQuery简单地使用服务器返回的Content-Type HTTP响应头来自动推断类型并相应地解析传递给成功回调的结果参数。

#2

The ajax call you made should not be able to redirect the whole page. It returns data to your asynchronous call only. If you want to perform a redirect, i

您所做的ajax调用不应该能够重定向整个页面。它仅将数据返回到异步调用。如果你想进行重定向，我

the javascript way to redirect is with window.location

javascript的重定向方式是window.location

So your ajax call should look like this:

所以你的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>

In you action method, instead of returning a partial or redirect, return Json(true);

在你的action方法中，不是返回部分或重定向，而是返回Json（true）;

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

#1