如何在 ASP.NET Core Razor 页面中使用 _ViewStart 设置条件布局？

Question

I want to display different layouts based on the current rendered Page.

I can't find anything online about this but I feel like this should be an extremely common use case.

I only have a few pages. I would like to assign unique layouts to both my Register and Login pages.

This is what I've got so far but I am unable to use the ControllerContext in this situation.

@{
    string controllerName = this.ControllerContext.RouteData.Values["controller"].ToString();
    dynamic Layout;
    switch (controllerName)
    {
        case "Register":
            Layout = "_RegisterLayout";
            break;
        case "Login":
            Layout = "_LoginLayout";
            break;
        default:
            Layout = "_Layout";
            break;
    }
}

Answer 1

As a convenience, the _ViewStart file is used to set the layout for all pages in the same folder as the ViewStart, and all its subfolders. You can override that in a number of ways, but the simplest way in your case is to specify a different value for the Layout property in the Razor Page itself:

@page
@model MyApp.Pages.Account.LoginModel
@{
    Layout = "/path/to/login-layout.cshtml;
}
<h1>Login</h1>
...

Answer 2

We recently ran into a similar problem. We decided to provide the layout name with ViewData, Here's how.

Layout = (string)ViewData["LayoutName"] ?? "DefaultLayout";

This way you can change the layout using the action, or from inside the view or using an Action filter. I will include an Action filter that does the following using the Controller name, like you asked, and then you can register the filter globally.

    public class LayoutNameFilter : IActionFilter
    {
        public void OnActionExecuted(ActionExecutedContext context)
        {
            var result = context.Result as ViewResult;
            var controllerName = context.RouteData.Values["controller"].ToString();
            switch (controllerName)
            {
                case "Register":
                    result.ViewData["LayoutName"] = "_RegisterLayout";
                    break;
                case "Login":
                    result.ViewData["LayoutName"] = "_LoginLayout";
                    break;
                default:
                    result.ViewData["LayoutName"] = "_Layout";
                    break;
            }
        }

        public void OnActionExecuting(ActionExecutingContext context)
        {
        }
    }

And then you can register this filter globally by replacing the services.AddMvc like this.

services.AddMvc(options =>
            {
                options.Filters.Add(new SampleFilter());
            })

Hope this helps.

Answer 3

All the above did not solve the issue for me but the solution below works for me using .net 5 razor pages.

Note: i set the layout page based on the pages folder

the RelativePath gives you the url relative path like "/Pages/Admin/Index.cshtml" then i split the path to string array. from the array i get the folder name using pathArray[2].

var path = ((Microsoft.AspNetCore.Mvc.RazorPages.CompiledPageActionDescriptor)ViewContext.ActionDescriptor).RelativePath;
string[] pathArray = path.Split('/');
string pageFolder = pathArray[2];
if (pageFolder != null && pageFolder.ToLower()=="admin")
{
    Layout = "_AdminLayout";
}
else
{
    Layout = "_Layout";
}

Answer 4

You can try with ViewData. In the following code, I have changed the layout only for the contact page

Contact.cshtml.cs

    public void OnGet()
    {
        ViewData["page"] = "Contact";
        Message = "Your contact page.";
    }

_ViewStart.cshtml

@{

    if (ViewData["page"] != null && !string.IsNullOrWhiteSpace(ViewData["page"].ToString()))
    {
        Layout = "_ContactLayout";
    }
    else
    {
        Layout = "_Layout";
    }
}

Answer 5

Try this in _ViewStart.cshtml file :

@{
    if(ViewData["Layout"] == "Layout1")
        Layout = "_Layout";
    else Layout = "_Layout2";
}

That is an example that is working for me

Answer 6

Another great option is to use sections ! If you do not want to completely redo your _Layout or you do not want to have duplicate code in several different layout files.

Here is a section I made in my Layout:

<main role="main" class="pb-3">

    @* PageHeader is used if you want to put something outside of the bootstrap container. *@
    @await RenderSectionAsync("PageHeader", false);

    <div class="container">
        @RenderBody()
    </div>
</main>

Then in a different view file, I can render a section like this:

@section PageHeader
{
    <section class="container-fluid bg-light py-3">
    ...
    </section>
}