Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 10

Lab 2: Create basic website with ASP.

NET Core Razor Pages

First, I create a new project.


Then, Visual Studio will display a window like the following.

To test the application, press Ctrl + F5 and you will get a window like the following.

Part 2, add a model to a Razor Pages app in ASP.NET Core


In this step, I create a new folder named 'Models'. Then, add a class 'Movie'. Add the following
code and we get the Movie class with fields like 'ID', 'Title', 'DateTime ReleaseDate', 'Genre',
'Price’.
Code:

using System.ComponentModel.DataAnnotations;

namespace RazorPagesMovie.Models;

public class Movie


{
public int Id { get; set; }
public string? Title { get; set; }
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
public string? Genre { get; set; }
public decimal Price { get; set; }
}
Scaffold the movie model

To create the Pages/Movies folder, first right-click on the Pages folder > Add > New
Folder and name the folder Movies.
Configure the parameters as follows to complete adding Razor Pages.

Files created and updated


Use the Package Manager Console (PMC) to to name the migration and create Database, with
the following code:

Add-Migration InitialCreate
Update-Database

Test the APP


Run the app and append /Movies to the URL in the browser, we will get the result:

Since we haven't initialized anything yet, this window is still empty.

Add /Create to the URL, we’ll get the result:


This window allows us to add information about the movie to the database, such as
'Title', 'Release Date', 'Price'.
This is the interface when we add information to the database.

When we click to “Details”, it will show this windows.


Update the layout

At line 6, when we change the value within the <title> tag, it will change the title of the
webpage.
At line 15, change the value from
<a class="navbar-brand" asp-area="" asp-page="/Index">Duy's Movie Storage'</a>
To

<a class="navbar-brand" asp-page="/Movies/Index">RpMovie</a>

The anchor element above is a Tag Helper, specifically the Anchor Tag Helper. Here, the
attribute-value pair asp-page="/Movies/Index" generates a link to the /Movies/Index
Razor Page. Since the value of the asp-area attribute is empty, no area is incorporated
into the link.

You might also like