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 2.1 for the first time.
This article makes use of Visual Studio 2017 for developing the ASP.Net Core 2.1 Razor Pages Hello World Sample program example.
Creating a new ASP.Net Core Razor Pages 2.1 Project
Let’s get started with creating your first ASP.Net Core Razor Pages 2.1 Project.
1. Open Visual Studio and from Start section click on Create new project.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
2. From the New Project Dialog window, select ASP.Net Core Web Application option.
Then, you can set a suitable Name for your project and also you can set its Location where you want to create the Project and then click on OK.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
3. From the New ASP.Net Core Web Application Dialog, select ASP.NET Core 2.1 from Framework options and then, select Empty project template and then click on OK.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
4. 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 Razor Pages: Hello World Tutorial with Sample Program example]()
Adding Razor Page to the ASP.Net Core 2.1 Project
1. Inside the Solution Explorer window, Right Click on the Project and then click Add and then New Folder option from the Context Menu.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
2. Name the newly added Folder as Pages.
![ASP.Net Core 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 from the Context Menu.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
4. From the Add Scaffold Dialog window, select the “Razor Page” option and then click on Add button.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
5. You can provide a suitable Name to the Razor Page and then click on Add button. This article does not use Layout Page and hence the “Use a layout page” CheckBox needs to be kept unchecked and then click on Add button.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
Once you click on add, the following IndexModel is created. The default Handler method is “Get”.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
Inside the Solution Explorer window, the corresponding Razor HTML (Index.cshtml) Page is also shown.
![ASP.Net Core 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 Razor Pages: Hello World Tutorial with Sample Program example]()
Configuring the Routes
The last important part is to configure the Routes in the Startup.cs file.
1. Open the Startup.cs file from the Solution Explorer window.
![ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example]()
2. Inside the Startup.cs, you will need to inherit the following namespace.
using Microsoft.AspNetCore.Mvc;
3. Inside the Startup.cs, there are two configurations.
ConfigureServices
Inside this method, you have to add the following code which will instruct the program to add MVC services and Razor Pages Services along with version compatibility.
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
Configure
Inside this method, the default settings for the Razor Pages are configured.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseMvc();
}
Finally, the Startup.cs file will look as shown below.
![ASP.Net Core 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 Razor Pages: Hello World Tutorial with Sample Program example]()
Displaying a Message from PageModel to Razor Page in ASP.Net Core 2.1 Project
1. Inside the Razor PageModel's OnGet handler method, the public property names "Message" is set.
public class IndexModel : PageModel
{
public string Message { get; set; }
public void OnGet()
{
this.Message = "This is my First ASP.Net Core 2.1 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 Razor Pages: Hello World Tutorial with Sample Program example]()
Downloads
