DEV Community

Ivan Rainbolt
Ivan Rainbolt

Posted on

12 4

Add Razor Pages support to a .Net Core MVC Project

I wanted to take a default asp.net core MVC project in Visual Studio and then see if I could added Razor pages support and use them both.

I created an MVC project and compared it to a new razor project. Using insight from a stack overflow article "How to extend an ASP.NET Core MVC project by Razor Pages?", I was able to successfully do just that.

Here is how

Using Visual Studio

  • [x] Create a new Project
    Create a new Project

  • [x] Choose ASP.NET Core Web App
    Choose ASP.NET Core Web App

  • [x] Name the project and solution
    Name the project and solution

  • [x] Choose the MVC option
    Choose the MVC option

The folder structure of the result:

MVC folder structure

Do F5 (or CTRL+F5) and you get the standard MVC rendered web pages and web app.
Default MVC webapp

  • [x] Add a new folder to the project and name it Pages
    This is a Razor convention. Other helpful Razor information at the MS Docs site.
    enter image description here

  • [x] Add the line services.AddRazorPages(); in

public void ConfigureServices(IServiceCollection services)
Enter fullscreen mode Exit fullscreen mode

enter image description here

  • [x] Add the line endpoints.MapRazorPages(); to
app.UseEndpoints(endpoints => 
Enter fullscreen mode Exit fullscreen mode

in

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
Enter fullscreen mode Exit fullscreen mode

enter image description here

At this point, a Razor page can be added and can be navigated to:

  • [x] Add a new Razor page enter image description here results in: enter image description here basic page code: enter image description here rendered view: enter image description here

Layout

So now one may wish to use the existing layout options with the new razor pages.

  • [x] Copy the _ViewStart.cshtml file from the >Views folder to the >Pages folder. enter image description here

That will result in the following rendered html:
enter image description here

IF you do not copy the _ViewStart.cshtml file to the >Pages folder, you CAN selectively apply the layout to a individual Razor files by adding the tag to page:
enter image description here

Navigation

MVC

<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
Enter fullscreen mode Exit fullscreen mode

vs
Razor

<a class="nav-link text-dark" asp-area="" asp-page="/HelloWorld">Hello Razor</a>
Enter fullscreen mode Exit fullscreen mode

enter image description here

github

I create this for my own reference and hopefully others will also find it helpful.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (4)

Collapse
 
torchanm profile image

Very thank you! Helped me! But in new .NET version you can just use builder.Services.AddRazorPages() and app.MapRazorPages() in Program.cs if you already created an MVC project

P.S. I am beginner, can be wrong

Collapse
 
artydev profile image
artydev

Thank you :-)

Collapse
 
haffedali profile image
haffedali

This is exactly what I needed! I forgot to map the endpoints for Razor Pages and was at a loss

Collapse
 
johndehope profile image
John DeHope

This really helped, it's exactly what I needed to know, and it worked perfectly. Thanks!