How to Develop an ecommerce store in ASP.net MVC?

ASP.Net MVC is no longer a term, it has become a trend to develop secure, fast, enterprise web applications worldwide. And of course, it has to be as Microsoft is constantly working on the development of the product and updates being pushed to the framework has always been very tested and dependable. Due to which the framework has already turned out as one of the most serious contenders as a framework of choice when it comes to 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.

Now before we dive into ASP.Net MVC, it is very important to create a specific mindset. For example, much like other popular MVC frameworks such as Ruby On Rails or Spring MVC, ASP.Net has a convention over configuration approach. Many of you have confusion between convention over configuration. So, let me clarify that first! A convention is an established way of doing something (such as naming a class etc). So how does a convention better over configuration? By following established conventions we can easily 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, this makes ASP.Net a great option.

Know what are we building?

Building a simple e-commerce application that comprises of a bunch of features starting from a catalog, product categories, a shopping cart, checkout mechanism, an user authentication module and a content administration module. Here I would like to recommend using older Java EE technologies to put together the E-commerce website. The same was replicated to SpringMVC by a developer.

Our Approach

ASP.Net MVC now offers a code-first approach when one is looking for application development. And it is highly recommended to utilize the ORM (Object Relational Mapper) known Entity framework which can also be used. It may quite interest you to know that it is developed and maintained by core ASP.net team although there are other ORM choices like NHibernate etc. So, what is the 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:

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; } 

See the above image, can you see a simple C# class with few annotations. Those annonations result in making the entity framework to generate validation rules or create a display name attribute while generating scaffolding code for us. And it may quite interest you to know that the class and a data context that inherits from Dbcontext is more than enough to create the database table for us by Entity framework. Lest 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 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"){}

This is all about using the base keyword to use the constructor with the connection name overload which is defined in the DbContext class. In addition to 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 means how smart entity framework 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.

Tools used

Author Bio:

Jaymin Vyas works as a Digital Marketing Analyst at TatvaSoft UK. As an out-and-out Google fan, he closely follows all their updates and events. His career progression provides a unique perspective to marketing, having been involved from the ground up with clients, conducting research for them.