3

我目前在我的页面上有一个 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：我的完整工作示例可以在文章 [如何在 MVC 中发布 JSON 对象] 中找到，我只需要更新此代码，以便它可以执行发布和重定向，如上所述

4

3 回答 3

6

在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"
});
于 2012-07-10T21:14:01.373 回答
4

返回一个重定向的视图：

控制器

return View("redirectionView");

看法

RedirectionView.cshtml
@{
Layout = null;
}

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

编辑

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

控制器

TempData["collectedUserData"] = collectedData;
return View("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();
}
于 2012-07-13T19:21:27.227 回答
2

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

[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中发布。

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

编辑 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)

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

于 2012-07-13T15:05:41.400 回答