Build Data Driven Apps with ASP.NET Core Rachel Appel

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

ASP.NET MVC Models Views Controllers ViewModels

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

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

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

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; } }

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

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; } }

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

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

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

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

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); }

Model Binding Matches model properties with HTTP Form values Default Model Binder Custom Model Binder Compound fields Calculated fields Dynamically created fields Fields that don’t map nicely to model

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

URLS Not RESTful RESTful

/products/ /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) {...} }

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 }); }

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

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

Views Helpers Links Controls

Convention over Configuration Controller and action method name Matches the URL

(var item in Model) => => => => "Edit", new { id=item.Id }) "Details", new { id=item.Id }) "Delete", new { id=item.Id }) }

Views and JavaScript Libraries Included in some VS Project Template You can use any 3 rd party JS library in MVC views jQuery & jQuery Mobile Bootstrap Modernizr Respond.js Angular

Views Validation Model attributes

Scaffolding Quickly create controllers and views based on models Great for prototyping Great for UI base

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)

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

Sumary Models, Views, Controllers Routing, Security, Deployment, OWIN

Rate This Session Now! Rate with Mobile App: Select the session from the Agenda or Speakers menus Select the Actions tab Click Rate Session Rate with Website: Register at Go to Select this session from the list and rate it Tell Us What You Thought of This Session Be Entered to WIN Prizes! #ITDevConnections