Shopping cart in mvc4 using html5 local storage and angular js

As per the suggestions on my last question. I did more research and started to code.

The flowchart I am following now is : I have a products page and partial view for Cart. ====> User adds a product by clicking add to cart ====> The Product Details are sent to ASP Controller where a model instance is created for a cart object ====> the Model Object is sent to AngularJS controller using JSON. ====> I store the data in local storage and display the same in the ASP Cart partial view ====> I can update change in quantity, calculating total, easily using Angular.

However I am not able to pass the model object from ASP Controller to Angular Controller and display the same in the partial view.


Here are the code snippets I wrote:

JS for sending the product data from Products Page to ASP Controller:

function HandleAddtoCartButton() {
$(document).on("click", "#btn-add-to-cart", function (e) {
    var productname = $(".displayproductdetails").data('name');
    var productimg = $(".displayproductdetails").data('img');
    var productprice = $(".displayproductdetails").data('price');

    $.ajaxSetup({ cache: false });
        url: "/Product/Cart",
        data: { name: productname, imgurl: productimg, price: productprice },
        cache: false,
        type: 'Post',
        success: function (data) {


My Controller Action:

    public JsonResult Cart(string name, string imgurl, string price)
        CartClass newcart = new CartClass();
        newcart.PictureImgURL = imgurl;
        newcart.ProductName = name;
        newcart.Price = float.Parse(price);
        newcart.Quantity = 1;
        return Json(newcart, JsonRequestBehavior.AllowGet);

AngularJS Controller:

    var app = angular.module('Cart', []);
app.controller('CartController', function ($scope, $http) {

    function GetCartData() {
            method: 'Get',
            url: '/Product/Cart'
        }).success(function (data, status, headers, config) {
            $scope.DisplayCart = data;
        }).error(function (data, status, headers, config) {
            $scope.message = 'Unexpected Error';

And finally my partial view:

@model IEnumerable<User_Public.Models.CartClass>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngularCart.js"></script>

<div ng-app="Cart">
    <div >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <div class="modal-body" ng-controller="CartController">
                <div ng-model="DisplayCart">

            <div class="modal-footer">

                <button type="button" class="btn btn-success"> CheckOut</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>


My doubts: 1. Passing the model object from ASP Controller to AngualarJS Controller 2. And storing it to local storage and Displaying the data in the partial view.

I am open to alternate methods and technologies to achieve this, also I just started with ASP MVC 4 and Angular JS, so please some code examples will help more. Thank you.


Going by your MVC method it is a HTTP POST, whereas your angularJS service is doing a GET. I suggest change your ASP.Net controller action method to GET else change you AngularJS code to use the $ method instead.

For using localstorage, look at some wrappers overs localstorage of web browser, like this

The cart object you're passing back from the server, into the body, should really be going to the Angular Cart Controller.

So in your cart controller: $scope.cartItems = [];

And add cart items to that array, from the $ done through either a service or in the CartController.

Your ng-controller view will then have scope reference to the angular CartController CartItems, and you can ng-repeat every cart item into a partial view. At the moment you can only have one item in the cart - if that's desired then just adapt without the array.

Need Your Help

M2Crypto - import keys from non-standard file?

python rsa m2crypto

I have a file with the public exponent and modulus in it. They're not in pem or xml or der format, they're just the values written in at their offsets.