当前位置 : 主页 > 网络编程 > ASP >

如何使用ASP.NET MVC让jQuery.Ajax使用重定向执行正常的POST

来源:互联网 收集:自由互联 发布时间:2021-06-24
我目前在我的页面上有一个 JSON对象,它可以在用户向其添加项目时构建.这都是在 JavaScript / jQuery中完成的. 当用户完成添加项目时,我想将此对象POST到控制器操作,并让操作使用此数据返
我目前在我的页面上有一个 JSON对象,它可以在用户向其添加项目时构建.这都是在 JavaScript / jQuery中完成的.

当用户完成添加项目时,我想将此对象POST到控制器操作,并让操作使用此数据返回强类型视图.

目前,我有jQuery.ajax POST将此JSON对象发送到Action方法,然后将此对象绑定到我的强类型模型.问题是,我实际上希望这个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视图.我的索引视图上的购物车对象完全由JavaScript构建,然后用户单击“继续检查”按钮并重定向等.

PS:我的完整工作示例可以在文章[How to POST a JSON object in MVC]中找到,我只需要更新此代码,以便它可以执行发布和重定向,如上所述

返回重定向的视图:

调节器

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();
}
网友评论