ASP.net MVC step by step complete E-commerce tutorial

ASP.net MVC has matured significantly over the past few years and is perhaps one of the best web frameworks out there to develop secure, fast, enterprise web applications. The team at Microsoft is constantly working on the development of the product and updates being pushed to the framework has always been very well tested and dependable. This has made ASP.net MVC a serious contender as framework of choice for web development. Add to that the beauty and power of C#, needless to say developing in ASP.net MVC is certainly a developer’s pleasure. However, before taking a dive into ASP.net MVC for that matter any MVC framework, whether web or not, the developer has to think in a certain mindset. ASP.net MVC like other popular MVC frameworks such as Ruby On Rails or Spring MVC etc. has a convention over configuration approach. The question will arise what is convention over configuration? Well, to put it simply, a convention is a established way of doing something (such as naming a class etc). So how does a convention better over configuration? By following the established conventions we cut down on a lot of boiler-plate work. In today’s world where extreme programming, agile development are the mantras, every developer worth her(his) salt wants to cut down on mundane tasks as much as possible. With this in mind we will start our ASP.net MVC step by step tutorial and before that let me tell you the full source code for the project is available at GitHub as a public repository and can be pulled from the link below
Download complete source here

• What are we building
• Approach
• Tools
• Steps

What are we building

We are building a simple E-commerce application, which has all the features of (well most) modern day e-commerce websites, like a catalog, product categories, a shopping cart, checkout mechanism, an user authentication module and a content administration module. For the Java developers Netbeans documentation had a e-commerce tutorial called AffableBean and it can be found here. The tutorial uses older Java EE technologies to put together the E-commerce website. The same was replicated to SpringMVC by a developer and the details can be found here. So we are replicating the same application with some more features than those apps have to show the ASP.net MVC development perspective and also to allow developers to see the differences between the technology stacks

Our approach

ASP.net MVC now recommends a Code-First Approach to application development. And it is highly recommended to utilize the ORM (Object Relational Mapper) called Entity Framework to be used as it is developed and maintained by core ASP.net team although there are other ORM choices like NHibernate etc. So what is code-first approach? In code first approach we define our domain objects(entities) as POCO classes. A POCO(Plain Old Clr Objects) is nothing but a simple c# class. For example have a look at the below Product class

public class Product
{
    public int Id { get; set; }

    [Required(ErrorMessage = "Product name is required")]
    [MaxLength(45, ErrorMessage = "The maximum length must be upto 45 characters only")]
    public string Name { get; set; }

    [RegularExpression(@"^\d+.\d{0,2}$", ErrorMessage = "Has to be decimal with two decimal points")]
    [Range(0,5,ErrorMessage = "The maximum possible value should be upto 5 digits")]
    public Decimal Price { get;set; }

    public string Description { get; set; }

    [Display(Name = "Updated At")]
    [Column(TypeName = "datetime2")]
    public DateTime LastUpdated { get; set; }

    public int CategoryId { get; set; }

    public virtual Category Category { get; set; }

    public virtual ICollection<OrderedProduct> OrderedProducts { get; set; } 

}

As you can see it is a simple c# class with few Annotations. Those annotations make Entity Framework to generate validation rules or create a display name attribute while generating scaffolding code for us. With this class and a Data context that inherits from DbContext is more than enough to create the database table for us by Entity framework. Lets look at the datacontext class below

public class MvcAffableBeanContext:DbContext
{
    public MvcAffableBeanContext() : base("MvcAffableBean")
    {

    }
    public DbSet<Product> Products { get; set; }
}

Again here we are basically doing nothing the whole work is being done by the DbContext class defined under System.Data.Entity namespace which is part of Entity Framework. Many people ask how to target a database name of their choice while using entity framework, as it turns out it is very simple and I will explain the trick here. Have a look at the Constructor function

MvcAffableBeanContext() : base("MvcAffableBean"){}

We are basically using the base keyword to use the constructor with the connection name overload which is defined in the DbContext class. Apart from this we also need the Web.config to have an entry as follows:

<connectionStrings>
    <add name="MvcAffableBean" providerName="System.Data.SqlClient" connectionString="Data Source=.\sqlexpress;Initial Catalog=MvcAffableBean;Integrated Security=True;" />
</connectionStrings>

This shows how smart Entity Framework is, it will take the Id property of the class and create an Auto-increment id table in the database which will be primary key, if we named it differently instead of Id or ProductId then we have to annotate it with [Key] annotation to make Entity Framework know, we want that field to be the primary key. Another interesting thing to learn is Navigation properties and virtual keyword. Navigation properties are essentially relationships. For example looking at the following line of code in the product class

public virtual Category Category { get; set; }

and

public int CategoryId { get; set; }

tells us that Category Id is a foreign key in product table and looking at the Category.cs file we will find this line

 public virtual ICollection<Product> Products { get; set; } 

Reading both in conjunction we can easily know that Every product belongs to one Category and a category can have many products hence the

Icollection<Product>

So this demonstrates how easy it is to create relationships and we can access relational data from the other table in our code using navigation properties and .(notation) just like accessing data of objects. Once you download the source code from GitHub have a look at all the classes inside Models folder which by convention stores all our domain objects. The virtual keyword provides lazy loading i.e. do not load all items into memory until it is needed. Have a look at the conventional folder structure of asp.net MVC

Tools used

• Visual Studio 2013+
• Entity Framework 6.1.3
• Bootstrap
• SQL Server 2008+
• JQuery
• Newtonsoft JSON

Look at the end result of the product we are developing

Home Page desktop view

Home Page Mobile view

Mobile navigation

The above were a few selected screens, I encourage you to download the project from GitHub and run it on your system to get complete feel of the project and also to follow along

Steps

1. Create an empty ASP.net MVC project choose no authentication we will manually build authentication by copying and pasting from scaffolding code from another individual account project and modify it
2. In the Models folder add all the domain classes as found in the GitHub Models directory and build the project once
3. Add Controllers one by one scaffolding from the Model and with Entity Framework
4. Add Views via right clicking on the controller action from the scaffold
5. Create the shopping cart view models as defined in the ViewModels folder from the GitHub project
6. We create them as view models as we do not want to persist the data of such complex business tier where complex business logic calculations are happening
7. Populate the required partial views for the Cart and Logon section on the navbar
8. Create the checkout controller
9. Copy the Accounts controller from the GitHub project
10. Add the footer JavaScript on the _Layout file
11. Import the images and keep the folder structure same
12. Run the project

Programming like swimming can only be learned if you dive into it. I hope you will download the project and fiddle with it or create the code of your own and may be enhance the project too. Do hit me up with comments if you want to improve something or if you did not like something. Happy coding!

***Update***

Those who are facing foreign key constraint errors, please follow the below steps, should be fine:

Delete the migrations folder completely and add new migrations, that will solve all the issues:

setps:

Delete the state: Delete the migrations folder in your project; And
Delete the __MigrationHistory table in your database (may be under system tables); Then

Run the following command in the Package Manager Console:

Enable-Migrations -EnableAutomaticMigrations -Force

Use with or without -EnableAutomaticMigrations

And finally, you can run:

Add-Migration Initial