Building Modern Websites with ASP.NET Rachel Appel .NET Conf UY 2014 http://netconf.uy

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<Product> 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
• Entity Framework
• Code First
• Database First
• Model First
• DbSet<T>
• Database Initializer (Code first)
• DBContext

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

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

11. Entity Framework
public class DBContextInitializer : DropCreateDatabaseAlways<MyContext>
{
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<Bakery.Models.Product>
@foreach (var item in Model) {
<tr>
<td>@Html.DisplayFor(modelItem => item.Name) </td>
<td>@Html.DisplayFor(modelItem => item.Description) </td>
<td><img src=@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
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