In this article I will provide a short Hello World Tutorial using a small Sample Program example on how to use and develop applications in
ASP.Net Core Razor Pages 8.0 for the first time.
Creating a new ASP.Net Core Razor Pages 8.0 Project
1. Open
Visual Studio and from
Start section click on
Create a new project.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
2. From the
Create a new project Dialog window, select
ASP.Net Core Empty option and then click on
Next.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
3. Then, you can set a suitable Name for your project and also you can set its Location where you want to create the Project.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
4. From the
New ASP.Net Core Empty Dialog, select
.NET Core 8.0 from the
Framework options and then click on
Create.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
5. Your first Hello World ASP.Net Core Web Application Project is now ready and you should see the following folders and files in your Solution Explorer window.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
Adding Razor Page to the ASP.Net Core 8.0 Project
1. Inside the Solution Explorer window, Right Click on the Project and then click on Add and then click New Folder option from the Context Menu.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
2. Name the newly added Folder as Pages.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
3. Now, inside the Solution Explorer window, Right Click on the Pages folder and then click on Add and then Razor Page option of the Context Menu.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
4. From the Add New Scaffolded Item Dialog window, select the “Razor Page - Empty” option and then click on Add button.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
5. You will now be asked to provide a suitable Name to the new Razor Page.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
Once you click add, the following Razor Page is created. The default handler method is “Get” in the Razor PageModel class.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
Inside the Solution Explorer window, the corresponding Razor
HTML Page is also shown.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
And when the Razor
HTML Page is opened it will look as shown below.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
Configuring the Routes
The last important part is to configure the Routes in the Program.cs file.
1. Open the Program.cs file from the Solution Explorer window.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
2. Inside the Program.cs, there are two configurations.
Configure MVC Services
Call the following function
AddMvc which will instruct the program to add
MVC Services.
builder.Services.AddMvc();
var app = builder.Build();
Configure Routes
Then, the routing is configured.
app.UseRouting();
app.MapRazorPages();
app.Run();
The final Program.cs file will look as shown below.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
Now press F5 to run the Application and you should see a blank page in browser.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
Displaying a Message from PageModel to Razor Page in ASP.Net Core 8.0 Project
1. Inside the Razor PageModel’s OnGet handler method, the public property named “Message” is set.
public class IndexModel : PageModel
{
public string Message { get; set; }
public void OnGet()
{
this.Message = "This is my First ASP.Net Core 8.0 Razor Page App.";
}
}
2. Then, inside the Razor
HTML Page, the public property
Message is accessed from the Razor
PageModel class and displayed.
@page
@model Core_HelloWorld.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h3>@Model.Message</h3>
</body>
</html>
3. Now press F5 to run the application and you should see a message displayed on page in browser.
![ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example]()
Downloads
