DEV Community

loading...

Add Razor Pages support to a .Net Core MVC Project

ivanrainbolt profile image Ivan Rainbolt ・3 min read

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.

Discussion (1)

pic
Editor guide
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