3

現在、ページに JSON オブジェクトがあり、ユーザーがアイテムを追加すると構築されます。これはすべて JavaScript/jQuery で行われます。

ユーザーが項目の追加を完了したら、このオブジェクトをコントローラー アクションに POST し、アクションがこのデータを使用して厳密に型指定されたビューを返すようにします。

現在、jQuery.ajax POST がこの JSON オブジェクトをアクション メソッドに送信し、アクション メソッドがこのオブジェクトを強く型付けされたモデルにバインドしています。問題は、JSON オブジェクトが FORM にあり、単に送信されているかのように、この jQuery.ajax POST をリダイレクトすることです。

また、バインディングが正しく機能するように contentType を「application/json」に設定できるようにする必要があるため、必要に応じてリダイレクトする jQuery.post() メソッドも使用できません。残念ながら、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 ] にあります。上記で説明したように、投稿とリダイレクトを実行できるように、このコードを更新する必要があります。

4

3 に答える 3

6

success メソッドで、 aを実行し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");

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

投稿を行い、1 つのコントローラーで検証のためにビューモデルにバインドし、そのコントローラーを別のコントローラーに投稿してすべてを検証するということですか? もしそうなら、このコードを見て 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 に答える