AspNetCore.Docs/aspnetcore/tutorials/first-mvc-app/adding-model.md

12 KiB
Raw Blame History

title author description keywords ms.author manager ms.date ms.topic ms.assetid ms.technology ms.prod uid
Adding a model | Microsoft Docs rick-anderson Add a model to a simple ASP.NET Core app. ASP.NET Core, riande wpickett 03/14/2017 article 8dc28498-00ee-4d66-b903-b593059e9f39 aspnet asp.net-core tutorials/first-mvc-app/adding-model

Adding a model

By Rick Anderson

In this section you'll add some classes for managing movies in a database. These classes will be the "Model" part of the MVC app.

Youll use a .NET Framework data-access technology known as the Entity Framework Core to define and work with these data model classes. Entity Framework Core (often referred to as EF Core) features a development paradigm called Code First. You write the code first, and the database tables are created from this code. Code First allows you to create data model objects by writing simple classes. (These are also known as POCO classes, from "plain-old CLR objects.") The database is created from your classes. If you are required to create the database first, you can still follow this tutorial to learn about MVC and EF app development.

Adding data model classes

In Solution Explorer, right click the MvcMovie project > Add > New Folder. Name the folder Models.

In Solution Explorer, right click the Models folder > Add > Class. Name the class Movie and add the following properties:

[!code-csharpMain]

In addition to the properties you'd expect to model a movie, the ID field is required by the database for the primary key. Build the project. If you don't build the app, you'll get an error in the next section. We've finally added a Model to our MVC app.

Scaffolding a controller

In Solution Explorer, right-click the Controllers folder > Add > Controller.

view of above step

In the Add MVC Dependencies dialog, select Minimal Dependencies, and select Add.

view of above step

Visual Studio adds the dependencies needed to scaffold a controller. A ScaffoldingReadMe.txt file is created which you can delete.

In Solution Explorer, right-click the Controllers folder > Add > Controller.

view of above step

In the Add Scaffold dialog, tap MVC Controller with views, using Entity Framework > Add.

Add Scaffold dialog

Complete the Add Controller dialog:

  • Model class: Movie (MvcMovie.Models)
  • Data context class: Select the + icon and add the default MvcMovie.Models.MvcMovieContext

Add Data context

  • Views: Keep the default of each option checked
  • Controller name: Keep the default MoviesController
  • Tap Add

Add Controller dialog

The Visual Studio scaffolding engine creates the following:

  • A movies controller (Controllers/MoviesController.cs)
  • Create, Delete, Details, Edit and Index Razor view files (Views/Movies)

Visual Studio automatically created the CRUD (create, read, update, and delete) action methods and views for you. The automatic creation of CRUD action methods and views is known as scaffolding. You'll soon have a fully functional web application that lets you create, list, edit, and delete movie entries.

If you run the app and click on the Mvc Movie link, you'll get an error similar to the following:

An unhandled exception occurred while processing the request.
SqlException: Cannot open database "MvcMovieContext-<GUID removed>" 
requested by the login. The login failed.
Login failed for user Rick

Add EF tooling

  • In Solution Explorer, right click the MvcMovie project > Edit MvcMovie.csproj.

    SE meu showing Edit MvcMovie.csproj

  • Add the "Microsoft.EntityFrameworkCore.Tools.DotNet" NuGet package:

[!code-xmlMain]

Note: The version numbers shown above were correct at the time of writing.

Update the database

  • Open a command prompt and navigate to the project directory. You can find the path by selecting the Startup.cs file in Solution Explorer and viewing the Full Path property in the Properties window.

  • Run the following commands in the command prompt:

    dotnet restore
    dotnet ef migrations add Initial
    dotnet ef database update
    

dotnet ef commands

  • dotnet (.NET Core) is a cross-platform implementation of .NET. You can read about it here.
  • dotnet restore: Downloads the NuGet packages specified in the .csproj file.
  • dotnet ef migrations add Initial Runs the Entity Framework .NET Core CLI migrations command and creates the initial migration. The parameter "Initial" is arbitrary, but customary for the first (initial) database migration. This operation creates the Data/Migrations/<date-time>_Initial.cs file containing the migration commands to add (or drop) the Movie table to the database
  • dotnet ef database update Updates the database with the migration we just created

Test the app

Notes:

  • Run the app and tap the Mvc Movie link.

  • Tap the Create New link and create a movie.

    Create view with fields for genre, price, release date, and title

  • You may not be able to enter decimal points or commas in the Price field. To support jQuery validation for non-English locales that use a comma (",") for a decimal point, and non US-English date formats, you must take steps to globalize your app. See Additional resources for more information. For now, just enter whole numbers like 10.

  • In some locales you'll need to specify the date format. See the highlighted code below.

[!code-csharpMain]

We'll talk about DataAnnotations later in the tutorial.

Tapping Create causes the form to be posted to the server, where the movie information is saved in a database. You are then redirected to the /Movies URL, where you can see the newly created movie in the listing.

Movies view showing newly created movie listing

Create a couple more movie entries. Try the Edit, Details, and Delete links, which are all functional.

Examining the Generated Code

Open the Startup.cs file and examine ConfigureServices:

[!code-csharpMain]

The code above shows the movie database context being added to the Dependency Injection container.

Open the Controllers/MoviesController.cs file and examine the constructor:

[!code-csharpMain]

The constructor uses Dependency Injection to inject the database context (MvcMovieContext ) into the controller. The database context is used in each of the CRUD methods in the controller.

Strongly typed models and the @model keyword

Earlier in this tutorial, you saw how a controller can pass data or objects to a view using the ViewData dictionary. The ViewData dictionary is a dynamic object that provides a convenient late-bound way to pass information to a view.

MVC also provides the ability to pass strongly typed model objects to a view. This strongly typed approach enables better compile-time checking of your code and richer IntelliSense in Visual Studio (VS). The scaffolding mechanism in VS used this approach (that is, passing a strongly typed model) with the MoviesController class and views when it created the methods and views.

Examine the generated Details method in the Controllers/MoviesController.cs file:

[!code-csharpMain]

The id parameter is generally passed as route data, for example http://localhost:1234/movies/details/1 sets:

  • The controller to the movies controller (the first URL segment).
  • The action to details (the second URL segment).
  • The id to 1 (the last URL segment).

You could also pass in the id with a query string as follows:

http://localhost:1234/movies/details?id=1

If a Movie is found, an instance of the Movie model is passed to the Details view:

return View(movie);

Examine the contents of the Views/Movies/Details.cshtml file:

[!code-htmlMain]

By including a @model statement at the top of the view file, you can specify the type of object that the view expects. When you created the movie controller, Visual Studio automatically included the following @model statement at the top of the Details.cshtml file:

@model MvcMovie.Models.Movie

This @model directive allows you to access the movie that the controller passed to the view by using a Model object that's strongly typed. For example, in the Details.cshtml view, the code passes each movie field to the DisplayNameFor and DisplayFor HTML Helpers with the strongly typed Model object. The Create and Edit methods and views also pass a Movie model object.

Examine the Index.cshtml view and the Index method in the Movies controller. Notice how the code creates a List object when it calls the View method. The code passes this Movies list from the Index action method to the view:

[!code-csharpMain]

When you created the movies controller, Visual Studio automatically included the following @model statement at the top of the Index.cshtml file:

[!code-htmlMain]

The @model directive allows you to access the list of movies that the controller passed to the view by using a Model object that's strongly typed. For example, in the Index.cshtml view, the code loops through the movies with a foreach statement over the strongly typed Model object:

[!code-htmlMain]

Because the Model object is strongly typed (as an IEnumerable<Movie> object), each item in the loop is typed as Movie. Among other benefits, this means that you get compile-time checking of the code and full IntelliSense support in the code editor:

Intellisense contextual menu on a Model item listing the available properties for ID, Price, Release Date, and Title

You now have a database and pages to display, edit, update and delete data. In the next tutorial, we'll work with the database.

Additional resources

[!div class="step-by-step"] Previous Next