After receiving suggestions on my previous question, I delved into further research and began the coding process.
The flowchart I am currently following is as follows:
I have a products page and a partial view for the Cart.
====> When a user clicks "add to cart," the product details are sent to an ASP Controller where a model instance is created for a cart object.
====> The Model Object is then sent to an AngularJS controller using JSON.
====> I store the data in local storage and display it in the ASP Cart partial view.
====> Updating changes in quantity and calculating totals is easily done using Angular.
However, I am facing difficulty in passing the model object from the ASP Controller to the Angular Controller and displaying it in the partial view.
=================================================================================
Here are snippets of the code that I have written:
JavaScript for sending 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';
});
}
});
Lastly, 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">×</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 concerns:
1. Passing the model object from ASP Controller to AngularJS Controller
2. Storing it in local storage and displaying the data in the partial view.
I am open to alternative methods and technologies to achieve this. Since I am new to ASP MVC 4 and Angular JS, any additional code examples would be greatly appreciated.
Thank you.