ASP.NET MVC & HTML 5

1. devcoach.com
ASP.NET MVC & HTML 5
Daniel Fisher | devcoach

2. devcoach.com
HTML 5 – A new Era?
• … or back to the 90's

3. devcoach.com
What is new?
• HTML 5
– A few tags
– … Less Markup
• CSS 3
– Rounded corners
– Drop shadow?
– Media Queries
– … Less Definition
• EcmaScript 5
– Web Sockets
– Server Sent Events
– … Less Code

4. devcoach.com
A new ASP.NET Style
• It's not Web Forms!

5. devcoach.com
What is there
• Maintain Clean Separation of Concerns
• Extensible and Pluggable
• Enable clean URLs and HTML
• Build on to of a mature platform

6. devcoach.com
Whats the difference to Web Forms
• File System Based
• Event based Server Forms
– Makes adoption easy for e.g. VB forms devs.
– Process logic is coupled with page life-cycle.
• Difficult to test using automated tests.
• Server Controls
– Easy because they render the HTML for you.
– Often not so nice because they render it the way
they want.

7. devcoach.com

8. devcoach.com
What Do They Have In Common?
• Visual Studio web designer
• Master pages
• Membership/Roles/Profile providers
• Globalization
• Caching

9. devcoach.com
The MVC Pattern
• The request hits the controller
• Loads the model
• Returns the view to return to the client
Controller
Model
View

10. devcoach.com
IIS sends Response
ViewResult.Render
ViewResult locates
corresponding View
ActionResult.
ExecuteResult
ActionResult builds
ViewData / Model
Controller.{Action}Controller.ExecuteIControllerFactory
IHttpHandler.
ProcessRequest
MvcRouteHandler
(IHttpHandler)
IRouteHandler.
GetHttpHandler
URLRoutingModule
IIS takes Request

11. devcoach.com
First of all think of the URLs
• It's in the nature of the pattern that it makes
you think before you code!

12. devcoach.com
Nice URLs
• REST-like
• Fits with the nature of the web
– MVC exposes the stateless nature of HTTP
• Friendlier to humans
• Friendlier to web crawlers
– Search engine optimization (SEO)

13. devcoach.com
Defining Routes
routes.Ignore("*.svc");
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new
{
controller = "Home",
action = "Index",
id = ""
});

14. devcoach.com
Default Parameters
routes.Ignore("*.svc");
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new
{
controller = "Home",
action = "Index",
id = UrlParameter.Optional
});

15. devcoach.com
Controllers
• Base Controller Class
– Basic Functionality most folks will use
• IController Interface
– Ultimate Control for the Control Freak
• IControllerFactory
– For plugging in your own stuff (IOC, etc)

16. devcoach.com
Controller – Regular APIs
public class Controller : IController {
…
protected virtual void Execute(ControllerContext controllerContext);
protected virtual void HandleUnknownAction(string actionName);
protected virtual bool InvokeAction(string actionName);
protected virtual void InvokeActionMethod(MethodInfo methodInfo);
protected virtual bool OnError(string actionName,
MethodInfo methodInfo, Exception exception);
protected virtual void OnActionExecuted(FilterExecutedContext
filterContext);
protected virtual bool OnActionExecuting(FilterExecutedContext
filterContext);
protected virtual void RedirectToAction(object values);
protected virtual void RenderView(string viewName,
string masterName, object viewData);
}

17. devcoach.com
Controllers & Actions
public ActionResult Index()
{
return View();
}

18. devcoach.com
Action Default Values
public ActionResult View(
[DefaultValue(1)]
int page)
{
return View();
}

19. devcoach.com
Results
• ActionResult
• JsonResult
• ...

20. devcoach.com
Action Attributes
• HttpPost, HttpGet, HttpDelete, RequiresHttps
• Authorize
• ...

21. devcoach.com
Action Filters
• Allow code to be wrapped around controller
actions and view results
• Similar to HttpModules
• Provide a mechanism for removing cross
cutting code (logging, authorization, etc.)
from controller classes

22. devcoach.com
Action Filters
public class MyFilter
: ActionFilterAttribute
{
public override void OnActionExecuting(
ActionExecutingContext filterContext)
{
// Your code here…
}
}

23. devcoach.com
Passing Data
public ActionResult Index()
{
ViewData["Message"] =
"Welcome to ASP.NET MVC!";
return View();
}

24. devcoach.com
Passing Dynamic Data
public ActionResult Index()
{
ViewModel.Message =
"Welcome to ASP.NET MVC!";
return View();
}

25. devcoach.com
Passing Typed Data
public ActionResult Index()
{
var p = new Person();
return View(p);
}

26. devcoach.com
Model Binder
public ActionResult Save(Person p)
{
// No need to cope with Form/QueryString
return View(p);
}

27. devcoach.com
Asyncronous Actions
public class PortalController : AsyncController
{
public void NewsAsync(string city)
{
AsyncManager.OutstandingOperations.Increment();
NewsService newsService = new NewsService();
newsService.GetHeadlinesCompleted +=
(sender, e) =>
{
AsyncManager.Parameters["headlines"] = e.Value;
AsyncManager.OutstandingOperations.Decrement();
};
newsService.GetHeadlinesAsync(city);
}
public ActionResult NewsCompleted(string[] headlines)
{
return View(
"News", new ViewStringModel { NewsHeadlines = headlines });
}

28. devcoach.com
Value Provider
namespace System.Web.Mvc
{
public interface IValueProvider
{
bool ContainsPrefix(string prefix);
ValueProviderResult GetValue(string key);
}
}

29. devcoach.com
Views
• Pre-defined and extensible rendering
helpers
– Can use .ASPX, .ASCX, .MASTER, etc.
– Can replace with other view technologies:
• Template engines (NVelocity, Brail, …).
• Output formats (images, RSS, JSON, …).
• Mock out for testing.
– Controller sets data on the View
• Loosely typed or strongly typed data

30. devcoach.com
ASPX Views
Untyped
<%@ Page Inherits="ViewPage<dynamic>" %>
Typed
<%@ Page Inherits="ViewPage<Product>" %>

31. devcoach.com
Razor Views
Untyped
Typed
@model Product

32. devcoach.com
View Engine
public abstract class ViewEngineBase
{
public abstract void RenderView(
ViewContext viewContext);
}

33. devcoach.com
View Engine
• View Engines render output
• You get WebForms by default
• Can implement your own
– MVCContrib has ones for Brail, Nvelocity
– NHaml is an interesting one to watch
• View Engines can be used to
– Offer new DSLs to make HTML easier to write
– Generate totally different mime/types
• Images
• RSS, JSON, XML, OFX, etc.
• VCards, whatever.

34. devcoach.com
ASPX Output
• Response Write
– <%= "<b>Text with markup</b>" %>
• Html Encoding
– <%: "<b>Text with encoded markup</b>"%>

35. devcoach.com
Razor Output
• Response Write
– @(new HtmlString("<b>Text with markup</b>"))
• Html Encoding
– @"<b>Text with encoded markup</b>"

36. devcoach.com
Html Helper
• Html.Form()
• Html.ActionLink()
• Url.Content()

37. devcoach.com
Strongly Typed Helpers
• Html.TextBoxFor(m=>m.Name)
• Html.TextAreaFor()
• Html.ValidationMessageFor()

38. devcoach.com
Templated Helpers
• Display Helper Methods
– Html.Display()
– Html.DisplayFor()
– Html.DisplayForModel()
• Edit Helper Methods
– Html.Editor()
– Html.EditorFor()
– Html.EditorForModel()

39. devcoach.com
Assign Template
• By Type:
DateTime.ascx
• By Name:
Html.DisplayForModel(“MyTemplate.ascx”);
• By UIHint
[UIHint("MyPropertyTemplate")]
public string Title { get; set; }
[HiddenInput]

40. devcoach.com
Partial Views
Html.RenderPartial()
• Renders UI

41. devcoach.com
Rendered Actions
Html.RenderAction()
• Invokes action that renders UI
– Menus
– Banner Ads
– Shopping Carts
Any UI that appears in multiple pages and requires
business logic

42. devcoach.com
Areas
AreaRegistration.RegisterAllAreas();
• Enables you to maintain a clear separation of
functionality in a single project

43. devcoach.com
Area Registration
public class BlogAreaRegistration
: AreaRegistration
{
public override string AreaName
{
get { return "blog"; }
}
public override void RegisterArea(
AreaRegistrationContext context)
{
//Register Routes
}
}

44. devcoach.com
Validation
• Define rules in Model
• Server Side Validation
• Client Side Validation

45. devcoach.com
Validation Providers
• Data Annotation (Default)
• Enterprise Library
• XML
• Anything you want…

46. devcoach.com
Data Annotations
• [Required]
• [Range]
• [RegularExpression]
• [StringLength]
• [CustomValidator]

47. devcoach.com
Client Side Validation jQuery
<script
src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")"
type="text/javascript"></script>
<script
src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"
type="text/javascript"></script>
<script
src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script
src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>
<% Html.EnableClientValidation(); %>

48. devcoach.com
everything is extensible
• Custom routing handlers (IRouteHandler)
• Custom handlers (IHttpHandler)
• Custom controllers (IController,
IControllerFactory)
• Custom views (IViewEngine )
• Custom view locator (IViewLocator)
• Custom views (IViewDataContainer)