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

By | October 21, 2016
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

In this ASP.NET MVC Tutorial Series, we will follow a step by step approach to develop an Online Shopping Cart using ASP.NET MVC, C#, Entity Framework and SQL Server with database first approach. After reading this Web Development Tutorial, user must be able to understand that how to build an ASP.NET MVC Shopping Cart using above mentioned technologies very easily? The article explains the necessary details, screenshots of each step and finally the source code at the end of the series. Also, you can follow here to Build a Real-World Application using ASP.NET Core and Angular 2.

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 🙂

ASP.NET MVC Shopping Store

Assembly that defines ASP.NET MVC framework [Choose One]:

  • A. System.Web.http
  • B. System.Web.mvcframework
  • C. System.Web.mvc
  • D. System.Web.mvc.helpers

To further test your ASP.NET MVC skill, Take a Complete FREE Online Test or MCSD Practice Exam: 70-486 (Developing ASP.NET MVC Web Applications). Simply Click Here.

Further If you are interested to enhance your skills in all related technologies used in this article Series and others, you MUST understand related concepts in these FAQs/Interview Questions Series.

 Correct Answer: C

ASP.NET MVC Shopping Cart – Detailed Features List

This ASP.NET MVC Tutorial is divided into three parts as mentioned below with each part implementing the necessary features in order.

  • Features covered in ASP.NET MVC Online Shopping Store – Part 1
    • Overall ASP.NET MVC Project Setup
    • Online Shopping Store Database Setup
    • Administration – All CRUD Operations for Categories
    • Administration – All CRUD Operations for Products
    • Administration – Mark a Product as Featured Product
  • Features covered in ASP.NET MVC Online Shopping Store – Part 2
    • User Registration & Authentication
    • Product Display Center
    • Search Products
    • Display Products by Category e.g Mobiles/Tables | Home Appliances | Other Electronics etc.
    • Products List View
    • Single Product Detailed View
    • Shopping Cart – Add Products to Cart
    • Cart View – List of Products added to Shopping Cart
    • Remove Products from Shopping Cart
  • Features covered in ASP.NET MVC Online Shopping Store – Part 3
    • Checkout Option
    • Shipping Details
    • Payment Options Dummy Page
    • Place Order
    • Order Summary Page on successful payment
    • Administration – View/List Orders
    • Administration – Single Order Detailed View

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.
Let’s start with Part-1 in Online Shopping Store Application development using ASP.NET MVC, C#, MS SQL Server, Entity Framework (Database First).

Create the ASP.NET Web Application

  • Open Visual Studio and click on ‘New Project’.
  • With the left menu, select ‘Web’ tab.
  • Select the option ‘ASP.NET web application’.
  • Name the application. By default, allocation for project is selected, if you want to choose any other, change the location through browsing the new location.
    ASP.NET MVC Project

Select application type : – Empty or Internet Application

Application Type MVC

If you choose “Empty”, no controllers and actions are created. If you choose “Internet”, default MVC application is created along with Account and Home Controller. Account controller contains the actions containing membership operations.

ASP.NET MVC Controllers

It is the primary entity of ASP.NET MVC application. Controller receives the request through the browser via the route tables defined in the application. It has actions that do all the tasks for the application. it  retrieve model data, and then specify view templates that return a response  to the browser.

If you want to enhance your understanding about ASP.NET MVC Controllers and Action Methods, please follow here to know all about Controllers and Action Methods.

Step 2- Add Admin Controller
Now, you need to add the controller, the primary entity of MVC Application.
Right click on “Controllers” folder and click, “Add”, then “Controller”. We are focusing on admin section first, so we will name the controller “AdminController”.ASP.NET MVC Controller

After you click add, you will find that a new file named “AdminController” is created with following code in it:MVC Controller Action

Admin section must be accessed after authentication and authorization. So, we will first integrate login for admin. If you want to open the login form, when you type http://websiteRootUrl/Admin, you should put the form on index view of admin controller.

ASP.NET MVC View

View is the representation part of MVC design pattern. It contains HTML tags along with the data to be rendered.
Razor view engine parses all data on the page and generates a pure HTML page to show on the front-end.

Add View for Admin Authentication
Right click on index method of AdminController and click “Add View“. By default, name of the action will appear as the view name.ASP.NET MVC View

You can select any master page form the right input below “Use a layout or master page” label.Master Layout Page

Once you selected the master page, the empty box of layout will be filled with the selected layout.Layout or Master Page

Now, click “Add” to create the view along with layout. Below is the code for our view i.e. index.cshtml file.

If you don’t select any layout, the following view will be rendered.

C# Unity DeveloperASP.NET MVC Model

Model contains the business objects of the application. It is a class that contains the properties, add validation rules, links to database entity.

Here we add AccountViewModel to bind the data on Admin login view.ASP.NET MVC Model

It will generate a class named “AccountViewModel” and following code in it.

Now, we need to write the business objects in it. The final code will look like:

Now we write the logic to bind this model along with data in the AdminController. Here is the code for it:

Adding code for admin login in View:

Exam: 70-486

Create database that will contain the data

In order to Create a database, open Microsoft SQL Server and put valid credentials for authentication. Create database after right clicking on “Databases” node. Enter database name “Online_Shopping” and click “OK” button, a new database will be created for you.

We assume that you are familiar with creating a new database using SQL Server Wizard (that is quite simple) but you can also create database by using below SQL Query:

Now, add following three tables to our newly created database:

  • Tbl_Members
  • Tbl_Category
  • Tbl_Product

It’s very simple  to add new table to database along with column names and their datatypes and set the keys where-ever necessary as primary key or foreign key etc. So we are skipping this step.

We have following tables:

Tbl_MembersMembers Table

Tbl_CategoryCategory in Online Store

Tbl_ProductOnline Store Products

I have added Tbl_[Table Name] to identify the class generated from database.

Now, add a new folder “DAL” in our solution. Add “Entity Data Model and XML (EDMX)” file to our project. It will link the database objects. If “ADO.Net Entity Data Model” doesn’t appear here, add it as:ADO.NET Entity Data Model

Open New Connection

New Connection

Click new connection and Fill the database details and click “OK”.Online Shopping Connection

Online Shopping Entities

It will create the entity along with the connection string to be put on Web.Config file.Database Objects and Settings

Click the tables. It contains all the tables in the database. Now click “Finish”.

Our EDMX file will be created as follows in design view:EDMX File

Now, if you look in the DAL folder, you will find multiple files has been created.EDMX Multiple Files

Online_ShoppingEntities.Context.cs is the database context class and contains all the definition related to all the data base objects in the form of POCO classes.

Online_ShoppingEntities.Context.cs will contain:

  • 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.

The Admin Login page will be displayed as

MVC Admin Login

After putting valid credentials, the admin can enter in his dashboard. The dashboard view is:MVC Application Dashboard

There will be menus on the page to manage the content on the application.

Now add an action to list the categories.
The code for it is:

Add view to display the list. View will contain:

After writing the codes, when you click on categories link, you will get following screen:

After writing the codes, when you click on categories link, you will get following screen:MVC Category CRUD

From here, you can add new category or update existing category.

Code for Add/Update operation is:

In order to validate the properties of category, we add a model “CategoryDetail”. It will contain:

Add view to Add/Update category:

Right click on action and click “Add View”. The view for Add/Update category will contain:

The page will be displayed as:MVC Update Category

After updating the name, once you submit the form, the value gets updated in database.

Listing Products:
Create an action “Products” in admin Controller and add view of it. Controller and view can be added as described previously. Create a model “ProductDetail” that will contain the product properties and validations.
Products action will be:

Product view will be:

Product list page will look like:

Product Listing ASP.NET MVC

Add/Update Product
Create Actions AddProduct and UpdateProduct for Add/Update actions on product.
Code is:

Product Detail Model: It is used for validating the user input.

The screen will appear as:
Product Detail Model

 

Single product detail view:
We can get this screen on click on product image or name on product list page.
Create Action ProductDetail in controller and add its view.
ProductDetail action will contain:

View will contain:

The screen will look like:MVC Shopping Cart

I have used “Unit of Work” along with repository pattern for interaction with database.

Unit of Work is referred to as a single transaction that involves multiple operations of insert/update/delete and so on kinds. To say it in simple words, it means that for a specific action (say Update product ), all the transactions like insert/update/delete and so on are done in one single transaction, rather then doing multiple database transactions. This means, one unit of work here involves insert/update/delete operations, all in one single transaction.
The code is:

Repository interface is:

And its implementation is:

So far in this ASP.NET MVC Shopping Cart Tutorial Series, we have covered mostly the administration features. Also, we have setup the project and all related details. In coming sections we will cover features related to end user i.e. Product Display Center, Product Search, Display by Category, List and Detailed View, Adding/Removing Items from Shopping Cart and more.

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 2 – Building ASP.NET MVC Shopping Cart Application

Keep in touch! Soon the source code for running ASP.NET MVC Shopping Cart will be uploaded and available.


Other Related Articles:

Advanced Web Developer Interview Questions and Answers Series:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest
  • Wasif Bhatti

    https://uploads.disquscdn.com/images/c9a89b4d8d38889046023ed11a582772ae6680a5ea298301e531430dda28b3bf.png
    These _unitOfWork,EncryptDecrypt not working. because of the name of these type does not exist in current context. Kindly help me out at Your earliest

    • Hi Bhatti,
      We are going to share complete source code with Part-3 earlier next week. Hopefully, you will be able to get the project in running state. Actually the things are in the middle to difficult to share source right now.

      • Wasif Bhatti

        kindly provide me source code now tutorial got completed.

        • Hi Wasif,

          You can download the source code for this Online ASP.NET MVC Shopping Cart Application.

          • Wasif Bhatti

            from where i can download it.
            Please share URL

  • Wasif Bhatti

    I appreciate your efforts. You people are doing great job. Personaly speaking i did most of my work on webform. it is bit difficult for me to adjust in asp.net mvc. I’m doing efforts for the same and i blv that with your kind cooperation i will be understood mvc well Inshaa Allah. As the Project completes kindly share a source code with me bcz i want to understand the nity grity of it.
    I will be very greatful of you

  • srikanth goud

    This is a nice project…
    please share a source code
    thank you

  • Oyedepo Olufemi

    Everything worked fine…thanks alot