(public).sospep.subjects ~ view article ~ introduction-asp.net5-lesson-3

<h1 style="text-align: center;">Introduction to asp.net5</h1>
<h2 style="text-align: center;">Lesson 3 - introducing MVC</h2>
<h2>[WHAT]</h2>
<ol>
<li>]&nbsp;VIDEO SUMMARY - summary notes on the video, this lesson ... &nbsp;&nbsp;- introducing MVC</li>
</ol>
<h2>[WHY]</h2>
<ol>
<li>]&nbsp;</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://mva.microsoft.com/en-US/training-courses/introduction-to-asp-net-5-13786?l=6Ns0MlpXB_2201937557" target="_blank">Introduction to asp.net5</a>&nbsp;- Lesson 3 - MVC</div>
</li>
</ol></ol>
<h2>[WHEN]</h2>
<ol>
<li>] 2015-08-12 - created&nbsp;</li>
<li>] 2015-09-15 -&nbsp;published</li>
</ol>
<h2>[EXAMPLE]</h2>
<ol>
<li><strong>[00:00] introduction</strong></li>
<ol>
<li>] Scott Hanselman -&nbsp;</li>
<li>] Glen Condron - &nbsp;</li>
<li>] previous lesson - we talked previous about the relationships between VS, the browser, app and the web server, we created an empty app, talked a little bit about "middleware"&nbsp;</li>
<li>] current lesson (this) - we are going to talk about model view controller the "MVC", the design pattern, it is used by asp.net and many other frameworks (ruby, python, windows forms ), will build an app using the "default template", will use docs.asp.net tutorial</li>
</ol>
<li><strong>[01:30] my "learning node" experience&nbsp;</strong></li>
<ol>
<li>] grabbed yeoman generator, generated a bunch of files to create an app</li>
<li>] but - i didnt really know what they all did</li>
<li>] realized VS (does the same) but because "i know it" i understand what the different stuff does, somone new may not ...</li>
<li>] another "noobie" problem is - how deep do you need to go in the "stack"&nbsp;</li>
<li>] the stack - &nbsp;everything thats involved in the operation of your app from the top to the bottom,&nbsp;</li>
<li>] we(msft) try to take care of(abstract) much of the details, now with everything being open source, you can go as deep as you want, if you want to&nbsp;</li>
</ol>
<li><strong>[03:45] file new project - mvamvc</strong></li>
<ol>
<li>] choose the "web appication" template which is the "default" choice for new application</li>
<li>] the "change authentication" option enables you to change the default auth, by default the "individual user accounts" option is enabled for new web applications</li>
<li>] options = ] no authentication ] individual user accounts ] work and school accounts ] windows authentication&nbsp;</li>
<li>] choosing x] no authentication for example, simpler to understand</li>
</ol>
<li><strong>[06:00] reviewing the content the new project - default web application template</strong></li>
<ol>
<li>] references - contains our nuget packages, all files required for the template are on the local machine,&nbsp;</li>
<li>] more packages then the "empty" app, includes packages for "mvc", "diagnostics", "static files", "web listener", "logging", "configuration", ...</li>
<li>] lego peices, modular, seperation of concerns</li>
<li>] you dont need to really worry to much about whats in here</li>
</ol>
<li><strong>[08:30] reviwing "startup.cs" - its different</strong></li>
<ol>
<li>] theres is lots more going on in this one then in the "empty" one</li>
<li>] we now have Configure, (as before) but also ConfigureServices, a Constructor method, ...</li>
<li>] <strong>Startup()</strong>&nbsp;-&nbsp;<strong>constructor</strong> - the first method to execute,&nbsp;</li>
<li>] <strong>ConfigureServices()</strong> - put/add all of the things that your app might need to use later on, the classes that you will need to run, ex MVC, you are not using it, just telling that we may use it</li>
<ol>
<li>] add MVC - services.addMVC();</li>
</ol>
<li>] <strong>Configure()</strong></li>
<ol>
<li>] use MVC - app.UseMVC( args route=&gt;.. );</li>
</ol>
<li>]&nbsp;</li>
</ol>
<li><strong>[13:30] folders for "controllers" and "views"</strong></li>
<ol>
<li>] home.cs file in controller and home.cshtml in views&nbsp;</li>
<li>] launches app to show, home page, also has "about" and "contact" pages</li>
<li>] trying to access anything else, returns an "error" page</li>
</ol>
<li><strong>[16:15] home.cs the home controller</strong></li>
<ol>
<li>] VS TIP - shift + alt + enter - displays code window full screen,</li>
<li>] VS TIP - ctrl + scroll - to zoom in</li>
<li>] breakpoint - stop code from running when it gets to that point</li>
<li>] home controller delegates to index view</li>
</ol>
<li><strong>[24:00] MVC explained</strong></li>
<ol>
<li>] the classic MVC slide -&nbsp;</li>
<li>] new MVC slide - request -&gt; controller ( looks at request, makes or gets Model, does stuff )</li>
<li>] request -&gt; controller \/</li>
<li>] &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;view - transforms the model into HTML</li>
<li>] response &lt;-&nbsp;</li>
<li>] the "model" - holds the app data, is the means of communication between "controllers" and "views", holds no app logic</li>
</ol>
<li><strong>[27:00] adding a new "method" named "foo" to the "home controller"</strong></li>
<ol>
<li>] copy and pasted the Index method, renamed it as the "Foo" method, tried to access the Foo page, results in an error</li>
<li>] Error says "Foo" view was not found, we looked here ...</li>
<li>] \views -&nbsp;</li>
<li>] \shared -&nbsp;</li>
<li>*] new error page format with Stack and Query, Cookies, Headers and Environment</li>
<li>] we learn that we need a Foo "view" page that corresponds to &nbsp;</li>
<li>] we learn where the server will look for said view page</li>
</ol>
<li><strong>[29:00] adding a new "view" named "foo"</strong></li>
<ol>
<li>] right click on the views folder , choose "MVC view" from the options,&nbsp;</li>
<li>] add "your content" to the "view"</li>
<li>] access by URL - yoursite.com/foo</li>
<li>] hey this page also contains top nav bar ( menu ) that we didnt add to our view, where did that come from?</li>
<li>] check out /Shared folder for the "_Layout.cshtml" file&nbsp;</li>
<li>] _Layouts is like a template where you can define all of "common elements" for a "page", things like menus, headers, footers, ....</li>
</ol>
<li><strong>[30:00] a peak at "taghelpers"</strong></li>
<ol>
<li>] we add a menu item to the existing menu to access our new Foo page, NOTE that we are NOT using standard html but the attributes of &lt; a asp-controller=Home asp-action=Foo&gt; WHERE these a attributes specify the Controller and the Method(Action) that the link will point to, the attributes will generate that appropriate HTML source code</li>
</ol>
<li><strong>[31:00] what if ..</strong></li>
<ol>
<li>] change the Foo method, to return a "string", instead of a "view", this works too, the browser gets plain text</li>
<li>] well talk more about this when we cover web api's - where we return different things like json, xml, javascript, ...</li>
</ol>
<li><strong>[32:00] VS tips and tricks&nbsp;</strong></li>
<ol>
<li>] DYN - in the VS IDE a "red squiggly" line means there is an error in your code statement, use the "mouseover" to get a detailed description of that error</li>
<li>] TIP - Ctrl+F5 - starts your application without debugging - this is faster then the usual F5, BUT if you have breakpoints set, it will bypass them</li>
<li>] TIP - quicklaunch</li>
<li>] TIP - Ctrl + , -&nbsp;</li>
</ol>
<li><strong>[33:00] "ViewData"&nbsp;</strong></li>
<ol>
<li>] passing data into your view</li>
<li>] data could be anything(object, db.query, ...), obtained from anywhere() )</li>
</ol>
<li><strong>[35:00] about "browserlink"&nbsp;</strong></li>
<ol>
<li>] very cool "connection" between the web page in the browser and the source code in the VS IDE,&nbsp;</li>
<li>] dependancy must be specified in project json file</li>
<li>] wont be available in production environment</li>
</ol>
<li><strong>[41:00] review&nbsp;</strong></li>
<ol>
<li>] model holds the data, we used "ViewData" as a "cheap" model</li>
<li>] controllers and views communication</li>
<li>] view decides ....</li>
<li>] in more advanced cases, you can have a "viewmodel aka a model that is specific to the view</li>
<li>] your current view may only need a specific part of you</li>
<li>] next = a more sophisticated model and a bootstrap</li>
<li>] explanation F5 vs Ctrl+F5&nbsp;</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 style="font-size: 10px; font-weight: normal;">
<li>]&nbsp;<a href="/view/task?id=4804" target="_blank"># 4804 - overview series</a>&nbsp;</li>
</ol>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<h1 style="text-align: center;">quiz</h1>
<p>1. By default, which type of authentication does a new Microsoft ASP.NET 5 application use?</p>
<p>2. Which three of the following are part of the lifecycle of Startup.cs? Choose three.</p>
<p>3. &nbsp;True or false: You can use IIS Express to serve webpages to other computers on the network.</p>
<p>4. In a default Microsoft ASP.NET 5 MVC web application, which file should you edit to add an item to the navigation bar of every page?</p>
<p>5. What enables you to use the F12 Developer Tools to navigate code in Microsoft Visual Studio?</p>
<p style="font-size: 10px; font-weight: normal;"><strong>results</strong> = 5/5 total = 107 , rank.local = 1426, rank.global = 95,537 total=3,555,000. % completed = 30</p>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<p style="font-size: 10px; font-weight: normal;">&nbsp;</p>
<p>&nbsp;</p>
<h1 style="text-align: center;">&nbsp;</h1>

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