ASP.NET MVC Shopping Cart with C#, EF, SQL Server-Part2

By | November 21, 2016

In this series of ASP.NET MVC Shopping Cart Application, Part-1 covered most of the administrative features including Category/Product Management and Project Initial Setup.

Complete Source Code for the ASP.NET MVC Shopping Cart application is now available to download here. You just need to be a REGISTERED Member to download Source Code. Registration is FREE 🙂

Features we are about to cover in Part-2 for ASP.NET MVC Shopping Cart Application can be categorized in three major areas:

  • User Registration and Authentication
    • Register a New User
    • Login User
  • Product Display Center
    • Displaying Feature Products
    • Display Product by Category
    • Product List View
    • Single Product Detailed View
    • Search Products
  • Online Shopping Cart Management
    • Add Products to Cart
    • Cart View – List of Products added to Shopping Cart
    • Remove Products from Shopping Cart

But along with that you need to prepare your practical skills on ASP.NET MVC technology.You can also find more related implementation details here:

User will land on home page by running the application. Below is the home page view.Shopping Cart Homepage

ASP.NET MVC Shopping Cart Application homepage contains “Login” and “Registration” links on top right. Also, a user can search products by category using “Browse Categories”  link and Searching Category/Products easily by name. Products those are marked as featured products are displayed in a slider view at the bottom of homepage.

Let’s start understanding the above mentioned features implementations using a step by step approach starting with User Registration and Authentication.

User Registration and Authentication:

User Registration is not a compulsory step for browsing the categories and products. But once the user add items to his/her Shopping Cart and wants to checkout, he/she will be redirected to “Login” page to authenticate. And if a user is not even registered, he/she will be moved to Sign Up for registration. User can also Sign Up by clicking on “SIGN UP” link at top right link.

Following is a simple and typical Sign Up screen with First Name, Last Name, Email Address and Password. User will provide these basic details and he/she will be registered with our Application.
Sign Up for ASP.NET MVC Shopping Cart

A registered user can easily click on Login link, a Login popup will appear with Email as username and Password.MVC Shopping Cart Login

User puts his valid details and after submitting, he/she will be redirected accordingly with top right menu as welcome message, Cart Items and Logout links. The menu will be changed to:
Logged In View for Homepage

Let’s go through the code For “Registration”. Add a controller named “AccountController” to our  project having an Action method “Register” in it (detailed code as follows).

Add view of “Register” action with following code:

User Login

Add partial view “_Login” in “Shared” folder as:
User Login Partial View
Login for MVC Shopping Cart
Add following code in it:

Add following code in “AccountController” to execute the login action:

Below the search box, there is a slider of featured Products.

Product Display Center for ASP.NET MVC Shopping Cart

To create the home page, you need to create “HomeController” in controllers folder. Do it as follows:

Right click on controllers folder and click on add new controller.

Shopping Cart Home Controller

It will create a Controller class as:

Adding “HomePage” view

Add Index view by clicking on “Index” Action as:

ASP.NET MVC View for Shopping Cart

add following code in the index view

Add the following code “Index” action:
Exam: 70-486

Search Section

Enter any product name or category name and click the search icon:

Search Product in Shopping Cart

User can view the products per category by clicking on “Browse Category” button. Screen will appear as:

Browse Category in MVC Shopping Cart

On click of category name or product name, the all the products matching the search key will appear.
The screen will look as:

Category/Product List

Search Controller:
Add search controller and put following code in it. Search controller will look as:

Creating and Using Stored Procedure:
Create procedure “USP_Search” in database. following is the code to create a stored procedure in database:
EDM for Shopping Cart

Entity Data Model

Add following code in view:


Product Detail View:

Once the product is searched by category or by directly using the search product option, a user clicks on product to view the details about that specific item, he/she will be redirected to product detail page:

ASP.NET MVC Shopping Cart Item List

MVC Shopping Cart Item Details

Here on Product detail page, user will be able to view all details about any specific application, it’s specification and price etc. He/She will be able to add item to Shopping Cart. MVC Shopping Cart code details will be covered later in this tutorial.

Create Action “ProductDetail” in “SearchController”. The code is:

Add following code in “ProductDetail” view:

  • Learn ASP NET MVC 5 step by step [Maruti Makwana, Corporate Trainer] 28 Lectures, 2.5 Hours Video, Intermediate Level
    Very easy to learn video series on Asp.Net MVC 5 Specially for those who are familiar with Asp.Net Web forms.
  • AngularJS for ASP.NET MVC Developers [Brett Romero] 10 Lectures, 1 hour video, Intermediate Level
    The Fastest Way For .NET Developers To Add AngularJS To Their Resume
  • ASP.NET with Entity Framework from Scratch
    [Manzoor Ahmad, MCPD | MCT] 77 Lectures, 10 hour video, All Level
    Latest approach of web application development
  • Comprehensive ASP.NET MVC [3D BUZZ] 34 lectures, 14 Hours Video, All Levels
    From zero knowledge of ASP.NET to deploying a complete project to production.

Online Shopping Cart Management:

Add Product to cart:
Click on “Add to Cart” button to add product to cart.
If user is not login, he will be redirected to login, else the product will be added to his cart and user will get the successful message as shown below:

Product Added Successfully

To manage the products in cart, we need to create a table Tbl_Cart. The table structure is:

MVC Shopping Cart Table

There is an another table Tbl_CartStatus that has the Cart item status.

MVC Shopping Cart Status

Add an action in Shopping controller to add product to cart.
The code is:

View
User can see the items in his cart by clicking on the “Cart Items”. The page will list the products in the cart.

The page will look like:

ASP.NET MVC Shopping Cart Details

To list the items, create an action “MyCart” in Shopping controller. It will contain following code:

The data is fetched from database using stored procedure. The procedure is:

View will contain following code:

Remove Product From Shopping Cart
User can remove an item from cart by clicking on the button “Remove From Cart” and that item will be remove from the cart.
Following code is done to complete this action:

Finally, we are able to complete major part of our Online Shopping Cart Application in ASP.NET MVC with C#, Entity Framework and SQL Server. Remaining is more related to Order Placement and Order Management in Administrative Area that is covered in Part-3.

Complete Source Code for the ASP.NET MVC Shopping Cart application is now available to download here. You just need to be a REGISTERED Member to download Source Code. Registration is FREE 🙂

Part-1 – Building ASP.NET MVC Online Shopping Cart Application

Integrating MVC Shopping Cart Application with Paypal

Payment option is done through a dummy page in Part-3 of this ASP.NET MVC Shopping Cart Application. But if you really want to understand an integration of payment for your application through Paypal, we recommend the implementation here. Vojislav Kovacevic has explained clearly the process of integrating your shopping cart with Paypal using practical video lessons. You can easily integrate your MVC Shopping Store Application with Paypal following a step by step approach.

Other Related Articles:

Top Web Developer Interview Questions and Answers Series: