(public).sospep.subjects ~ view article ~ introduction-MVC-lesson-5

<h1 style="text-align: center;">Introduction to MVC</h1>
<h2 style="text-align: center;">Lesson&nbsp;5 - Views</h2>
<h2>[WHAT]</h2>
<ol>
<li>]&nbsp;VIDEO SUMMARY -&nbsp;notes on this lesson which explains what views do in more detail,</li>
</ol>
<h2>[WHY]</h2>
<ol>
<li>]&nbsp;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>&nbsp;- Lesson&nbsp;4 -&nbsp;Controllers - &nbsp;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 -&nbsp;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 &amp;&amp; it just works</li>
<li>] your views - need to appear inside of the ....&nbsp;/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 -&nbsp;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&nbsp;</li>
<li>] MVC runtime determines the meaning of @symbol base on context, &lt; a hrelf=mailto:me@home.com&gt; 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 =&gt; 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=&gt;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 =&gt; model.Title)</li>
<li>] foreach(var item in Model) {</li>
<li>] example index view - <strong>Html.DisplayFor</strong>(modelItem =&gt; 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&nbsp;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 - &nbsp;display all error messages in one location , typically used for server side errors, ex TRY save to db&nbsp; result = fail</li>
</ol>
<li><strong>[35:00] layouts&nbsp;</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 -&nbsp; 3 col - links on outside, content in the center</li>
<li>] layout is all about ensuring consistent pages,&nbsp;&nbsp;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&nbsp;</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&nbsp;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&nbsp; 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>&nbsp;</li>
</ol><hr />
<h1 style="text-align: center;">quiz</h1>
<p>&nbsp;</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=&nbsp;HtmlHelper objects link a Controller with Views.<br /> &nbsp;&nbsp; &gt; HtmlHelper objects determine the input element to use for a property.<br /> &nbsp;&nbsp; &gt; HtmlHelper objects determine the display names for properties.<br />&nbsp;&nbsp; HtmlHelper objects optimize the HTML output for a View.</p>
<p>&gt; 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,&nbsp;-model, -dbcontext, &nbsp;</p>
<p>&gt; 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 />&nbsp;&nbsp;&nbsp;</p>
<p>results &nbsp;</p>
<p>&nbsp;4/5 PRB ? = which 2 objects can you pass to begin from method</p>
<h1>&nbsp;</h1>

~ view article ~ Chapter] ch-100-introduction-to-MVC FROM [ Book] asp.net IN [ libraries] technology-developer-www