Asp.net 核心 Razor 页面 Post 来自 _layout

Question

我想做的是使用服务器会话中填充为深色或浅色的复选框来更改应用程序的主题。

我知道主题（样式 Sheet）可以用 JavaScript 更改，但这会导致加载默认的 Bootstrap 样式 Sheet 然后是深色样式，这会导致屏幕闪烁。

我需要做的是 return 来自服务器的 css 认为 post 方法如下。

<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>

上面的代码可以在视图组件或局部视图中，但我似乎无法找到 post 的方法。

_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">
    }
}

到目前为止我绑定的是部分视图和视图组件，但据我发现部分视图不能使用 OnPost 隐藏代码（添加 @page 到部分视图我得到的视图数据不能为空，尽管模型和视图数据已设置）并且视图组件无法调用方法。

我应该使用什么方法？

Answer 1

您可以 post 前往不同的路线，无论您目前身在何处。因此，假设您有一个 Razor 页面 SwitchTheme.cshtml，其中包含将主题切换到 POST 的代码隐藏，那么您可以将 <form> 标记调整为该页面的 post：

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

请注意使用 asp-page 标签帮助程序生成带有 link 的 action 属性到页面。

对于设计之类的更改，它不直接包含您要显示的某些页面内容，您也可以使用一个简单的控制器进行更改，然后重定向回来。然后，您将改用 asp-action 和 asp-controller 标签助手：

<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);
    }
}

Asp.net 核心 Razor 页面 Post 来自 _layout

Asp.net Core Razor Pages Post From _layout

c#

razor-pages

asp.net-core-3.1