15

Index.html（查看）

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

_AddCategory.cshtml（部分视图）

<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 发布路由另一个页面？

4

2 回答 2

31

不要从使用 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 () {

    }
});

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

于 2013-02-02T23:10:49.380 回答
5

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

重定向的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);
    }
}
于 2013-02-02T23:04:24.547 回答