ASP.NET MVC 部分视图 ajax 帖子? [英] ASP.NET MVC Partial view ajax post?

问题描述

Index.html(查看)

@Html.Action("_AddCategory", "Categories")

_AddCategory.cshtml (PartialView)

@using (Html.BeginForm()){//表单元素}

控制器

[HttpPost]公共 ActionResult _AddCategory(CategoriesViewModel viewModel){if(//成功){//数据库操作...return RedirectToAction("类别");}别的{//模型状态无效...返回 PartialView(viewModel);}}

问题:如果操作成功，我希望重定向到另一个页面(类别).但是没有动作，没有错误信息.如果操作不成功，它会按我的预期工作.

我该怎么做?如何使用 AJAX 帖子路由另一个页面?

解决方案

不要从使用 AJAX 调用的控制器操作重定向.这毫无用处.您可以将要重定向到的网址作为 JsonResult 返回:

[HttpPost]公共 ActionResult _AddCategory(CategoriesViewModel viewModel){if(//成功){//数据库操作...返回 Json(new { redirectTo = Url.Action("Categories") });}别的{//模型状态无效...返回 PartialView(viewModel);}}

然后在客户端测试此网址的存在并采取相应措施:

$.ajax({类型:POST"，url: '@Url.Action("_AddCategory", "Categories")',数据:$('form').serialize(),成功:功能(结果){如果(result.redirectTo){//操作在服务器上成功，因为它返回//一个带有指向位置的 url 属性的 JSON 对象//你想重定向到 =>现在使用 window.location.href//将客户端重定向到此位置的属性window.location.href = result.redirectTo;} 别的 {//服务器返回一个局部视图 =>让我们刷新//我们的 DOM 的相应部分与它$(".categories_content_container").html(result);}},错误:函数(){}});

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

Index.html (View)

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

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?

解决方案

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

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

    }
});

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屋！