Javascript ASP.NET MVC 部分视图 ajax 帖子？

ASP.NET MVC Partial view ajax post?

提问by AliR?za Ad?yah?i

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

回答by Darin Dimitrov

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 调用的控制器操作重定向。这毫无用处。您可以将要重定向到的网址作为 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-TypeHTTP response header returned by the server to automatically deduce the type and parse the result parameter passed to your success callback accordingly.

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

回答by Dave Alperovich

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

在你的动作方法中，不是返回部分或重定向，而是返回 Json(true);

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