Building Modern Websites with ASP.NET

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 namespaceBakery.Models { publicclassCategory { [Key] publicint Id { get; set; } publicstring Name { get; set; } publicvirtualICollection<Product> Products { get; set; } } }

7. Models namespaceBakery.Models { publicclassProduct { publicint Id { get; set; } publicstring Name { get; set; } publicstring Description { get; set; } publicstring Image { get; set; } publicdecimal Price { get; set; } publicDateTimeExpirationDate { get; set; } publicintQuantityOnHand { get; set; } } }

8. Entity Framework • Entity Framework • Code First • Database First • Model First • DbSet<T> • Database Initializer (Code first) • DBContext

9. Entity Framework publicclassBakeryContext : DbContext { publicDbSet<CartItem> CartItem { get; set; } publicDbSet<Order> Order { get; set; } publicDbSet<OrderDetail> OrderDetails { get; set; } publicDbSet<ShoppingCart> ShoppingCart { get; set; } publicDbSet<Category> Category { get; set; } publicDbSet<Product> Products { get; set; } }

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

11. Entity Framework • publicclassDBContextInitializer: DropCreateDatabaseAlways<MyContext> • { • protected override void Seed(MyContextcontext) • { • // fill db • } • }

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

13. Controllers namespaceBakery.Controllers { publicclassProductsController : Controller { privateBakeryContextdb = newBakeryContext(); publicActionResult Index() { return View(db.Products.ToList()); } } }

14. Controllers • HTTP POST Data & HTTP Verbs [HttpPost] [ValidateAntiForgeryToken] publicActionResult Edit(Product product) { if (ModelState.IsValid) { db.Entry(product).State = EntityState.Modified; db.SaveChanges(); returnRedirectToAction("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. publicclassProductsController : Controller { publicActionResult Index() {...} publicActionResultDetails(string? name) {...} publicActionResult Create() {...} [HttpPost] publicActionResultCreate(Productproduct) {} publicActionResultEdit(string? name) {...} [HttpPost] publicActionResultEdit(Productproduct) {...} publicActionResultDelete(string? name) {...} } /products/ /product/index /products/details/cupcake /products/create /products/edit /products/delete/cupcake

18. Routing publicclassRouteConfig {      publicstaticvoidRegisterRoutes(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 protectedvoidApplication_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<Bakery.Models.Product> @foreach (var item in Model) { <tr> <td>@Html.DisplayFor(modelItem => item.Name) </td> <td>@Html.DisplayFor(modelItem => item.Description) </td> <td><imgsrc=@Url.Content("~/Content/Images/")@item.ImageName alt="Image" /></td> <td>@Html.DisplayFor(modelItem => item.Price) </td> <td>@Html.DisplayFor(modelItem => item.QuantityOnHand) </td> <td>@Html.ActionLink("Edit", "Edit", new { id=item.Id }) | @Html.ActionLink("Details", "Details", new { id=item.Id }) | @Html.ActionLink("Delete", "Delete", new { id=item.Id }) </td> </tr> }

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 3rd 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 publicclassCustomerViewModel { publicCustomerCustomer { get; set; } publicStatesDictionary States { get; set; } publicCustomerViewModel(Customer customer) { Customer = customer; States = newStatesDictionary(); } }

28. Sumary • Models, Views, Controllers