从 _layout 发布的 Asp.net Core Razor 页面

Question

What i'm trying to do is change the theme of the application using a check box that is populated as dark or light from the server's session.

I know the theme (Style Sheet) can be changed with JavaScript but that leads to loading the default Bootstrap Style Sheet then the dark one which causes the screen to flicker.

What I need to do is return the css from the server thought a post method like below.

<div>
    <form id="theme-switcher" method="post">
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" asp-for="IsDark" id="theme" />
            <label class="custom-control-label" for="theme">Theme</label>
        </div>
        <button id="change" type="submit" class="btn btn-primary">Change</button>
    </form>
</div>

The code above can be in a view component or a partial view but I can not seem to find a way to post the from.

_Layout.cshtml

@{
    bool isDark = HttpContext.HttpContext.Session.GetBoolean("IsDark");
}

<!-- Custom styles -->
@if (CultureInfo.CurrentUICulture.Name == "ar-LB")
{
    if (isDark)
    {
        <link rel="stylesheet" type="text/css" href="~/css/site-dark-rtl.css">
    }
    else
    {
        <link rel="stylesheet" type="text/css" href="~/css/site-rtl.css">
    }
}
else
{
    if (isDark)
    {
        <link rel="stylesheet" type="text/css" href="~/css/site-dark.css">
    }
    else
    {
        <link rel="stylesheet" type="text/css" href="~/css/site.css">
    }
}

What I've tied so far is partial views and view components but as far as I've found partial views can not have code behind with OnPost (when adding @page to the partial view I get view data can not be null although the model and the view data are set) and view components can not call methods.

What approach should I use ?

Answer 1

You can post to different routes, regardless of where you currently are. So assuming you have a Razor page SwitchTheme.cshtml with a code-behind that switches the theme on POST, then you can adjust your <form> tag to post to that page:

<form asp-page="/SwitchTheme" method="post">
    <!-- … -->
</form>

Note the use of the asp-page tag helper to generate the action attribute with a link to the page.

For changing things like the design, which doesn't directly have some page content you want to display, you could also use a simple controller that makes the change and then redirects back. Then, you would use the asp-action and asp-controller tag helpers instead:

<form asp-controller="Utility" asp-action="SwitchTheme" asp-route-returnUrl="@Context.Request.Path" method="post">
    <!-- … -->
</form>

public class UtilityController : ControllerBase
{
    [HttpPost]
    public IActionResult SwitchTheme([FromForm] bool isDark, string returnUrl)
    {
        // switch the theme

        // redirect back to where it came from
        return LocalRedirect(returnUrl);
    }
}