Building Modern Websites with ASP.NET by Rachel Appel

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

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

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

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

Entity Framework
public class DBContextInitializer : DropCreateDatabaseAlways<MyContext>
{
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);
}

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

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

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

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

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

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

Scaffolding
• Quickly create controllers and views based on models

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

Building Modern Websites with ASP.NET by Rachel Appel

More Related Content

What's hot (20)

Similar to Building Modern Websites with ASP.NET by Rachel Appel (20)

More from .NET Conf UY (17)

Recently uploaded (20)

Building Modern Websites with ASP.NET by Rachel Appel

Editor's Notes