1. Create the Layout Page (_Layout.cshtml)

Place this file in Pages/Shared/_Layout.cshtml. It defines the common structure (header, footer, etc.) for your Razor Pages.

2. Define the Menu Model

Create a simple model to represent menu items.

public class MenuItem
{
    public string Text { get; set; }
    public string Url { get; set; }
}

 

3. Create a Base PageModel to Share Menu Data

You can use inheritance to share menu data across pages.

public class LayoutModel : PageModel
{
    public List MenuItems { get; set; }

    public override void OnPageHandlerExecuting(PageHandlerExecutingContext context)
    {
        MenuItems = new List
        {
            new MenuItem { Text = "Home", Url = "/" },
            new MenuItem { Text = "About", Url = "/About" },
            new MenuItem { Text = "Contact", Url = "/Contact" }
        };
    }
}

 

4. Use the Layout in Your Razor Page

In Pages/Index.cshtml:

@page
@model IndexModel
@{
    Layout = "_Layout";
    ViewData["Title"] = "Home Page";
}

Welcome to Razor Pages!

Use _ViewStart.cshtml to Apply Layout Globally

In Pages/_ViewStart.cshtml:

@{
    Layout = "_Layout";
}