Build a MVC eCommerce Site in 5 Minutes

For those of us who have spent most of our careers building business applications, the prospect of creating an e-commerce storefront can be quite daunting. Not only do you have to deal with calculating tax, estimating shipping and accepting payments, but employees need a way to manage products, discounts and marketing content. Thankfully, there's an open source e-commerce solution written in Microsoft ASP.NET MVC named nopCommerce that provides all this functionality and much more. I was so impressed by both the functionality and the underlying architecture that I've created a presentation which I believe will serve as a great introduction to MVC as well as a tutorial on developing custom storefronts using nopCommerce. We start off with a brief overview of basic MVC concepts accompanied by examples within the nopCommerce code. This includes strongly typed Razor views, HTML helpers, jQuery ajax calls, and fluent validation. Once everyone understands how the website works, we dive into the infrastructure by introducing WCF services, using a generic repository with Entity Framework(EF4) and LINQ, as well as Dependency Injection (DI) with Automapper.

Transcript

1. Build a MVC eCommerce Site in Under 5 Minutes Gaines Kergosien Vanick Digital Senior Solutions Architect Twitter: @gainesk
2. Agenda  Why this topic?  What is nopCommerce?  What is MVC  Models, Views, & Controllers  Validation  Routing  Unit Tests  nopCommerce Libraries  nopCommerce Admin  Tips 2
3. Why this topic?  Why MVC and WCF?  Decoupled  Scalable  Reusable  Maintainable  Why nopCommerce?  Top eCommerce app on MS Web Matrix  Huge bang for the buck! 3
4. What is nopCommerce?  Open Source  Product Catalog  Categories  Products/Variants  Customer Management  Order Management  Mobile Support  Discounts  Wish Lists  Gift Cards  Newsletters 4  Recurring Payments  Reporting  Payment Methods  Shipping Methods  Taxes  External Auth  Polls  News  Blogs  Forums  Multiple Stores
5. nopCommerce License  GPLv2 License  “powered by nopCommerce” on ever page 5
6. What is MVC? 6 Model Controller View User UPDATES MANIPULATES
7. Model –View - Controller 7  Controller - responsible for handling all user input  Model - represents the logic of the application  View - the visual representation of the model
8. ASP.NET MVC  More control over HTML  No Codebehind  Separation of concerns  Easy to test  URL routing  No postbacks  No ViewState 8
9. What is Controller?  It is a class  Derives from the base System.Web.Mvc.Controller class  Generates the response to the browser request 9 public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { return View(); } }
10. Controller Actions  Public method of the Controller class  Cannot be overloaded  Cannot be a static method  Returns action result 10 public ActionResult About() { return View(); }
11. Action Results  Controller action response to a browser request  Inherits from the base ActionResult class  Different results types 11
12. Action Results Types  ViewResult  EmptyResult  RedirectResult  JsonResult  JavaScriptResult  ContentResult  FileContentResult  FileStreamResult  FilePathResult 12
13. Controller base class methods  View  Redirect  RedirectToAction  RedirectToRoute  Json  JavaScriptResult  Content  File 13
14. Views  Most of the Controller Actions return views  The path to the view is inferred from the name of the controller and the name of the controller action.  \Views\ControllerName\ControllerAction.aspx  A view is a standard (X)HTML document that can contain scripts.  script delimiters <% or @{ in the views 14
15. Pass Data to a View  With ViewData:  ViewData["message"] = "Hello World!";  Strongly typed ViewData:  ViewData.Model = OurModel;  With ViewBag:  ViewBag.Message = "Hello World!"; 15
16. Post data to a controller  Verb Attributes  The action method in the controller accepts the values posted from the view.  The view form fields must match the same names in the controller. 16 [HttpPost] public ActionResult Edit(Movie movie) { if (ModelState.IsValid) { db.Entry(movie).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(movie); }
17. HTML Helpers  Methods which typically return string.  Used to generate standard HTML elements  textboxes, dropdown lists, links etc.  Example: Html.TextBox() method  Usage is optional  You can create your own HTML Helpers 17
18. Validation  Two types of validation error messages  generated before the HTML form fields are bound to a class  generated after the form fields are bound to the class  Model State  Validation Helpers  Html.ValidationMessage()  Html.ValidationSummary() 18
19. Routing  The Routing module is responsible for mapping incoming browser requests to particular MVC controller actions.  Two places to setup:  Web.config file  Global.asax file 19
20. Routing Setup  Web.config file 20 <system.web> <httpModules> … <system.web> <httpHandlers> … <system.webServer> <modules> … <system.webServer> <handlers> …
21. URL Example http://www.mysite.com/Home/About/6 {controller} = Home {action} = About {id} = 6 21
22. Routing Examples  Nop.Web.Infrastructure.RouteProvider  Nop.Web.Infrastructure.GenericUrlRouteProvider 22
23. Unit Tests  Used for the business logic (not DAL or View logic).  Test individual “unit”of code  Make the code safe to modify  Mock Object framework  When you lack “real” objects  Create mocks for the classes in the application  Test with mock objects 23
24. nopCommerce Libraries  Nop.Core – Domain Objects & Infrastructure  Nop.Data – Data Access  Uses Entity Framework  Maps Tables to Domain Objects  Nop.Services – WCF Services 24
25. nopCommerce Plugins  Loaded at runtime  Independent of core source  Consume events  Marketable 25
26. nopCommerce Admin Site  Nop.Admin project under relative path /Admin  Uses AutoMapper to link Domain Objects and Models 26
27. Things to remember  Plugins make for more manageable upgrades  Theme views take priority  Non-generic routes must be declared  SEO on tabs in Admin site  Check your site log! 27
28. Contact Info Blog: http://dotnetdude.net Email: gaines [at] dotnetdude.net Twitter: @gainesk Rate this talk @ http://spkr8.com/t/31781