Jquery with MVC3 RemoveFromCart JSON not working
Based on the MusicStoreMVC app example I created my application very similar. Difference Being I used C# instead of razor with *.aspx files.
That being said here is the controller Code for RemoveFromCart
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult RemoveFromCart(int id)
{
// Remove the item from the cart
var cart = ShoppingCart.GetCart(this.HttpContext);
// Get the name of the album to display confirmation
string productName = EchoJobsClassesDataContext.Carts
.Single(item => item.RecordId == id).Product.ProductName;
// Remove from cart
int itemCount = cart.RemoveFromCart(id);
// Display the confirmation message
var results = new ShoppingCartRemoveViewModel
{
Message = Server.HtmlEncode(productName) +
" has been removed from your shopping cart.",
CartTotal = cart.GetTotal(),
CartCount = cart.GetCount(),
ItemCount = itemCount,
DeleteId = id
};
return Json(results);
}
The JSON results are not being passed back to the handleUpdate() in the javascript. I am posting the code below. I know there have been many answers to this but, I have tried everything to get this working and still no success.
Javascript:
<script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<%-- <script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>" type="text/javascript"></script>
--%> <script language="javascript" type="text/javascript">
function handleUpdate(results) {
var json = results.get_data()
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);
alert(data.toString());
// // Load and deserialize the returned JSON data
// var json = results.get_data();
// var data = JavaScriptSerializer.deserialize(json);
// Update the page elements
// // Update the page elements
// $('#row-' + data.DeleteId).fadeOut('slow');
// $('#cart-status').tex开发者_开发问答t('Cart (' + data.CartCount + ')');
// $('#update-message').text(data.Message);
// $('#cart-total').text(data.CartTotal);
// if (data.ItemCount == 0) {
// $('#row-' + data.DeleteId).fadeOut('fast');
// } else {
// $('#cartItem-count-' + data.DeleteId).text(data.ItemCount);
// }
// $('#cartItem-total').text(data.CartTotal);
// $('#update-message').text(data.Message);
// $('#cartItem-status').text('Cart (' + data.CartCount + ')');
}
Please Note I have commented out a lot of the code just to see whether, the results are being posted here. And I have had no success.
HEre is my Index.aspx file:
<% foreach (var item in Model.AsEnumerable())
{ %>
<%foreach (var cartItem in item.CartItems)
{%>
<tr>
<td>
<%: Html.ActionLink(cartItem.Product.ProductName, "LearnMore", "ProductDetails", new { id = cartItem.ProductId },
null)%>
</td>
<td>
<%: Html.DisplayFor(cartitem => cartItem.Product.ProductPrice) %>
</td>
<td id="cartItem-count-<%:cartItem.RecordId %>">
<%: Html.DisplayFor(caritem => cartItem.Count) %>
<%: Ajax.ActionLink("Remove Count", "RemoveFromCart", new { id = cartItem.RecordId }, new AjaxOptions { OnSuccess = "handleUpdate", HttpMethod = "Post" })%>
</td>
<td id="row-<%:cartItem.RecordId %>">
<%: Ajax.ActionLink("Remove From Cart", "RemoveFromCart/" + cartItem.RecordId, new AjaxOptions { OnSuccess = "handleUpdate", HttpMethod = "Post" })%>
</td>
</tr>
<%} %>
<tr>
<td>
Total
</td>
<td id="cart-total">
<%: Html.DisplayFor(modelItem => item.CartTotal) %>
</td>
</tr>
If I refresh the page then everything seems to be working but not, with JSON. Please forgive me I am new to MVC and JSON. This is driving me up the wall.
Thanks.
精彩评论