article

Introduction to MVC

Lesson 5 - Views

[WHAT]

  1. ] VIDEO SUMMARY - notes on this lesson which explains what views do in more detail,

[WHY]

  1. ] how views are found -
  2. ] views and models - interaction between views and modes
  3. ] razor syntax -
  4. ] HtmlHelper -
  5. ] Layouts -

[WHERE]

  1. ] WATCH THE FULL VIDEO
    1. ] Microsoft MVC intro - Lesson 4 - Controllers -  by microsoft's Jon Galloway and Christopher Harrison

[WHEN]

  1. ] 2014-06-24 - produced

[EXAMPLE]

  1. [00:00] views
    1. ] whats the code that determines how views are found
    2. ] MVC is about convention, rather than compilation, follow a few simple rules && it just works
    3. ] your views - need to appear inside of the .... /views directory
    4. ] views typically contains 1 /subdirectory for each controller
    5. ] /shared directory - which contain views that are share across multiple ...
    6. ] example - AlbumController would look inside of /views/album directory,
    7. ] ...
  2. [05:00] DEMO - view resolutions
    1. ] Chris shows display View that doesn't exist, goes to browser and attempts to access it
    2. ] error message - contains listing of all the paths that it searched in order to locate the view
    3. ] even looks for MVC 1 .aspx, ascx files from legacy MVC 1
  3. [00:00] how does the view know, what datatype the model will be?
    1. ] every view has a model property
    2. ] Type is set by @model declaration
    3. ] NOTE the casing @model
    4. ] advanced - possible to NOT type a view to a specific object
  4. [10:30] Razor syntax
    1. ] use the @symbol to denote server side code 
    2. ] MVC runtime determines the meaning of @symbol base on context, < a hrelf=mailto:me@home.com> generates the appropriate html
    3. ] use @@ to specifically declare @
    4. ] type html whereever you want html, type @ when you want to insert code
    5. ] @ denotes server side code
    6. ] remember - the goal of decorating models with attributes
  5. [16:00] HtmlHelper
    1. ] einstein once said, dont memorize anything you cna lookup, chris says dont write html(hardcode) for anything you can lookup, let MVC htmlHelper write it for you
    2. ] Helper uses attributes on model, to determine display names, formatting, input elements
  6. [17:30] HtmlHelper and Lambdas
    1. ] @Html.DisplayFor(model => model.name)
    2. ] MVC uses reflection, reflection isnt evil, its much improved over the years, small performance hit, performance is a feature, reflection is cached, time to market is often more important then MAX perf.
    3. ] using reflection also keeps things up to date, if code gets changed it wont break
    4. ] @Helper methods NEED the property model.name NOT the VALUE Model.name
    5. ] we need the property b/c we need the attributes that are on the property
    6. ] consider @Html.DisplayFor(m=>m.Name) for readability
  7. [23:00] Displaying Data
    1. ] DisplayNameFor - display name attribute, display attribute, name property
    2. ] DisplayFor - uses display format if applicable
    3. ] example index view - Html.DisplayNameFor(model => model.Title)
    4. ] foreach(var item in Model) {
    5. ] example index view - Html.DisplayFor(modelItem => item.Title) ** because its a list IEnumerable, you want the actual var
    6. ] exception to the rule - when your looping through an enumaration
  8. [25:30] Html.ActionLink()
    1. ] will automatically generate links for you
    2. ] automatically looks at the routes you have created, generates the links based upon the routes that you have create
    3. ] good demo of why to use htmlhelper - peoples reaction - i can write html myself, yes you can but, things change, thing long term
  9. [27:30] accepting input
    1. ] LabelFor - creates a label element, useful for touch
    2. ] InputFor - creates an input element, uses HTML5 based on data-type attribute,
    3. ] demo of ...
    4. ] dropdown list, how it works, it just works, its baked right in
    5. ] explanation of the how the dropdown list works
  10. [33:30] validation
    1. ] ValidationMessageFor - display error message next to textbox
    2. ] ValidationSummary -  display all error messages in one location , typically used for server side errors, ex TRY save to db  result = fail
  11. [35:00] layouts 
    1. ] organization and consistency shall set you free, when we are creating a web page/app/site we are not giving the user an instruction manual,
    2. ] keep things consistent, makes it easier for user,
    3. ] example - standard layout -  3 col - links on outside, content in the center
    4. ] layout is all about ensuring consistent pages,  and they just work !!
    5. ] layout methods
    6. ] RenderBody() - renders all view content that is not in a section
    7. ] RenderSection(name, required:true||false) - allows views to add specific sections, ex scripts, banners, sidebar, use @section name to create section in a view
  12. [38:30] demo layouts
    1. *] _ViewStart.cs - is file in root of /views directory, contains code that will be executed prior to any view being displayed,
    2. ] includes statement to set "layout" for all views
    3. ] Layout = "/Views/Shared/_Layout.cshtml"
    4. ] deletes Layout and shows form without the Layout file, looks totally different
    5. ] Layout can be added later,
    6. ] reviews content of layout section
    7. ] layout template includes standard html, for head, navigation, header, body, footer 
    8. ] head includes Styles.Render, Scripts.Render calls, which are more "magic" - that bundles all of your css files, and all your script files into a single download package VS
    9. ] call to RenderBody() - will add content of view being called to body
    10. ] call to RenderSection(scripts, required:false) - will add scripts to bottom of page(in this case)
  13. [41:30] review
    1. ] use the HtmlHelpers - in the long run will maker you
    2. ] razor syntax - it just works, thats it
    3. ] VIEW MODEL jon adds quick demo of  creating a viewModel class- in response to chat question
    4. ] vm is just a class
    5. ] POINT is IF your models dont cleanly MAP to a view
    6. ] DONT STRESS - CREATE a viewModel that has the data that you want to pass to your view
    7. ] see Rachel Appel blog on view models for more info
    8. ] next lesson is on

[HOW-TO]

  1. ] # 5050 - my project - guide to asp.net - MVC
    1. ] # # -

[REFERENCE]

  1. ] # 5359 - overview series 

quiz

 

x] Which two statements about Views are true?

x] Which statements describe HtmlHelper objects? Choose all that apply.

a= HtmlHelper objects link a Controller with Views.
   > HtmlHelper objects determine the input element to use for a property.
   > HtmlHelper objects determine the display names for properties.
   HtmlHelper objects optimize the HTML output for a View.

> You can create a View that does not reference a Model
x] Which two objects can you pass as a parameter to the HtmlHelper.BeginForm method

- form method, -model, -dbcontext,  

> You are using Razor syntax to develop an ASP.NET MVC application. Which symbol indicates code that should run on the server?

--

You need to create a View that displays an invoice date. You must display the date with a specific format. Which HtmlHelper object method should you use?
You need to display information in a specific area of a page. Which method should you use?


   

results  

 4/5 PRB ? = which 2 objects can you pass to begin from method

 

Details Photos Edit more

Details

ID: 4586

NAME: introduction-MVC-lesson-5

DESCRIPTION: [44:46]VIDEO-SUMMARY Introduction to MVC - Lesson 5 - Views - by Jon Galloway and Christopher Harrison of Microsoft - how views work in MVC, models and views - the interaction between them, razor syntax, HtmlHelpers and Layouts

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: -5

OWNER ID: 75

Content Photos Edit more

photos

page_photo

actions

Email Email-Owner SMS and