article

Introduction to MVC

Lesson 3 - Visual Studio

[WHAT]

  1. ] VIDEO SUMMARY - summary notes on the video, this lesson explains more about how the features in the VS IDE can help you to build out your applications.

[WHY]

  1. ] about the features and benefits in the VS IDE

[WHERE]

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

[WHEN]

  1. ] 2014-06-24 - produced

[EXAMPLE]

  1. [00:00] review of previous lesson
    1. ] was trying to AVOID the "entity framework" and "code first" conversation, wanted to just let the magic happen, the magic didnt happen, tried all of the usual things() to fix the problem, nothing worked, usually it does work
    2. ] model is a class
    3. ] how you/users are going to interact with the class are by going in adding attributes
    4. ] concept of model binding
    5. ] will automatically handle a lot of stuff for us
  2. [02:00] MV VM - viewModels
    1. ] another pattern 
    2. ] how we are going to structure our data for display is
    3. ]
  3. [09:30] the power of visual studio(VS)
    1. ] making it easier to generate the code,
    2. ] will look at scaffolding, ef, vs web tools
  4. [11:00] scaffolding
    1. ] generates controllers and views code based upon models
    2. ] built with common asp.net scaffolding system  
    3. ] originally was different versions of scaffolding for mvc, forms, api, now 1 version
    4. ] how to - right click, controllers, select add scaffolded item
    5. ] select - type of controller, (empty, ef, read/write, ...)
    6. ] option - use asynch controller actions - if your controllers are making a lot of requests, asynch requests can perform non blocking io, aka 2nd task will start before first task is complete, better performance
    7. ] option - generate views -
    8. ] option - references
    9. ] options - use layout page - creates structure of page, includes navigation, header, footer, similar to forms 'master' page or php includes,
  5. [00:00] example
    1. ] albums controller, creates the controller
    2. ] creates a folder "Albums" in views
    3. ] creates the basic views - ] create, ] delete, ] edit, ] details, ] index 
    4. ( app demo now has a "private storeContect db = , where did that come from? 'its going to EF to get the data)
    5. *] you are in control, a controller is a class, a controller action is a method, all it needs to do is get a class that it can return to the view
    6. ?] repo pattern - seperating out the data access - i call a view, view returns the data
    7. ] controller PASSES data to view,
    8. ] return View(db.ToList())
  6. [22:00] a look at the generated index file generated by the Add Controller scaffolding
    1. ] uses a table , standard html table code to present table, except for some razor HTML.methods that used the passed in data model
    2. >] HTML.DisplayNameFor(model => model.Title)
    3. >] foreach (var item in model){
      1. <tr>
      2. <td>
      3. HTML.DisplayFor(modelItem => item.Title )
      4. </td>
      5. <td>
      6. HTML.ActionLink(Edit, Edit, new {id=item.albumID})
      7. HTML.ActionLink(Delete, Delete, new {id=item.albumID})
      8. HTML.ActionLink(Details, Details, new {id=item.albumID}) 
      9. <td>
    4. ] questions from crowd on how to make a data grid, see above, that is your "data grid"
    5. ] displaying date, everyone has done, looking for examples,libraries to make it easier,faster,prettier, look on codeplex, ...
    6. ] REVIEW - simple class, didnt have to write the controller, didnt have to write the views code,
    7. *] scaffolding is a 1x thing - you dont edit a scaffolded file and then rescaffold, once the files are generated they are yours.
    8. ] vs Web Forms where code is being generated at runtime, here the code is being generated at design time
    9. ] scaffolding is generating a fair bit of code, example Forms
    10. ] scaffolding is extensible
  7. [30:00] Entity Framework(EF)
    1. ] EF - object relational mapper(ORM) that enables .net developers to work with relational data using domain specific objects. It elminates the need for most of the data access code that developers usually need to write.
    2. ] EF is an open source project - backed by msft asp.net development team, you can watch code being checked in, submit issues, review issues, code
    3. ] context - dealings with the db state, understands multiple tables, foreign key relationships,
    4. ] example - mvcAlbums store DB Context
      1. ] public class storeContext : dbContext
      2. ]   public DbSet<Review> Reviews {get; set;}
      3. ]   public DbSet<Album>  Albums {get; set;}
      4. ]   public DbSet<Artist>  Artists {get; set;}
    5. ] DbSet and DbContext - do a lot of stuff, collections classes that are smart, they understand db stuff
    6. ] EF is a way, for your controllers to get data and pass data into your views, you dont have to use EF, it is built into MVC, as one of the scaffolding options,
    7. ] you dont have to use EF, or you have to use code first, you can use it
  8. [34:00] EF - relations and foriegn keys
    1. ] automatically done for you, set your ID and a virtual and it will automatically
    2. ] talking about inside tips and tricks -  adding the int ID field even tho ...
    3. ] ....
  9. [36:30] EF - seed methods
    1. ] the idea is to make it easier, to insert data, as your creating your application
    2. ] example @github
    3. ] method adds a bunch of sample data, newing up data AND inserting it
    4. ] handy feature of EF, the ability to seed data as application starts up
  10. [38:00] EF - migrations
    1. ] over time you may want to change your database
    2. ] add a new property to model, db needs to be in synch
    3. ] ex album model adds new property, copright
    4. ] migrations - in code, setup the steps, how to get from point A to point B
    5. ] removed migrations,
    6. ] has both an UP and a DOWN method
  11. [40:00] Visual Studio Web Tools (VS WT)
    1. ] some really cool new stuff,
    2. ] if your NOT really comfortable with html/css
    3. ] VS is a really good front end web editor
    4. ] when viewing code in your browser you can highlight an element and the VS source code that generates that element will also be highlight - makes it easy to track down where is your code (coming from/generated)
    5. ] ex use inspect element feature of browser, highlights the area in VS where the code is generated
  12. [43:00] edit your source code files,
    1. ] example - directly edit source file (example html, css)
    2. ] those changes are pushed back in into the VS IDE source and all connected browsers
    3. ] TEST in browser(ie) doesnt work
    4. *] he has special toolbar in browser, i am not seeing it on my, maybe some extension like browserlink needs to be added,
    5. ] 2 moving parts - ] vs web essentials ] browserlink
    6. ] installed ] vs web essentials(17.9MB), ]
    7. ] auto synch option on f12 tools
    8. ] can also edit .css styles for elements in your browser and the changes are pushed back into your source code
    9. ] unused CSS - feature - tracks classes that may not be used
    10. ] VS TIP WE div.className TAB TAB- will generate a div tag with the given classname
    11. ] VS TIP WE ul>*5 - auto generates a ul with 5 items
    12. ] VS TIP WE video. TAB TAB generates video tag
    13. ] VS TIP WE .css - ex background-color. - has color picker, shows colors, has color-selector option, ...
    14. ] VS TIP WE - these are just the tip of the iceberg, lots of web editing functionality built into VS, more will be covered in the Bootstrap Lesson(# #)
  13. [53:00] REVIEW
    1. ] Browser Link -
    2. ] Zen Coding -
    3. ] Intellisense ( jquery, angular, knockout, ... ) -
    4. ] VS Web Essentials - extension -
    5. ] Side Waffle - extension -  if your having a burger, you might want a waffle on the side, a way to get delicous side dishes into your application, example add ( jshint, angularjs, chrome extension) any kind of we file, ] brings it in, setup the right way ] right click, add new plugin, select
    6. ] Scaffolding - how scaffolding is using models to generate controllers and views
    7. ] EF - going into my db, connecting my db to my models
    8. ] VS Web Tools - helping you if your not comfortable with HTML or if your, automating a lot of
    9. ] next lesson is on ___

[HOW-TO]

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

[REFERENCE]

  1. ] # 5359 - overview series - ] reference section ] to-do, ] done

quiz

> Which two statements about Models in ASP.NET MVC applications are true?
model binds methods in the controller to forms in the ui
model automatically creates ui elements

model determines which controller ot use (
model determines which pages to display ( controller )

Which keyboard shortcut will display the Solution Explorer pane in Visual Studio?

x] > You are creating a Controller. Which two statements are true?
- controller can operate asynch
- controller can create js libraries to run client side code

A.  You must specify a Model for the Controller.

B. The Controller can operate asynchronously.                            
C. The Controller can create JavaScript libraries to run client-side code.                            
D. You must specify a data context for the Controller.

>Which object does the data context connect the application with?

>You plan to use scaffolding. You need to choose a Controller type that will NOT require you to specify a Model. Which Controller type should you use?

 

quiz.results = 4/5

 

 

Details Photos Edit more

Details

ID: 4582

NAME: introduction-MVC-lesson-3

DESCRIPTION: [57:42]VIDEO-SUMMARY Introduction to MVC - Lesson 3 - Visual Studio - by Jon Galloway and Christopher Harrison of Microsoft - a closer look at VS features like Entity Framework, Scaffolding and Web Tools like Browserlink and Web Essentials

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