Render html conditionally based on route in Razor Pages

1
votes

Let's say I have the following Razor file _Layout.cshtml. How do I write the commented conditions when using ASP.NET Core 3+ and Razor Pages.

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" asp-page="/Index">Index</a>
    </li>

    @* If route starts with /a/, for example http://localhost/a/1.html and http://localhost/a/2/1.html *@
    <li class="nav-item">
        <a class="nav-link" asp-page="/a/Index">A</a>
    </li>

    @* If route starts with /b/, for example http://localhost/b/1.html and http://localhost/b/2/1.html *@
    <li class="nav-item">
        <a class="nav-link" asp-page="/b/Index">B</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" asp-page="/b/1/Index">B other</a>
    </li>
</ul>
2
asp.net-corerazorrazor-pages
Not sure if this would solve your problem, but it looks like you could add a custom value to the ViewState and show / hide elements based on that. See stackoverflow.com/a/57040167/12730491 (here they change the whole Layout file, but it should work for single elements too). - rm-code
@rm-code That would work, but I assumed that there was an easy way to access the current route in a Razor file. Would it be safe to assume there isn't? - Nicky Muller

2 Answers

1
votes

In Razor Pages you can use ViewContext.RouteData.Values["page"], also in the _Layout file. If the URL is e.g. https://localhost:44359/Help/About then it will produce /Help/About.

Using your code:

@{
    string page = ViewContext.RouteData.Values["page"] as string; // Values[] produces objects, so cast is needed
}

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" asp-page="/Index">Index</a>
    </li>

    @if (page.StartsWith("/a/"))
    {
        <li class="nav-item">
            <a class="nav-link" asp-page="/a/Index">A</a>
        </li>
    }

    @if (page.StartsWith("/b/"))
    {
        <li class="nav-item">
            <a class="nav-link" asp-page="/b/Index">B</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" asp-page="/b/1/Index">B other</a>
        </li>
    }
</ul>
0
votes

You can make a Razor Pages Convention that is executed for all Razor Pages in a certain folder. With this convention you can set an Action Filter (a Result Filter) to add an identifier to the ViewData.

The filter:

class AddRouteIdentifierFilter : ResultFilterAttribute
{
    private readonly string identifier;

    public TestFilter(string identifier)
    {
        this.identifier = identifier;
    }

    public override void OnResultExecuting(ResultExecutingContext context)
    {
        base.OnResultExecuting(context);
        ((PageResult)context.Result).ViewData["route-identifier"] = identifier;
    }
}

Setting the convention:

services.AddMvc().AddRazorPagesOptions(opt => 
    opt.Conventions.AddFolderApplicationModelConvention("/A", model =>
        model.Filters.Add(new AddRouteIdentifierFilter("a"));
    );
    opt.Conventions.AddFolderApplicationModelConvention("/B", model =>
        model.Filters.Add(new AddRouteIdentifierFilter("b"));
    );
);

Access the identifier in the Razor Page view:

<h1>Identifier: @ViewData["route-identifier"]</h1>