1. 1 Adding a Model

2. We have created an MVC web app project Added a controller class. Added a view class. Next we will add some classes for managing movies in a database The "Model" part of the MVC app We will use the Entity Framework "Code First" version 2

3. Getting Started Download MVC Project from previous presentation: http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/20 16_04_21_MVC_View/http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/20 16_04_21_MVC_View/ File MvcMovie_Level_2_View.zip Expand Move the MvcMovie enclosed folder to the desktop. Delete the (now empty) MvcMovie_Level_2_Views folder. Drill down in MvcMovie to src/MvcMovie Delete MvcMovie/src/MvcMovie/project.lock.json Navigate back up to the top level, MvcMovie Should see MvcMovie.sln 3

4. Adding a Model Microsoft Tutorial: Adding a Model Open in solution Visual Studio Double click MvcMovie.sln Build solution Start without debugging If error, close Visual Studio, delete project.lock.json again and go back to top of this page. Test /HelloWorld/ /HelloWorld/Welcome?name=Rollins&numtimes=4 4

5. http://localhost:50880/HelloWorld/ 5

6. http://localhost:50880/HelloWorld/Welcome?name=Rollins&numtimes=4 6 Close the browser window.

7. Adding a Model Now we will add a Movie model Just information about a movie. Not an actual movie! Right click on the Models folder and select Add > Class 7

8. Models > Add > Class 8

9. Add New Item 9 Click Add

10. Initial File Created by Visual Studio using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace MvcMovie.Models { public class Movie { } 10 Replace this with the code on the next slide.

11. Movie.cs using System; public class Movie { public int ID { get; set; } public string Title { get; set; } public DateTime ReleaseDate { get; set; } public string Genre { get; set; } public decimal Price { get; set; } } 11 Note: ID is required as a primary key for the database table. Build the solution, but don't run it yet. (Our next step requires a compiled model.)

12. Scaffolding A code generation framework introduced in Visual Studio 2013 Used to quickly add code that interacts with data models. Scaffolding is a generic term for temporary code used to support development of the real code. Analogy with scaffolding for a building under construction. The Mythical Man Month 1975 12

13. Scaffolding a Controller In Solution Explorer, right click the Controllers folder and select Add > Controlle r 13

14. Add Scaffold 14 Click Add

15. Add Controller 15 Click Add

16. Scaffolding Visual Studio automatically created the CRUD (create, read, update, and delete) action methods and views. This is know as scaffolding in Microsoft MVC. 16

17. 17 The Visual Studio scaffolding engine created: MoviesController Multiple Razor View files Migrations classes Used in Code First Entity Framework to keep the database code synchronized with the model.

18. Install New Runtime Tools If you have not already done so, you will need to install new Windows runtime tools before doing the next step. Open a command window and run dnvm upgrade 18

19. Using data migrations to create the database We will need a command window for this step. Project folder as its current directory. Open solution folder and drill down to MvcMovie/src Should see folder MvcMovie (the project folder) Shift + Right Click on MvcMovie Select Open command window here. See next slide. 19

20. Open Command Window 20 Drill down to src directory. Shirt + Right Click on MvcMovie Select Open command window here.

21. Command Window in Project Directory 21

22. Run the following commands dnu restore dnvm use 1.0.0-rc1-update1 -p dnx ef migrations add Initial dnx ef database update 22 Details on following slides.

23. What we did dnu restore This command looks at the dependencies in the project.json file and downloads them. For more information see Working with DNX Projects Working with DNX Projects and DNX Overview.DNX Overview 23

24. What we did dnvm use 1.0.0-rc1-update1 -p dnvm is the.NET Version Manager, which is a set of command line utilities that are used to update and configure.NET Runtime. In this case we are asking dnvm to add the 1.0.0-rc1 ASP.NET 5 runtime to the PATH environment variables of the current shell. 24

25. What we did dnx ef migrations add initial DNX stands for.NET Execution Environment. The ef command is specified in the project.json file This command creates file xxx_initial.cs in the Migrations folder 25

26. The Illegible Yellow Message An operation was scaffolded that may result in the loss of data. Please review the migration for accuracy. The Microsoft tutorial says that we can ignore this warning. 26

27. What we did dnx ef database update Updates the database. (Applies the migrations) 27

28. DNX has created a local database for us. The connection string is in appsettings.json at the top level of the project folder 28

29. The Connection String 29

30. Open a Data Connection View Server Explorer Right click on Data Connections and select Add Connection 30

31. 31 Enter information from the connection string. Click Test Connection Then click OK This will be different on each run.

32. Server Explorer 32 DNX has created a Movie table for us in the local DB

33. Show Table Data 33

34. Table Movie 34

35. Build and Run the App 35 Navigate to Movies

36. 36

37. Movies 37 Click Create New to add a movie

38. A Great Movie 38

39. Adding a Movie 39 Fill in info and click Create

40. Adding a Movie 40 Nothing happens!

41. Set a Breakpoint 41 Click Create button again.

42. Breakpoint Hit 42 Step

43. Next 43 Skipped! Our model is not valid.

44. Quickwatch ModelState 44

45. Try Again 45

46. This time it worked 46

47. Check the Movies Table 47

48. Observations A real app would have given the user an error message. What we have seen so far is just a start. 48