1. Building Modern Websites with ASP.NET Rachel Appel http://rachelappel.com rachel@rachelappel.com

2. Agenda Overview of ASP.NET MVC Models Controllers Routing & REST Views ViewModels

3. ASP.NET MVC Models Views Controllers ViewModels

4. ASP.NET MVC Overview ASP.NET implementation of MVC MVC Pattern What about other patterns? MVVM Pattern, MVW, or MV* Patterns Routing RESTful

5. Models The application’s data Expressed in code as classes and their members Contains relationships Mapped to database objects

6. Models namespace Bakery.Models { public class Category { [Key] public int Id { get; set; } public string Name { get; set; } public virtual ICollection Products { get; set; } }

7. Models namespace Bakery.Models { public class Product { public int Id { get; set; } public string Name { get; set; } public string Description { get; set; } public string Image { get; set; } public decimal Price { get; set; } public DateTime ExpirationDate { get; set; } public int QuantityOnHand { get; set; } }

8. Entity Framework Code First Database First Model First DbSet Database Initializer (Code first) DBContext

9. Entity Framework public class BakeryContext : DbContext { public DbSet CartItem { get; set; } public DbSet Order { get; set; } public DbSet OrderDetails { get; set; } public DbSet ShoppingCart { get; set; } public DbSet Category { get; set; } public DbSet Products { get; set; } }

10. Entity Framework System.Data.Entity.Database.SetInitializer( new Models.DBContextInitializer()); In the global.asax.cs file

11. Entity Framework public class DBContextInitializer : DropCreateDatabaseAlways { protected override void Seed(MyContext context) { // fill db }

12. Controllers Match.com for Models and Views Traffic Cop Perform routing Accepts HTTP requests Front door of application Security

13. Controllers namespace Bakery.Controllers { public class ProductsController : Controller { private BakeryContext db = new BakeryContext(); public ActionResult Index() { return View(db.Products.ToList()); }

14. Controllers HTTP POST Data & HTTP Verbs [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit(Product product) { if (ModelState.IsValid) { db.Entry(product).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(product); }

15. Routing / RESTful URLs REST : Representational State Transfer Request resources via RESTful URL

16. URLS Not RESTful http://books.com?isbn= 978-1500712952 http://shopping.com?category=2&subcategory=3 RESTful http://books.com/classics/jane-eyre http://shopping.com/computers/laptops

17. /products/ /product/index /products/details/cupcake /products/create /products/edit /products/delete/cupcake public class ProductsController : Controller { public ActionResult Index() {...} public ActionResult Details(string? name) {...} public ActionResult Create() {...} [HttpPost] public ActionResult Create(Product product) {} public ActionResult Edit(string? name) {...} [HttpPost] public ActionResult Edit(Product product) {...} public ActionResult Delete(string? name) {...} }

18. Routing public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }); }

19. Routing protected void Application_Start() { RouteConfig.RegisterRoutes(RouteTable.Routes); }

20. Views The UI/Presentation layer Renders a model or ViewModel Does not contain business logic A visualization of data Expects data from one source: a model or ViewModel Use HTML Helpers or custom HTML

21. Views Helpers Links Controls

22. Convention over Configuration Controller and action method name Matches the URL

23. Views @model IEnumerable @foreach (var item in Model) { @Html.DisplayFor(modelItem => item.Name) @Html.DisplayFor(modelItem => item.Description) @Html.DisplayFor(modelItem => item.Price) @Html.DisplayFor(modelItem => item.QuantityOnHand) @Html.ActionLink("Edit", "Edit", new { id=item.Id }) | @Html.ActionLink("Details", "Details", new { id=item.Id }) | @Html.ActionLink("Delete", "Delete", new { id=item.Id }) }

24. Views and JavaScript Libraries Included in VS 2012/2013 Project Templates jQuery & jQuery Mobile (2012) jQuery Bootstrap Modernizr Respond.js You can use any 3 rd party JS library in MVC views

25. Scaffolding Quickly create controllers and views based on models

26. ViewModels A representation of one or more models Formatted & polished data UI logic code to format data One single ViewModel object per view Promotes SOC (Separation of Concerns)

27. ViewModels public class CustomerViewModel { public Customer Customer { get; set; } public StatesDictionary States { get; set; } public CustomerViewModel(Customer customer) { Customer = customer; States = new StatesDictionary(); }

28. Sumary Models, Views, Controllers