building modern websites with asp.net by rachel appel
DESCRIPTION
Building Modern Websites with ASP.NET Rachel Appel .NET Conf UY 2014 http://netconf.uyTRANSCRIPT
![Page 2: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/2.jpg)
Agenda
• Overview of ASP.NET MVC• Models• Controllers• Routing & REST• Views• ViewModels
![Page 3: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/3.jpg)
ASP.NET MVC
• Models• Views• Controllers
• ViewModels
![Page 4: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/4.jpg)
ASP.NET MVC Overview
• ASP.NET implementation of MVC• MVC Pattern• What about other patterns? • MVVM Pattern, MVW, or MV* Patterns
• Routing• RESTful
![Page 5: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/5.jpg)
Models
• The application’s data• Expressed in code as classes and their members• Contains relationships• Mapped to database objects
![Page 6: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/6.jpg)
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; } }}
![Page 7: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/7.jpg)
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; } }}
![Page 8: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/8.jpg)
Entity Framework
• Entity Framework• Code First• Database First• Model First
• DbSet<T>• Database Initializer (Code first)• DBContext
![Page 9: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/9.jpg)
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; }}
![Page 10: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/10.jpg)
Entity Framework
System.Data.Entity.Database.SetInitializer(new Models.DBContextInitializer());
In the global.asax.cs file
![Page 11: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/11.jpg)
Entity Framework
public class DBContextInitializer : DropCreateDatabaseAlways<MyContext>{
protected override void Seed(MyContext context){ // fill db }
}
![Page 12: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/12.jpg)
Controllers
• Match.com for Models and Views• Traffic Cop• Perform routing• Accepts HTTP requests• Front door of application• Security
![Page 13: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/13.jpg)
Controllers
namespace Bakery.Controllers{ public class ProductsController : Controller { private BakeryContext db = new BakeryContext();
public ActionResult Index() { return View(db.Products.ToList()); } }}
![Page 14: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/14.jpg)
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);}
![Page 15: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/15.jpg)
Routing / RESTful URLs
• REST : Representational State Transfer• Request resources via RESTful URL
![Page 16: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/16.jpg)
URLS
Not RESTfulhttp://books.com?isbn= 978-1500712952http://shopping.com?category=2&subcategory=3
RESTfulhttp://books.com/classics/jane-eyre http://shopping.com/computers/laptops
![Page 17: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/17.jpg)
/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) {...}
}
![Page 18: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/18.jpg)
Routingpublic 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 }); }}
![Page 19: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/19.jpg)
Routing
protected void Application_Start() { RouteConfig.RegisterRoutes(RouteTable.Routes); }
![Page 20: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/20.jpg)
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
![Page 21: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/21.jpg)
Views
• Helpers• Links • Controls
![Page 22: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/22.jpg)
Convention over Configuration
• Controller and action method name • Matches the URL
![Page 23: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/23.jpg)
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 [email protected]("~/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>}
![Page 24: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/24.jpg)
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
![Page 25: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/25.jpg)
Scaffolding
• Quickly create controllers and views based on models
![Page 26: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/26.jpg)
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)
![Page 27: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/27.jpg)
ViewModels
public class CustomerViewModel { public Customer Customer { get; set; } public StatesDictionary States { get; set; } public CustomerViewModel(Customer customer) { Customer = customer; States = new StatesDictionary(); }}
![Page 28: Building Modern Websites with ASP.NET by Rachel Appel](https://reader035.vdocument.in/reader035/viewer/2022062707/5581c08cd8b42a1d1a8b5340/html5/thumbnails/28.jpg)
Sumary
• Models, Views, Controllers