Shopping cart in asp.net 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 });
    $.ajax({
        url: "/Product/Cart",
        data: { name: productname, imgurl: productimg, price: productprice },
        cache: false,
        type: 'Post',
        success: function (data) {
            $('body').append(data);
        }
    });
})

}

My Controller Action:

[HttpPost]
    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) {
    GetCartData()

    function GetCartData() {
        $http({
            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>
            <div class="modal-body" ng-controller="CartController">
                <div ng-model="DisplayCart">

                </div>
            </div>
            <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>

            </div>
        </div>
    </div>
</div>

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.

Answers


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 $http.post method instead.

For using localstorage, look at some wrappers overs localstorage of web browser, like this https://github.com/grevory/angular-local-storage


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 $http.post 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.