在ASP.NET Core中通过PartialView内按钮切换Bootstrap主题色

你的核心问题在于客户端无法直接调用服务器端Razor静态方法，且直接在PartialView中操作HttpContext不符合MVC请求生命周期。下面是完整的可实现方案：

1. 服务器端：控制器处理Cookie逻辑 #

首先在控制器中添加处理主题切换的动作，负责修改并返回Cookie状态：

public IActionResult ToggleTheme()
{
    // 获取当前主题，默认light
    string currentTheme = Request.Cookies["mybg"] ?? "light";
    string newTheme = currentTheme == "light" ? "dark" : "light";

    // 设置Cookie参数，可自定义过期时间
    CookieOptions cookieOpts = new CookieOptions
    {
        Expires = DateTime.Now.AddDays(30),
        HttpOnly = false, // 允许JS读取，用于页面初始化时设置主题
        SameSite = SameSiteMode.Lax
    };

    // 更新Cookie
    Response.Cookies.Append("mybg", newTheme, cookieOpts);

    // 返回新主题状态给前端
    return Json(new { success = true, theme = newTheme });
}

2. PartialView：前端交互逻辑 #

修改PartialView的按钮和JS代码，通过AJAX调用服务器动作，同时即时切换Bootstrap主题：

<button id="themeToggleBtn" class="btn btn-sm btn-outline-light">
    切换主题
</button>

<script>
// 页面加载时，根据Cookie初始化主题
document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = getCookie('mybg') || 'light';
    setBootstrapTheme(savedTheme);
});

// 设置Bootstrap主题（通过根元素的data-bs-theme属性）
function setBootstrapTheme(theme) {
    document.documentElement.setAttribute('data-bs-theme', theme);
    // 同步更新按钮文字
    const btn = document.getElementById('themeToggleBtn');
    btn.textContent = theme === 'light' ? '切换深色' : '切换浅色';
}

// 读取Cookie的辅助函数
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

// 按钮点击事件：调用服务器接口切换主题
document.getElementById('themeToggleBtn').addEventListener('click', function() {
    fetch('/Home/ToggleTheme', { // 此处路由需对应你的控制器路径
        method: 'POST',
        headers: {
            // 带上CSRF令牌，MVC默认要求POST请求验证
            'X-CSRF-TOKEN': document.querySelector('input[name="__RequestVerificationToken"]').value
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            setBootstrapTheme(data.theme);
        }
    })
    .catch(err => console.error('主题切换失败：', err));
});
</script>

3. 关键注意事项 #

• CSRF令牌：确保你的布局页中包含@Html.AntiForgeryToken()，否则POST请求会被MVC拦截。
• 路由匹配：fetch中的/Home/ToggleTheme要对应你的控制器名称，比如如果控制器是ThemeController，则路径为/Theme/ToggleTheme。
• 服务器端初始化主题：如果不想让JS读取Cookie（将HttpOnly设为true），可以在布局页的根元素中用Razor直接设置主题：

  <html data-bs-theme="@(Context.Request.Cookies["mybg"] ?? "light")">
  

原代码问题说明 #

• 你写的ToggleTheme是服务器端静态方法，客户端JS无法直接调用，因为前后端代码运行环境完全分离。
• 在Razor视图块中直接操作HttpContext.Response.Cookies不符合MVC请求处理流程，这类操作应该放在控制器动作中完成。

内容的提问来源于stack exchange，提问作者Fillo