edit-article
Home
Up
Delete
Article Name:
Article 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
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">Introduction to MVC</h1> <h2 style="text-align: center;">Lesson 5 - Views</h2> <h2>[WHAT]</h2> <ol> <li>] VIDEO SUMMARY - notes on this lesson which explains what views do in more detail,</li> </ol> <h2>[WHY]</h2> <ol> <li>] how views are found -</li> <li>] views and models - interaction between views and modes</li> <li>] razor syntax -</li> <li>] HtmlHelper -</li> <li>] Layouts -</li> </ol> <h2>[WHERE]</h2> <ol> <li><strong>] WATCH THE FULL VIDEO</strong></li> <ol> <li> <div class="inlineBlock overview-tab-headers semi-bold" title="Basics of MVC and the Moving Parts" data-bind="html: title(), attr: { 'title': title() }">] <a href="https://www.microsoftvirtualacademy.com/en-US/training-courses/introduction-to-asp-net-mvc-8322" target="_blank">Microsoft MVC intro</a> - Lesson 4 - Controllers - by microsoft's <a href="/view/person?id=347" target="_blank">Jon Galloway</a> and Christopher Harrison</div> </li> </ol></ol> <h2>[WHEN]</h2> <ol> <li>] 2014-06-24 - produced</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li><strong>[00:00] views</strong></li> <ol> <li>] whats the code that determines how views are found</li> <li>] MVC is about convention, rather than compilation, follow a few simple rules && it just works</li> <li>] your views - need to appear inside of the .... /views directory</li> <li>] views typically contains 1 /subdirectory for each controller</li> <li>] /shared directory - which contain views that are share across multiple ...</li> <li>] example - AlbumController would look inside of /views/album directory,</li> <li>] ...</li> </ol> <li><strong>[05:00] DEMO - view resolutions</strong></li> <ol> <li>] Chris shows display View that doesn't exist, goes to browser and attempts to access it</li> <li>] error message - contains listing of all the paths that it searched in order to locate the view</li> <li>] even looks for MVC 1 .aspx, ascx files from legacy MVC 1</li> </ol> <li><strong>[00:00] how does the view know, what datatype the model will be?</strong></li> <ol> <li>] every view has a model property</li> <li>] Type is set by @model declaration</li> <li>] NOTE the casing @model</li> <li>] advanced - possible to NOT type a view to a specific object</li> </ol> <li><strong>[10:30] Razor syntax</strong></li> <ol> <li>] use the @symbol to denote server side code </li> <li>] MVC runtime determines the meaning of @symbol base on context, < a hrelf=mailto:me@home.com> generates the appropriate html</li> <li>] use @@ to specifically declare @</li> <li>] type html whereever you want html, type @ when you want to insert code</li> <li>] @ denotes server side code</li> <li>] remember - the goal of decorating models with attributes</li> </ol> <li><strong>[16:00] HtmlHelper</strong></li> <ol> <li>] 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</li> <li>] Helper uses attributes on model, to determine display names, formatting, input elements</li> </ol> <li><strong>[17:30] HtmlHelper and Lambdas</strong></li> <ol> <li>] @Html.DisplayFor(model => model.name)</li> <li>] 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.</li> <li>] using reflection also keeps things up to date, if code gets changed it wont break</li> <li>] @Helper methods NEED the property model.name NOT the VALUE Model.name</li> <li>] we need the property b/c we need the attributes that are on the property</li> <li>] consider @Html.DisplayFor(m=>m.Name) for readability</li> </ol> <li><strong>[23:00] Displaying Data</strong></li> <ol> <li>] DisplayNameFor - display name attribute, display attribute, name property</li> <li>] DisplayFor - uses display format if applicable</li> <li>] example index view -<strong> Html.DisplayNameFor</strong>(model => model.Title)</li> <li>] foreach(var item in Model) {</li> <li>] example index view - <strong>Html.DisplayFor</strong>(modelItem => item.Title) ** because its a list IEnumerable, you want the actual var</li> <li>] exception to the rule - when your looping through an enumaration</li> </ol> <li><strong>[25:30] Html.ActionLink()</strong></li> <ol> <li>] will automatically generate links for you</li> <li>] automatically looks at the routes you have created, generates the links based upon the routes that you have create</li> <li>] good demo of why to use htmlhelper - peoples reaction - i can write html myself, yes you can but, things change, thing long term</li> </ol> <li><strong>[27:30] accepting input</strong></li> <ol> <li>] LabelFor - creates a label element, useful for touch</li> <li>] InputFor - creates an input element, uses HTML5 based on data-type attribute,</li> <li>] demo of ...</li> <li>] dropdown list, how it works, it just works, its baked right in</li> <li>] explanation of the how the dropdown list works</li> </ol> <li><strong>[33:30] validation </strong></li> <ol> <li>] ValidationMessageFor - display error message next to textbox</li> <li>] ValidationSummary - display all error messages in one location , typically used for server side errors, ex TRY save to db result = fail</li> </ol> <li><strong>[35:00] layouts </strong></li> <ol> <li>] 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,</li> <li>] keep things consistent, makes it easier for user,</li> <li>] example - standard layout - 3 col - links on outside, content in the center</li> <li>] layout is all about ensuring consistent pages, and they just work !!</li> <li><strong>] layout methods</strong></li> <li>] RenderBody() - renders all view content that is not in a section</li> <li>] RenderSection(name, required:true||false) - allows views to add specific sections, ex scripts, banners, sidebar, use @section name to create section in a view</li> </ol> <li><strong>[38:30] demo layouts</strong></li> <ol> <li>*] _ViewStart.cs - is file in root of /views directory, contains code that will be executed prior to any view being displayed,</li> <li>] includes statement to set "layout" for all views</li> <li>] Layout = "/Views/Shared/_Layout.cshtml"</li> <li>] deletes Layout and shows form without the Layout file, looks totally different</li> <li>] Layout can be added later,</li> <li>] reviews content of layout section</li> <li>] layout template includes standard html, for head, navigation, header, body, footer </li> <li>] 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</li> <li>] call to RenderBody() - will add content of view being called to body</li> <li>] call to RenderSection(scripts, required:false) - will add scripts to bottom of page(in this case)</li> </ol> <li><strong>[41:30] review</strong></li> <ol> <li>] use the HtmlHelpers - in the long run will maker you</li> <li>] razor syntax - it just works, thats it</li> <li>] VIEW MODEL jon adds quick demo of creating a viewModel class- in response to chat question</li> <li>] vm is just a class</li> <li><span style="background-color: #00ff00;">] POINT is IF your models dont cleanly MAP to a view </span></li> <li><span style="background-color: #00ff00;">] DONT STRESS - CREATE a viewModel that has the data that you want to pass to your view</span></li> <li>] see Rachel Appel blog on view models for more info</li> <li>] next lesson is on</li> </ol></ol> <h2>[HOW-TO]</h2> <ol> <li>] # 5050 - my project - guide to asp.net - MVC</li> <ol> <li>] # # -</li> </ol></ol> <h2>[REFERENCE]</h2> <ol> <li>] <a href="/view/task?id=5359" target="_blank"># 5359 - overview series</a> </li> </ol><hr /> <h1 style="text-align: center;">quiz</h1> <p> </p> <p>x] Which two statements about Views are true?</p> <p>x] Which statements describe HtmlHelper objects? Choose all that apply.</p> <p>a= HtmlHelper objects link a Controller with Views.<br /> > HtmlHelper objects determine the input element to use for a property.<br /> > HtmlHelper objects determine the display names for properties.<br /> HtmlHelper objects optimize the HTML output for a View.</p> <p>> You can create a View that does not reference a Model<br />x] Which two objects can you pass as a parameter to the HtmlHelper.BeginForm method</p> <p>- form method, -model, -dbcontext, </p> <p>> You are using Razor syntax to develop an ASP.NET MVC application. Which symbol indicates code that should run on the server?</p> <p>--</p> <p>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?<br />You need to display information in a specific area of a page. Which method should you use?</p> <p><br /> </p> <p>results </p> <p> 4/5 PRB ? = which 2 objects can you pass to begin from method</p> <h1> </h1>