Databases
StackOverflow2013
Postsdbo
POHow to get jQuery.Ajax to perform a normal POST with a redirect using ASP.NET MVC
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to get jQuery.Ajax to perform a normal POST with a redirect using ASP.NET MVC
    text
    copied!<p>I currently have a JSON object on my page which gets built up as users add items to it. This is all done in JavaScript/jQuery.</p> <p>When the user is done adding items, I want to POST this object to a controller action and have the action return a strongly typed view using this data.</p> <p>Currently, I have the jQuery.ajax POST sending this JSON object to an Action Method which then binds this object to my strongly typed Model. Problem is, I actually want this jQuery.ajax POST to redirect as if the JSON object were in a FORM and simply being submitted. </p> <p>I also can't use the jQuery.post() method, which would redirect as required, as I need to be able to set the contentType to "application/json" so my binding works correctly. Unfortunately, the jQuery.post() method doesn't allow you to set this parameter. </p> <p>I've read that the jQuery.post() method basically uses the jQuery.ajax() method, so I've been battling to get the jQuery.ajax() method to redirect.</p> <p>I've also read that I can set the default contentType for all jQuery.ajax() methods which would then allow me to use the jQuery.post() method but want to try avoid this if possible.</p> <p>Thanks</p> <p><strong>Edit: Updated with Saedeas suggestion:</strong></p> <p>My JavaScript on the 'Index' View:</p> <pre><code>&lt;script language="javascript" type="text/javascript"&gt; // 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("&lt;li&gt;" + cartItem.ItemName + " - $" + itemTotal.toFixed(2) + "&lt;/li&gt;"); }); $("#TotalAmount").html("$" + totalAmount.toFixed(2)); } &lt;/script&gt; </code></pre> <p>And then the Controller Action 'ConfirmOrder'</p> <pre><code>[HttpPost] public ActionResult ConfirmOrder(ShoppingCartModel model) { return View(model); } </code></pre> <p>So when the PostDataWithRedirect() JavaScript method is called it must hit the ConfirmOrder Controller Action and be redirected to the ConfirmOrder View. The Shopping Cart object on my Index view is built up entirely in JavaScript and the user then clicks a 'Proceed to Checkout' button and is redirected etc.</p> <p>PS: My full working example can be found in an the article [ <a href="http://www.webcognoscere.com/post/2012/07/03/How-to-POST-a-JSON-object-to-a-Controller-Action.aspx" rel="nofollow">How to POST a JSON object in MVC</a> ], I just need to update this code so that it can do the post and redirect as explained above</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload