Setting A Custom Page As Landing Page In .Net Core Razor Pages

In this article, I will provide information on how to set a custom .NET Core Razor Page as your home/landing page.

In order to see how to create a .NET Core Web Application with Razor Pages and retrieve data from SQL Server using Entity Framework, you can visit my previous article.

Below are the software/concepts used in this document.

  1. Visual Studio 2019
  2. Razor Pages
  3. .Net Core 2.0
  4. Net Core Web Application
  5. C# Language

Open your project in Visual Studio 2019

In my case, I am opening the earlier-created project where Razor pages are present. Once you browse this web application in the browser, the Index.cshtml page is opened by default.

Setting A Custom Page As Landing Page In .Net Core Razor Pages
 
Setting A Custom Page As Landing Page In .Net Core Razor Pages

Make Custom Razor Page as default home/landing page

In my example, I want a custom Razor page named “Index.cshtml” under “Customers” folder to be my home/landing page.

Setting A Custom Page As Landing Page In .Net Core Razor Pages

You might have seen that Razor Pages are designed to open the Index page by default within the current folder. Example:

    • If we browse for http://localhost:44381/customers/index, it would by default open http://localhost:44381/customers/index.cshtml
    • If we browse for http://localhost:44381/customers/, it would by default open http://localhost:44381/customers/index.cshtml
    • But if we browse http://localhost:44381/, it would by default open http://localhost:44381/index.cshtml, which we have to change
  1. Open the Startup.cs file and update the “ConfigureServices” method as below.

    Setting A Custom Page As Landing Page In .Net Core Razor Pages
    1. public void ConfigureServices(IServiceCollection services)  
    2.         {  
    3.             services.Configure<CookiePolicyOptions>(options =>  
    4.             {  
    5.                 // This lambda determines whether user consent for non-essential cookies is needed for a given request.  
    6.                 options.CheckConsentNeeded = context => true;  
    7.                 options.MinimumSameSitePolicy = SameSiteMode.None;  
    8.             });  
    9.             services.AddMvc().AddRazorPagesOptions(options=> {  
    10.                 options.Conventions.AddPageRoute("/Customers/Index""");  
    11.             }).SetCompatibilityVersion(CompatibilityVersion.Version_2_1);  
    12.   
    13.             //services.AddTransient<DocumentWebService.IDMS, DocumentService>();  
    14.         }  
    15. }  
    Here, we are using the AddRazorPagesOptions() method which helps in setting things like route conventions and the root directory for pages. I am using AddPageRoute() method which has the first parameter taking the path to the page which I want to make a new home/landing page. The second identifies the route that should map to the page. In my case, since I wanted the default page for the entire app to be the /customers/Index.cshtml page, I am passing in an empty string.
  1. Delete the old “Index.cshtml” file, as we would not use it anymore. If you don’t delete, the system may throw an error.
  2. Test the files by right-clicking on the Index file and opening it with browser. The new homepage will open by default.

    Setting A Custom Page As Landing Page In .Net Core Razor Pages

That is it. I hope you have learned something new from this article and will utilize this in your work.