如何让 jQuery.Ajax 使用 ASP.NET MVC 执行带有重定向的普通 POST

Question

我目前在我的页面上有一个 JSON 对象，当用户向其中添加项目时，该对象就会建立起来。这一切都在 JavaScript/jQuery 中完成。

当用户完成添加项目后，我想将此对象发布到控制器操作，并让操作使用此数据返回强类型视图。

目前，我有 jQuery.ajax POST 将这个 JSON 对象发送到一个动作方法，然后将该对象绑定到我的强类型模型。问题是，我实际上希望这个 jQuery.ajax POST 重定向，就好像 JSON 对象在一个 FORM 中并且只是被提交一样。

我也不能使用 jQuery.post() 方法，它会根据需要重定向，因为我需要能够将 contentType 设置为“application/json”，这样我的绑定才能正常工作。不幸的是，jQuery.post() 方法不允许您设置此参数。

我读到 jQuery.post() 方法基本上使用 jQuery.ajax() 方法，所以我一直在努力让 jQuery.ajax() 方法重定向。

我还读到我可以为所有 jQuery.ajax() 方法设置默认的 contentType，这将允许我使用 jQuery.post() 方法，但如果可能的话想尽量避免这种情况。

谢谢

编辑：更新了 Saedeas 的建议：

“索引”视图上的我的 JavaScript：

<script language="javascript" type="text/javascript">

    //  Initialize the Shopping Cart object
    var m_ShoppingCart = {
        UserId: 10,
        DeliveryInstructions: "Leave at front desk",
        CartItems: []
    };

    $(document).ready(function () {
        $.extend({
            postJSON: function (url, data, callback) {
                return $.ajax({
                    type: "POST",
                    url: url,
                    data: JSON.stringify(data),
                    success: callback,
                    dataType: "json",
                    contentType: "application/json",
                    processData: false
                });
            }
        });
    });

    function PostDataWithRedirect() {
        var url = '@Url.Action("ConfirmOrder", "Store")';
                $.postJSON(url, m_ShoppingCart, function () { });
    }

    function AddToCart(id, itemName, price, quantity) {

        //  Add the item to the shopping cart object
        m_ShoppingCart.CartItems.push({
            "Id": id,
            "ItemName": itemName,
            "Price": price.toFixed(2), //   Issue here if you don't specify the decimal     place
            "Quantity": quantity
        });

        //  Render the shopping cart object
        RenderShoppingCart();
    }



    function RenderShoppingCart() {

        $("#CartItemList").html("");

        var totalAmount = 0;

        $.each(m_ShoppingCart.CartItems, function (index, cartItem) {

            var itemTotal = Number(cartItem.Price) * Number(cartItem.Quantity);
            totalAmount += itemTotal;

            $("#CartItemList").append("<li>" + cartItem.ItemName + " - $" +     itemTotal.toFixed(2) + "</li>");
        });

        $("#TotalAmount").html("$" + totalAmount.toFixed(2));
    }
</script>

然后是控制器动作“ConfirmOrder”

[HttpPost]
public ActionResult ConfirmOrder(ShoppingCartModel model)
{
    return View(model);
}

所以当 PostDataWithRedirect() JavaScript 方法被调用时，它必须点击 ConfirmOrder 控制器动作并被重定向到 ConfirmOrder 视图。我的 Index 视图上的 Shopping Cart 对象完全是用 JavaScript 构建的，然后用户单击“Proceed to Checkout”按钮并被重定向等。

PS：我的完整工作示例可以在文章 [How to POST a JSON object in MVC] 中找到，我只需要更新此代码，以便它可以按照上述说明进行发布和重定向

Answer 1

在success方法中，做一个location.href = "TARGET LOCATION"使页面转到TARGET LOCATION。

$.ajax({
    url: myurl,data,
    data: myData,
    // processData: false, // you may need this option depending on service setup
    success: function(){
        location.href = "TARGET LOCATION";
    },
    type: "POST",
    contentType: "application/json"
});

Answer 2

返回一个重定向的视图：

控制器

return View("redirectionView");

查看

RedirectionView.cshtml
@{
Layout = null;
}

<script type="text/javascript">
  alert("Success! Redirecting...");
  window.location = "./";
</script>

编辑

为了适应数据保留，请使用 tempdata。

控制器

TempData["collectedUserData"] = collectedData;
return View("redirectionView");

RedirectionView.cshtml

@{
Layout = null;
}

<script type="text/javascript">
 alert("Success! Redirecting...");
 window.location = "./Rebuilder/ActionMethod";
</script>

控制器重建器

public ActionResult ActionMethod()
{
 if( TempData.ContainsKey("collectedUserData") )
 {
  var collectedData = TempData["collectedUserData"];
 }
 //todo: use else clause to catch data not present
         use collectedData to build new view
 return View();
}

Answer 3

也许我没有关注这个问题，但为什么经典的帖子、重定向、获取模式不起作用？

[HttpGet]
public ActionResult WhateverActionName()
{
    YourViewModel yvm = new YourViewModel();
    //Initalize viewmodel here
    Return view(yvm);
}

[HttpPost]
public ActionResult WhateverActionName(YourViewModel yvm)
{
    if (ModelState.IsValid) {
        RedirectToAction("OtherAction", "OtherController")
    }
    return View(yvm);
}

您的意思是您想要发布一个帖子，将其绑定到视图模型以在一个控制器中进行验证，然后将该控制器发布到另一个验证所有内容的控制器？如果是这样，我建议查看此代码以在 c# http://geekswithblogs.net/rakker/archive/2006/04/21/76044.aspx 中发布。

编辑：或者，如果其他控制器操作并不真正需要发布，您可以将数据放在临时数据对象中。

编辑 2：等等，问题是如何用 jquery 发帖？如果是这样，

$("#YourForm").submit(function () {
        $.post('@Url.Action("WhateverActionName", "YourController")';
    });
});

注意：可能是小的语法错误，但接近那个。 @Url.Action 是重要的部分。

编辑 3：这应该终于可以工作了。

jQuery.extend({
    postJSON: function(url, data, callback) {
      return jQuery.ajax({
        type: "POST",
        url: url,
        data: JSON.stringify(data),
        success: callback,
        dataType: "json",
        contentType: "application/json",
        processData: false
      });
    }
  });

在您的视图中将其称为

$.postJSON('@URL.Action("Action", "Controller")', yourJson, callback)

然后在控制器内部重定向。