02 | Developing ASP.NET MVC 4 Models Jon Galloway | Development Platform Evangelist Christopher Harrison | Microsoft Certified Trainer

Module Overview Working with MVC Models Working with Data

Lesson 1: Creating MVC Models 03: Developing ASP.NET MVC 4 Models Demonstration: How to Add a Model  

Developing Models public class Photo { 03: Developing ASP.NET MVC 4 Models The slide shows a simple LDM diagram with two model classes: Photo and Comment. Each class has a simple set of properties and there is a one-to-many relationship between the classes; that is each photo can have zero or more comments. The UML diagram on the slide shows both the Photo and Comment model classes and the relationship between them. The code on the slide shows only the Photo class. Point out to the students that the Photo class includes a collection of Comment objects – this implements the one-to-many relationship between Photos and Comments. public class Photo { public int PhotoID { get; set; } public string Title { get; set; } public byte[] PhotoFile { get; set; } public string Description { get; set; } public DateTime CreatedDate { get; set; } public string Owner { get; set; } public virtual List<Comment> Comments { get; set; } }

Display and Edit Data Annotations 03: Developing ASP.NET MVC 4 Models public class Photo { // other properties excluded [DisplayName("Picture")] public byte[] PhotoFile { get; set; } [DataType(DataType.MultilineText)] public string Description { get; set; } [DataType(DataType.DateTime)] [DisplayName("Created Date")] [DisplayFormat(DataFormatString = "{0:dd/MM/yy}"] public DateTime CreatedDate { get; set; } } The display and edit data annotations in the slide are enclosed in square brackets. Highlight these annotations to the students and ensure that they can distinguish them from properties and other code. You will learn about other data annotations, such as validation annotations, later in the course. Question: In the code on the slide, how can you recognize the display and edit annotations and distinguish them from property code? Answer: The display and edit annotations are enclosed in square brackets.

Validating User Input with Data Annotations 03: Developing ASP.NET MVC 4 Models public class Person { public int PersonID { get; set; } [Required(ErrorMessage="Please enter a name.")] public string Name { get; set; } [Range(0, 400)] public int Height { get; set; } [Required] [DataType(DataType.EmailAddress)] public string EmailAddress { get; set; } } Question: You want to make sure that users enter a password that is longer than 6 characters. How could you do this by using a validation data annotation? Answer: You can use the StringLength validation data annotation to specify this minimum length.

20486A What Are Model Binders? 03: Developing ASP.NET MVC 4 Models The Default Controller Action Invoker uses model binders to determine how parameters are passed to actions The Default Model Binder passes parameters by using the following logic: The binder examines the definition of the action that it must pass parameters to The binder searches for values in the request that can be passed as parameters This topic explains how model binding and action invocation works in the default configuration for MVC 4 web applications. Later in the course, you will show students how to alter this arrangement by creating custom model binders and custom action invokers. You will also explain why web application architects may want to modify the default behavior. However, at this stage, concentrate on a clear explanation of the default classes.

How to Add a Model 20486A 03: Developing ASP.NET MVC 4 Models At this stage, we cannot run the web application and display Opera objects, because there is no database, no controllers, and no views to display information. You can tell the students that we will return to this example later in the course. Preparation Steps Log on to the virtual machine, 20486A-SEA-DEV11, with the user name, admin, and the password, Pa$$w0rd. Start Visual Studio 2012. Note: In Hyper-V Manager, start the MSL-TMG1 virtual machine if it is not already running. Demonstration Steps 1. On the File menu of the Start Page - Microsoft Visual Studio window, point to New, and then click Project. 2. In the left pane of the New Project dialog box, under Installed, under Templates, and then under Visual C#. 3. Under Visual C#, click Web, and then in the result pane, click ASP.NET MVC 4 Web Application. 4. In the Name box of the New Project dialog box, type OperasWebSite. 5. In the New Project dialog box, click Browse. 6. In the Project Location dialog box, navigate to Allfiles (D):\Democode\Mod03, and then click Select Folder. 7. In the New Project dialog box, click OK. 8. In the Select a Template list of the New ASP.NET MVC 4 Project dialog box, click Empty, and How to Add a Model (More notes on the next slide)

Lesson 2: Working with Data 03: Developing ASP.NET MVC 4 Models Data Access in Models and Repositories  

The Entity Framework Types of Entity Framework Workflows 03: Developing ASP.NET MVC 4 Models Types of Entity Framework Workflows Database First Model First Code First Question: You have a Visio diagram, which a business analyst created that shows all the model classes for your web application and their relationships. You want to recreate this diagram in Visual Studio. Which Entity Framework workflow would you use? Answer: The model-first workflow is most appropriate because the designer in Visual Studio enables developers to create the model by drawing it. Note: The Photo Sharing application that you create in the labs uses Entity Framework with the code-first workflow.

How to Use Entity Framework Code 03: Developing ASP.NET MVC 4 Models Preparation Steps Log on to the virtual machine, 20486A-SEA-DEV11, with the user name, admin, and the password, Pa$$w0rd. Start Visual Studio 2012. Navigate to Allfiles (D):\Democode\Mod03\OperaWebSite and then open the OperasWebSite.sln project. Note: In Hyper-V Manager, start the MSL-TMG1 virtual machine if it is not already running. Demonstration Steps 1. In the Solution Explorer pane of the OperasWebSite - Microsoft Visual Studio window, click web.config. 2. In the web.config code window, place the mouse cursor at the end of the </appsettings> tag, press Enter, and then type the following code. <connectionStrings> <add name="OperasDB" connectionString= "Data Source=(LocalDB)\v11.0;" + "AttachDbFilename=" + "|DataDirectory|\Operas.mdf;" + "Integrated Security=True" How to Use Entity Framework Code (More notes on the next slide)

Data Access in Models and Repositories 03: Developing ASP.NET MVC 4 Models This topic introduces the concept of separating repositories and models. Many MVC projects do not separate these concerns Students may not use it in their own projects. The model students develop in the lab does not use separate repositories. However, repositories are an important concept and should be used when separation of concerns is essential. The code samples introduce the use of interfaces to describe implementation classes. This is the first step toward loosely-coupled components, which will be described in Module 6 along with dependency injection. Loose coupling is essential for unit testing but is a complex concept. By introducing interfaces and separation of concerns here, this topic helps to prepare students for Module 6. You will see how to create a loosely coupled architecture in Module 6. Model Model Repository Database Database