MVC Training Part 1

Software Development Manager at
Apr. 24, 2015

More Related Content


MVC Training Part 1

  1. ASP.NET MVC Training – Part 1 AN ASP.NET MVC INTRODUCTION Lee Englestone (@LeeEnglestone) Tech Lead @
  2. 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
  3. MVC Pattern/Architecture ViewController Model Initialises Selects and Renders Bound to Separation of Concerns • Controller = Code • View = UI • Model = Data
  4. 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
  5. Url Structure  Uses Url Routing (not to be confused with re-writing)  Completely configurable  By default {Controller}/{Action}/{Id}  For example /Product/View/Adidas-bag  If using ‘Areas’ then.. {Area}/{Controller}/{Action}/{Id}
  6. 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)
  7. Exercise : Create a new MVC Application
  8. Exercise : Create a 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 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)
  11. 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..
  12. 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
  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 : 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)
  15. 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)
  16. 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
  17. 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
  18. 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
  19. 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
  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  Similar to 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 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)
  23. 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
  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 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)
  26. Capturing Input with Forms These 2 are actually the same, the latter uses HtmlHelpers These are also the same (kind of). First = better
  27. 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
  28. Next time in Part 2..  HtmlHelpers,  PartialViews,  Areas,  Bundling,  Minification,  Scaffolding,  TDD/Unit Testing,  Dependency Injection,  Bootstrap,  Custom mobile views,  ModelAttributes,  ModelState,  AsyncController