ASP.NET MVC
Training – Part 1
AN ASP.NET MVC INTRODUCTION
Lee Englestone (@LeeEnglestone)
Tech Lead @ Kitbag.com
www.ManchesterDeveloper.com
Overview
 This primer covers Microsofts implementation of
the MVC pattern the ASP.NET MVC Framework
 Examples shown in C# but we use VB.NET and
there are some slight differences
 Part 1
 MVC Pattern, Models, Views, Controllers, Actions,
Routing, ActionFilters, Razor, Layout Views,
Capturng Input
 Part 2
 HtmlHelpers, PartialViews, Areas, Bundling,
Minification, Scaffolding, TDD/Unit Testing,
Dependency Injection, Bootstrap, Custom mobile
views, ModelAttributes, ModelState, AsyncController
MVC Pattern/Architecture
ViewController
Model
Initialises
Selects and
Renders
Bound to
Separation of Concerns
• Controller = Code
• View = UI
• Model = Data
ASP.NET MVC v WebForms
WebForms
 Maintain states with
VIewState, Postbacks and
Page Events
 One big form on each page
 Less control over rendered
HTML
MVC
 Does not automatically
maintain state between
requests. Uses HTTP GET and
POST
 Can have multiple forms on
a page
 More control over rendered
HTML
 TDD a lot easier
 Seperation of Concerns
Note : MVC does not replace WebForms. WebForms are not evil and they
can also be used with best practices. But it’s easier to see the benefits of
using MVC (In my opinion) especially in Greenfield development
Url Structure
 Uses Url Routing (not to be confused with re-writing)
 Completely configurable
 By default
 http://www.site.com/{Controller}/{Action}/{Id}
 For example /Product/View/Adidas-bag
 If using ‘Areas’ then..
 http://www.site.com/{Area}/{Controller}/{Action}/{Id}
Routing
 Routes kept in RouteTable
 Defined by default in
App_Start/RouteConfig.cs
 Routes urls in an
expected format to an
Action on Controller
 Can have restrictions..
 i.e. Id must be integer or
2 characters long
The default route (if none provided is Home/Index)
Exercise : Create a new
MVC Application
Exercise : Create a new
MVC Application
ASP.NET MVC
Solution Structure
 It should be obvious
where Models, Views and
Controllers live
 Content = .css files
Controllers
 The entry point of http / page
requests
 Mapped to by Routing
 Contain ‘Action’ methods
 For example returning views,
content, redirects
 Inherit from
System.Web.Mvc.Controller
class
 AsyncController also exists
(Discussed in Part 2)
Actions
 Methods on Controllers
 If no action is present in url, then the Index method is called (if exists)
so /home would execute Index Action on HomeController
These are just
returning empty
views at the moment
By default it will a
return a view with the
same name as the
Action
ViewBags are
dynamic objects..
ViewBags
 Are dynamic objects
 They circumvent strongly typing model properties
in views so use sparingly and only if necessary
 We don’t use ViewBags
 It’s a much better practice to instantiate a
‘Model’ with populated data and pass into the
view
ActionResult Types
 EmptyResult
 ContentResult*
 JsonResult*
 RedirectResult*
 RedirectToRouteResult
 ViewResult*
 PartialViewResult*
 FileResult
 FilePathResult
 FileContentResult
 FileStreamResult
 JavaScriptResult
*The main ones you’ll use
The Following things can be returned from Actions
Exercise : Run Application
 Hit F5
Note: This is /Home/Index
i.e Home Controller, Index
Action
This design is the
Bootstrap css framework
(Discussed in Part 2)
Models
 Models are usually simple classes with
a number or properties which will be
used in the Views
 Properties can be decorated with
different attributes to provide
additional functionality (Covered in
Part 2)
Views
 Views are returned from Controllers
 Before the View is returned a Model can be
bound to it
 They can access Properties on the Views Model in
in a type safe manner
Type of Model, the View uses
Binding to Properties on the Model
General code can be ran in
‘server’ blocks
Exercise : Create
HomeViewModel Model
 Create a new file/class in /Models called
HomeViewModel.cs
 Add a DateTime property on the class called Now
 Add a string property on the class called Message
Exercise : Bind HomeViewModel to
Index View
 In the Index Action on the HomeController..
 Instantiate a new HomeViewModel object
 Set Now property to DateTime.Now
 Give Message some text
 Return the Model in the View() result
Exercise : Update Home/Index
View to use HomeViewModel
 Open /Views/Home/Index.cshtml
 Add a @model declaration at the top to use your new
HomeViewModel
 Bind the Message property and the Now property to
somewhere on the page using the Razor syntax
 Press F5, refreshing page will hit controller and update time
each time
Razor View Syntax
 Razor is a markup syntax
 Uses @
 Used in .cshtml & .vbhtml files
 Slightly similar to WebForms <% %>
Code block & variable assignment
Using variable from earlier code
block
Iterating over collection
Conditional clauses
Layout Views
 Similar to WebForms .Master pages
 Provides common html for pages to share
 Provides area for page specific content
 Default located at ViewsShared_Layout.cshtml
Default Layout View
HtmlHelpers that create
Hyperlinks (Discussed in Part 2)
Where main body of Views will appear
Partial View (Discussed in Part 2)
Script Bundle (Discussed in Part 2)
Style Bundle (Discussed in Part 2)
Action Filters
 Can run code before / after an action is called
 Commonly used ‘out of the box’ ActionFilters
 [OutputCache(Duration=“60”)]
 Caches and returns the previous result of the Action
for the declared duration. Can VaryByParam etc
 [Authorize]
 Only allow action to be executed if current user is
authenticated
(HttpContext.Current.User.Identity.IsAuthenticated)
 [HttpPost]
 Only allow requests HttpPosts to this Action
Exercise : ActionFilters
 Add [OutputCache(Duration=60)] to Index
method on HomeController
 Run application
 Refresh browser and notice Action code is not
being executed subsequent times and the
previous Action result (View) is returned.
 Add [Authorize] to the About Action on the
HomeController
 Run application
 Try to go to About page and notice you’ll be
redirected to login page
Capturing Input with Forms
 Html Form “action” must be to a Controller Action
that expects an HttpPost. (Decorated with
[HttpPost])
 Name attributes of Inputs on the form need to
match property names on the Views Model
(HtmlHelpers do this automatically, discussed in
Part 2)
Capturing Input with Forms
These 2 are actually the same,
the latter uses HtmlHelpers
These are also the same
(kind of). First = better
Exercise : Capturing Form data
Extend the Model
 Add FirstName and LastName string properties to
HomeViewModel class
Extend the View to accept user input
 Update Home/Index View to include a form with FirstName and
LastName fields (see previous slide) whose action is Home/Save
Create Thanks Model
 Create new Model called Model/ThanksViewModel with
FirstName, LastName properties
Create Thanks View
 Create Home/Thanks View, that uses ThanksViewModel and
displays FirstName and LastName on page
Extend HomeController
 Add a Save Action that has [HttpPost] attribute, accepts
HomeViewModel and returns a ThanksViewModel to Thanks
View
Next time in Part 2..
 HtmlHelpers,
 PartialViews,
 Areas,
 Bundling,
 Minification,
 Scaffolding,
 TDD/Unit Testing,
 Dependency Injection,
 Bootstrap,
 Custom mobile views,
 ModelAttributes,
 ModelState,
 AsyncController

MVC Training Part 1

  • 1.
    ASP.NET MVC Training –Part 1 AN ASP.NET MVC INTRODUCTION Lee Englestone (@LeeEnglestone) Tech Lead @ Kitbag.com www.ManchesterDeveloper.com
  • 2.
    Overview  This primercovers Microsofts implementation of the MVC pattern the ASP.NET MVC Framework  Examples shown in C# but we use VB.NET and there are some slight differences  Part 1  MVC Pattern, Models, Views, Controllers, Actions, Routing, ActionFilters, Razor, Layout Views, Capturng Input  Part 2  HtmlHelpers, PartialViews, Areas, Bundling, Minification, Scaffolding, TDD/Unit Testing, Dependency Injection, Bootstrap, Custom mobile views, ModelAttributes, ModelState, AsyncController
  • 3.
    MVC Pattern/Architecture ViewController Model Initialises Selects and Renders Boundto Separation of Concerns • Controller = Code • View = UI • Model = Data
  • 4.
    ASP.NET MVC vWebForms WebForms  Maintain states with VIewState, Postbacks and Page Events  One big form on each page  Less control over rendered HTML MVC  Does not automatically maintain state between requests. Uses HTTP GET and POST  Can have multiple forms on a page  More control over rendered HTML  TDD a lot easier  Seperation of Concerns Note : MVC does not replace WebForms. WebForms are not evil and they can also be used with best practices. But it’s easier to see the benefits of using MVC (In my opinion) especially in Greenfield development
  • 5.
    Url Structure  UsesUrl Routing (not to be confused with re-writing)  Completely configurable  By default  http://www.site.com/{Controller}/{Action}/{Id}  For example /Product/View/Adidas-bag  If using ‘Areas’ then..  http://www.site.com/{Area}/{Controller}/{Action}/{Id}
  • 6.
    Routing  Routes keptin RouteTable  Defined by default in App_Start/RouteConfig.cs  Routes urls in an expected format to an Action on Controller  Can have restrictions..  i.e. Id must be integer or 2 characters long The default route (if none provided is Home/Index)
  • 7.
    Exercise : Createa new MVC Application
  • 8.
    Exercise : Createa new MVC Application
  • 9.
    ASP.NET MVC Solution Structure It should be obvious where Models, Views and Controllers live  Content = .css files
  • 10.
    Controllers  The entrypoint of http / page requests  Mapped to by Routing  Contain ‘Action’ methods  For example returning views, content, redirects  Inherit from System.Web.Mvc.Controller class  AsyncController also exists (Discussed in Part 2)
  • 11.
    Actions  Methods onControllers  If no action is present in url, then the Index method is called (if exists) so /home would execute Index Action on HomeController These are just returning empty views at the moment By default it will a return a view with the same name as the Action ViewBags are dynamic objects..
  • 12.
    ViewBags  Are dynamicobjects  They circumvent strongly typing model properties in views so use sparingly and only if necessary  We don’t use ViewBags  It’s a much better practice to instantiate a ‘Model’ with populated data and pass into the view
  • 13.
    ActionResult Types  EmptyResult ContentResult*  JsonResult*  RedirectResult*  RedirectToRouteResult  ViewResult*  PartialViewResult*  FileResult  FilePathResult  FileContentResult  FileStreamResult  JavaScriptResult *The main ones you’ll use The Following things can be returned from Actions
  • 14.
    Exercise : RunApplication  Hit F5 Note: This is /Home/Index i.e Home Controller, Index Action This design is the Bootstrap css framework (Discussed in Part 2)
  • 15.
    Models  Models areusually simple classes with a number or properties which will be used in the Views  Properties can be decorated with different attributes to provide additional functionality (Covered in Part 2)
  • 16.
    Views  Views arereturned from Controllers  Before the View is returned a Model can be bound to it  They can access Properties on the Views Model in in a type safe manner Type of Model, the View uses Binding to Properties on the Model General code can be ran in ‘server’ blocks
  • 17.
    Exercise : Create HomeViewModelModel  Create a new file/class in /Models called HomeViewModel.cs  Add a DateTime property on the class called Now  Add a string property on the class called Message
  • 18.
    Exercise : BindHomeViewModel to Index View  In the Index Action on the HomeController..  Instantiate a new HomeViewModel object  Set Now property to DateTime.Now  Give Message some text  Return the Model in the View() result
  • 19.
    Exercise : UpdateHome/Index View to use HomeViewModel  Open /Views/Home/Index.cshtml  Add a @model declaration at the top to use your new HomeViewModel  Bind the Message property and the Now property to somewhere on the page using the Razor syntax  Press F5, refreshing page will hit controller and update time each time
  • 20.
    Razor View Syntax Razor is a markup syntax  Uses @  Used in .cshtml & .vbhtml files  Slightly similar to WebForms <% %> Code block & variable assignment Using variable from earlier code block Iterating over collection Conditional clauses
  • 21.
    Layout Views  Similarto WebForms .Master pages  Provides common html for pages to share  Provides area for page specific content  Default located at ViewsShared_Layout.cshtml
  • 22.
    Default Layout View HtmlHelpersthat create Hyperlinks (Discussed in Part 2) Where main body of Views will appear Partial View (Discussed in Part 2) Script Bundle (Discussed in Part 2) Style Bundle (Discussed in Part 2)
  • 23.
    Action Filters  Canrun code before / after an action is called  Commonly used ‘out of the box’ ActionFilters  [OutputCache(Duration=“60”)]  Caches and returns the previous result of the Action for the declared duration. Can VaryByParam etc  [Authorize]  Only allow action to be executed if current user is authenticated (HttpContext.Current.User.Identity.IsAuthenticated)  [HttpPost]  Only allow requests HttpPosts to this Action
  • 24.
    Exercise : ActionFilters Add [OutputCache(Duration=60)] to Index method on HomeController  Run application  Refresh browser and notice Action code is not being executed subsequent times and the previous Action result (View) is returned.  Add [Authorize] to the About Action on the HomeController  Run application  Try to go to About page and notice you’ll be redirected to login page
  • 25.
    Capturing Input withForms  Html Form “action” must be to a Controller Action that expects an HttpPost. (Decorated with [HttpPost])  Name attributes of Inputs on the form need to match property names on the Views Model (HtmlHelpers do this automatically, discussed in Part 2)
  • 26.
    Capturing Input withForms These 2 are actually the same, the latter uses HtmlHelpers These are also the same (kind of). First = better
  • 27.
    Exercise : CapturingForm data Extend the Model  Add FirstName and LastName string properties to HomeViewModel class Extend the View to accept user input  Update Home/Index View to include a form with FirstName and LastName fields (see previous slide) whose action is Home/Save Create Thanks Model  Create new Model called Model/ThanksViewModel with FirstName, LastName properties Create Thanks View  Create Home/Thanks View, that uses ThanksViewModel and displays FirstName and LastName on page Extend HomeController  Add a Save Action that has [HttpPost] attribute, accepts HomeViewModel and returns a ThanksViewModel to Thanks View
  • 28.
    Next time inPart 2..  HtmlHelpers,  PartialViews,  Areas,  Bundling,  Minification,  Scaffolding,  TDD/Unit Testing,  Dependency Injection,  Bootstrap,  Custom mobile views,  ModelAttributes,  ModelState,  AsyncController