In this article I will provide a small Tutorial using a small Sample Program example on how to build your first Website in ASP.Net Core 2.0 Razor Pages.
This article will help you understand, configure and create a very simple Website application in ASP.Net Core 2.0 Razor Pages.
Creating a new ASP.Net Core 2.0 Project
Let’s get started with creating your first ASP.Net Core 2.0 Project.
1. Open Visual Studio and from Start section click on Create New Project.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
2. From the New Project Dialog window, select ASP.Net Core Web Application option. Then you need to set a suitable Name for your project and also you can set its Location where you want to create the Project.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
3. From the New ASP.Net Core Web Application Dialog, select Empty and click OK.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
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.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
Adding Razor Page to the ASP.Net Core 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.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
2. Name the newly added Folder as Pages.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
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.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
4. From the Add Scaffold Dialog window, select the “Razor Page” option and click Add button.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
5. You will now be asked to provide a suitable Name to the new Razor Page.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
Once you click add, the following Razor Page is created. The default handler method is “Get” in the Razor PageModel class.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
Inside the Solution Explorer window, the corresponding Razor HTML Page is also shown.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
And when the Razor HTML Page is opened it looks as shown below.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
Configuring the Routes
The last important part is to configure the Routes in the Startup.cs file.
1. Open the Startup.cs class from the Solution Explorer window.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
2. In the Startup.cs, you will need to add the following namespace.
using Microsoft.AspNetCore.Mvc;
3. In the Startup.cs, there are two methods.
ConfigureServices
Inside this method, you will have to add the following code which will instruct the program to add MVC 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();
}
Now press F5 to run the Application and you should see a blank page in browser.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
Displaying a Message from Controller to View in ASP.Net Core 2.0 Project
1. Inside the Razor PageModel class, OnGet handler method, the public property Message is set.
public class IndexModel : PageModel
{
public string Message { get; set; }
public void OnGet()
{
this.Message = "This is my First ASP.Net Core Razor Page";
}
}
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.
![Building first Website in ASP.Net Core 2.0 Razor Pages]()
Downloads
