Part 30: Buy Product and Cart Functionality

In this article I will show you how to implement Cart functionality for E-commerce with Buy product action link. Open MobileApplication project and update ProductDetails controller shown below. AllowAnonymous attribute allow action method to accessible by anyone and no authentication required to access it. Basically, I want to allow all users to visit Index page where users can see what all products available for online purchase and Details view to check details of specific product. If user want to purchase anything then User needs to register first.
For Cart functionality I'm using Database tables, combination of session and database table also used . Session I didn't cover here and will show you in later article. Download source code from here

Index view of productDetails visible to all user.

Open details view of ProductDetails controller and update as shown below.

Run application and check browser (Details view)

  Click on Details action view.

Details view not showing product Buy link, to view Buy link login first and come back again to details view.

  After login Details page of ProductController shown below with buy action link.

Add Cart model in model’s folder highlighted below.

  Update MobileDbContext class for newly added model which creates database table after migration.

Open package manager console and run below commands of Add-Migration and Update Database.

  Add cart repository and implement interface members shown below. Click on image to view source code properly.

Add CartProductRepository and implement interface members.

  Update ProductDetails repository shown below, if source code not visible please click on image or check code available on github.

Update ContainerConfiguration class for dependency mappings.

Add cart controller with below action method.

Add below action method in cart controller.

Add Index view for Index action method of Cart controller.

Add empty view for above index method and append below piece of code in Index View.

Add JavaScript function in Index view of Cart controller.

Update Details view of ProductDetails controller. Add JavaScript function for Buy action link in details view shown below.

  Register new User with App user Role. I shown you how to manage roles for new User in previous article.

Login with created user after assigning AppUser role.

On successful login below view from Productdetails controller gets rendered. Click on details View

Click on Cart action link available on header. 8800 is price of 2 items shown in row from below screen.

In next article will work on designing and adding more items to cart with remove functionality.