ASP NET Web Development 2

							ASP.NET Web Development 2

                   6. Views
The role of a view
   The view is responsible for providing the UI
   Transforms the model into a format ready to
    be presented to the user
   User’s interaction with an application starts
    with the view




                      ASP.NET Web Development 2     6. Views
                                                           2
The model
   Instance of ViewDataDictionary
   Values can be stored and accessed by key,
    e.g. ViewData[“Productname”]
   Also has property Model which can contain a
    strongly typed object
   ViewBag is a dynamically-typed wrapper
    around ViewData
   Values stored/accessed as properties, e.g.
    ViewBag.ProductName
                     ASP.NET Web Development 2    6. Views
                                                         3
ViewBag
   ViewBag uses C#4 dynamic types to give
    some “syntactic sugar” for ViewData, e.g no
    need for casting
   With dynamic types, compile-time type
    checking is deferred
   ViewBag is an instance of a class called
    DynamicViewDataDictionary
       Properties can be added dynamically
       Internal, sealed, basically undocumented class
   ViewData/ViewBag are interchangeable(!)
                          ASP.NET Web Development 2      6. Views
                                                                4
Strongly typed views
   Pass the model (or view model) to the view
    as a strongly typed object
   Cleaner syntax in view
   Make use of templated HTML helpers
   Either specify fully-qualified type name or
    include a @using declaration

    @using MvcApplication1.Models
    @model Product
                      ASP.NET Web Development 2   6. Views
                                                         5
View engines
   Visual Studio includes support for Web
    Forms and Razor view engines
   Razor is the default view engine moving
    forward
       Also used in ASP.NET Web Pages and
        WebMatrix
   Can have more than one view engine
    registered in one application
   Other 3rd party view engines are available
   Focus on Razor, look at other examples later
                       ASP.NET Web Development 2   6. Views
                                                          6
View search order
   By convention, view engine looks for a view
    which matches the name of action method, if
    no view name specified, or name specified in
    ViewResult
   View is expected to be in folder under Views
    with name matching controller
   Each engine has a defined search path
   The following example shows the default for
    the default MVC3 project template
                     ASP.NET Web Development 2     6. Views
                                                          7
View search order
   Looking for non-existent view for Index action
    in Home controller – error page shows search:




                      ASP.NET Web Development 2   6. Views
                                                         8
Changing search order
   Can control the registration and order of
    search engines by adding code in
    Global.asax
   The following code reverses the order of
    Razor and Web Forms engine precedence



   Omitting last line restricts search to Razor
    views only
                       ASP.NET Web Development 2   6. Views
                                                          9
Scaffolding a view
   Create View dialog gives option to choose a
    Scaffold template
   Scaffolding automates common development
    tasks
   e.g. “Create” template will generate basic
    form view with fields based on model type
   Based on T4 templates, which are
    customisable
       <VS Install Directory>\Common7\IDE\ItemTemplates\
        Csharp\Web\MVC 3\CodeTemplates\AddView\CSHTML
                            ASP.NET Web Development 2       6. Views
                                                                  10
Scaffolding
   Not just for views
   Create Controller dialog can scaffold a
    controller with action methods and views
   For further customisability, install
    MvcScaffolding NuGet package
   Provided T4 templates can scaffold
    controllers, views, EF models, databases,
    repositories, unit tests
   Can extend by creating custom templates
                     ASP.NET Web Development 2   6. Views
                                                       11
Razor syntax
   See demo code for examples of:
       Comments
       Code blocks
       Implicit code expressions
       Explicit code expressions
       Encoded/Raw Html
       Combining code with markup/plain text




                         ASP.NET Web Development 2   6. Views
                                                           12
Layouts
   Similar to master pages in web forms
   Layout page looks like Razor view, but
    includes @RenderBody
   Placeholder for page content
   Layout specified explicitly by Layout property



   ViewStart sets default layout - overridden by
    explicit setting in a view
                      ASP.NET Web Development 2      6. Views
                                                           13
Layout sections
   A layout may have multiple sections
   Rendered in layout with call to RenderSection
@RenderSection(“Footer”)


   Page should define a section with this name
@section Footer{
 This is the footer
 }
                      ASP.NET Web Development 2   6. Views
                                                        14
Partial views
   Similar to Web Forms user controls
       With Web Forms view engine, partial views have
        .ascx suffix, but no distinction with Razor
   Can be reused in different views
   Loaded within same request as main page
    using Html.Action or Html.RenderAction
   Can also be loaded with asynchronous
    request, e.g. from jQuery script
   Can mark action methods as ChildActionOnly
                         ASP.NET Web Development 2       6. Views
                                                               15
HTML Helpers
   Html property of Razor page base class
    (WebViewPage) is instance of HtmlHelper
    class
   Extension methods defined in classes in
    System.Web.Mvc.Html namespace
   InputExtensions, FormExtensions,
    LinkExtensions, etc.
   Can write custom helpers as extension
    methods for Html
                    ASP.NET Web Development 2   6. Views
                                                      16
HTML Helpers
   We have seen examples of HTML helpers for
    forms, inputs, links, etc.
   See demo code for examples of:
       Difference between untyped and strongly typed
        helpers
       WebGrid helper
       Creating a custom helper




                         ASP.NET Web Development 2      6. Views
                                                              17
IViewEngine
   Role of a view engine is to translate requests
    for views into ViewEngineResult objects
   Implements IViewEngine interface, which
    defines:
       FindView
       FindPartialView
       ReleaseView
   ViewEngineResult essentially tells framework
    whether a view was found by a particular
    view engine
                          ASP.NET Web Development 2   6. Views
                                                            18
IView
   A view generates response to client
   Implements IView interface, which defines:
       Render
   Parameters for Render are a ViewContext
    and a TextWriter
   Can simply render output to response using
    TextWriter
   See example in Freeman & Sanderson

                     ASP.NET Web Development 2   6. Views
                                                       19
Razor view engine
   Razor views are compiled dynamically at
    runtime to a class which derives from
    WebViewPage (specified in web.config)
   RazorViewEngine searches for requested
    view
   RazorViewEngine and RazorView work
    together to render a response based on the
    properties of the class obtained by compiling
    the view

                      ASP.NET Web Development 2     6. Views
                                                          20
Other view engines
   Spark
       Uses a very declarative syntax for views
   NHaml
       A port of the Ruby on Rails Haml view engine
   Brail
       Uses the Boo language
   NVelocity
       A port of Apache Velocity project


                          ASP.NET Web Development 2    6. Views
                                                             21
Other view engines
   Most of these predate MVC and are not
    specific to it
       “The ASP.NET MVC Framework supports the
        ability to use any templating engine to help with
        generating UI (including existing templating
        engines like NVelocity, Brail - as well as new ones
        you write yourself)”. -- ScottGu
   Motivations for using other view engines may
    include preference for a different language or
    need to use legacy templates
                          ASP.NET Web Development 2       6. Views
                                                                22
Example - Spark
   http://sparkviewengine.com/
   Can be added to an MVC project as a NuGet
    package
   Can add intellisense in VS2010 with
    SparkSense extension
   Views have .spark extension
   Spark and Razor can run side-by-side in
    same project

                    ASP.NET Web Development 2   6. Views
                                                      23